HTML Tag List
In this page:
Structural and Layout Tags
Structural tags define the main layout columns of your page. They organize your webpage into logical zones like headers, footers, main content grids, and sidebars. Semantic tags like header, main, and footer are preferred over generic divs because they also communicate meaning to search engines and screen readers.
Note: Use semantic layout tags to organize your pages cleanly instead of relying on generic div tags.
Warning: Avoid nesting multiple main tags on a single page, as it violates HTML validation rules.
Example: Structural and Layout Tags
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>Text and Inline Formatting Tags
Text tags are used to format and structure your written content, establishing a clear visual order for headings, paragraphs, bold text, and italicized emphasis. Using the semantically correct tag (like strong instead of just b) also improves accessibility for screen reader users.
Note: Use strong and em tags to bold and italicize text semantically for better screen-reader accessibility.
Warning: Do not use heading tags just to make text bold or big; use actual CSS styling for that.
Example: Text and Inline Formatting Tags
<h1>Heading</h1>
<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>Form and Interactive Input Tags
Form tags are used to gather data and handle user interactions. They define interactive elements like text inputs, selection menus, buttons, and textareas. Every form control should be paired with a label element so users know what each field expects.
Note: Always pair your input fields with linked labels to keep your forms accessible.
Warning: Never omit the submit type attribute on your buttons, as they can cause unexpected submissions.
Example: Form and Interactive Input Tags
<label for="name">Name:</label>
<input type="text" id="name">
<button type="submit">Submit</button>Media and Asset Embedding Tags
Media tags allow you to embed images, videos, audio clips, vector shapes, or other external resources directly onto your page. Modern responsive sites often pair these with the srcset attribute to serve different image sizes per device.
Note: Always write descriptive alt text for your images to keep your graphics accessible.
Warning: Failing to define image dimensions (width and height) can cause layout shifting as your page loads.
Example: Media and Asset Embedding Tags
<img src="photo.jpg" srcset="photo.jpg 1x, [email protected] 2x" alt="Photo">Configuration and Metadata Tags
Metadata tags reside exclusively inside the head section. They stay hidden on your page but provide the browser with essential configuration instructions (like page titles, character sets, and stylesheets).
Note: Specify UTF-8 as your character set to support global languages and emojis natively.
Warning: Do not place visible content tags (like h1 or p) inside the head section, as it violates HTML standards.
Example: Configuration and Metadata Tags
<head>
<title>My Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>- Using visual tags like b and i instead of semantic tags like strong and em.
- Omitting required alt attributes on images, leaving them invisible to screen readers.
- Placing visible content tags like paragraphs inside the head section of your page.
- HTML tags are categorized into structural, text, form, media, and metadata elements.
- Semantic layout tags organize content into logical zones, and metadata tags handle configurations in the head section.
- Choose the correct tag for each task to keep your code clean, readable, accessible, and SEO-friendly.
Standard HTML structural, text, media, and form elements are natively supported by all modern web browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: