HTML Guide

Welcome to the Ultimate HTML Guide

This comprehensive guide demonstrates nearly every HTML tag in existence. HTML (HyperText Markup Language) is the foundation of the web, and understanding its full capabilities is essential for every web developer.

"The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy."

— Tim Berners-Lee, Inventor of the World Wide Web

Last updated:

Text Formatting Tags

Inline Text Semantics

<strong>
Strong importance - indicates content with strong importance
<em>
Emphasis - adds stress emphasis to text
<mark>
Highlighted text - marks text for reference
<del>
Deleted text - represents removed content
<ins>
Inserted text - represents added content
<sub>
H2O - subscript text for chemical formulas
<sup>
E = mc2 - superscript text for exponents
<kbd>
Press Ctrl + C to copy
<samp>
Output: Success! - sample output
<var>
The variable x represents the unknown value
<q>
He said, HTML is the backbone of the web
<s>
$99.99 Now only $49.99!
<u>
Misspeled word annotation
<b>
Bold text - stylistically offset text
<i>
Italic text - alternate voice or mood

Code Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, I am Ashikujjaman Himel!</h1>
  </body>
</html>

List Types

Unordered List

  • Semantic HTML elements
  • Accessibility features
  • SEO optimization
  • Cross-browser compatibility

Ordered List

  1. Plan your structure
  2. Write semantic HTML
  3. Add CSS styling
  4. Test responsiveness
  5. Deploy to production

Description List

HTML
Structure
CSS
Styling
JavaScript
Interactivity

Data Tables

HTML Tag Categories

Common HTML Tags by Category
Category Tag Purpose HTML5
Structure <header> Page or section header ✓
<main> Main content area ✓
<footer> Page or section footer ✓
Content <article> Self-contained content ✓
<section> Thematic grouping ✓
Total Categories: 2 | Total Tags: 5

Form Elements

HTML Learning Survey

Personal Information
Learning Preferences
Preferred Learning Format:
Technologies You Know:
70%
75%

Media Elements

Images & Figures

HTML Image
HTML5 - The modern web standard
Laptop Image

The <picture> element enables responsive images

SVG & Canvas

SVG

Scalable Vector Graphics (SVG) for crisp visuals at any size

Your browser does not support the canvas element.

The <canvas> element for dynamic graphics

Audio Element

The <audio> tag embeds sound content

Video Element

The <video> tag embeds video content with <track> for subtitles

Interactive Elements

Disclosure Widget

What is semantic HTML?

Semantic HTML uses tags that clearly describe their meaning to both the browser and the developer. Examples include <article>, <nav>, and <footer>.

Why is accessibility important?

Accessibility ensures that all users, including those with disabilities, can access and use your website effectively. It's both ethical and often legally required.

Dialog Element

Modal Dialog Example

The <dialog> element represents a dialog box or interactive component.

Embedded Content

IFrame Example

The <iframe> embeds another HTML page within the current page

Ruby Annotations

East Asian Typography

漢 (kan) 字 (ji)

Ruby annotations show pronunciation guides above or beside characters, commonly used in East Asian languages.