All HTML Semantic Tags: Code Examples and Best Practices

HTML semantic tags are the cornerstone of creating web pages that are both accessible and structured. These elements are designed to convey meaning, improving how browsers, search engines, and assistive technologies interpret your content. By organizing your HTML with semantic elements, you not only make your code more readable for other developers but also enhance user experience across various devices and platforms.

If you’ve ever felt frustrated trying to organize your content while maintaining accessibility and SEO best practices, semantic HTML tags are the solution. This guide will walk you through the purpose and usage of every semantic HTML element, categorized for easy understanding. By the end of this post, you’ll have a clear roadmap to implement these tags in your projects effectively.

Table of Contents

• Document Sections
• Text Content
• Text Semantics
• Content Grouping
• Forms and Input
• Tabular Data
• Media and Embedded

Document Sections

<article> Element

Represents a self-contained composition in a document, page, application, or site, intended to be independently distributable or reusable.

Example

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Use for self-contained, independent content
• Content should be meaningful on its own
• Include a heading element
• Suitable for: blog posts, news stories, comments, etc.

<aside> Element

Content within an aside tag is tangentially related to the content around the aside element and could be considered separate from that content.

Example

<aside>
  <h3>Related Information</h3>
  <p>Sidebar content...</p>
</aside>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Use for content that is tangentially related
• Suitable for sidebars, ads, related article links
• Don’t use for crucial information

<footer> Element

Contains information about its section such as authorship, links to related documents, or copyright data, typically located at the bottom.

Example

<footer>
  <p>&copy; 2024 Your Website</p>
</footer>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Contains authorship, related docs, copyright info
• Can be used in different sections
• Typically placed at the bottom of its container

<header> Element

Contains introductory content or a set of navigational aids for its nearest ancestor sectioning content or sectioning root element.

Example

<header>
  <h1>Page Title</h1>
  <nav>Navigation...</nav>
</header>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Use for introductory content
• Can be used multiple times in a document
• Often contains navigation and headings
• Can be used in different sections

<main> Element

Contains the dominant content of the body of a document or application, unique to the document and excluding content repeated across a set of documents.

Example

<main>
  <h1>Main Content</h1>
  <p>Primary content of the page...</p>
</main>

Browser Support

• Chrome: ✅ Supported since version 26
• Firefox: ✅ Supported since version 21
• Safari: ✅ Supported since version 7

Best Practices

• Use only once per page
• Contains the primary content
• Exclude repeated content like headers and footers
• Should be direct child of body

<nav> Element

Indicates a section of a page that links to other pages or to parts within the current page, a section with navigation links.

Example

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Use for major navigation blocks
• Consider using ARIA landmarks
• Typically contains ul elements
• Don’t use for all groups of links

<section> Element

Represents a standalone section, which doesn’t have a more specific semantic element to represent it, and should typically include a heading.

Example

<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

Browser Support

• Chrome: ✅ Supported since version 5
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5

Best Practices

• Use to group related content
• Should typically contain a heading
• Don’t use solely for styling purposes
• Consider content hierarchy

Text Content

<blockquote> Element

Indicates that the enclosed text is an extended quotation from another source.

Example

<blockquote>
  Example content
</blockquote>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<dd> Element

Provides the description or definition of a term in a description list (dl) element.

Example

<dd>
  Example content
</dd>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<div> Element

A generic container with no semantic meaning, used for grouping content for styling purposes.

Example

<div>
  Example content
</div>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<dl> Element

Indicates a description list, consisting of terms and their descriptions.

Example

<dl>
  Example content
</dl>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<dt> Element

Indicates a term in a description list (dl) element.

Example

<dt>
  Example content
</dt>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<figcaption> Element

Represents a caption or legend describing the rest of the contents of its parent figure element.

Example

<figcaption>
  Example content
</figcaption>

Browser Support

• Chrome: ✅ Supported since version 8
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5.1

<figure> Element

Encapsulates self-contained content, potentially with an optional caption, often an image, illustration, diagram, or code snippet.

Example

<figure>
  <img src="example.jpg" alt="Example image">
  <figcaption>Image caption</figcaption>
</figure>

Browser Support

• Chrome: ✅ Supported since version 8
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5.1

Best Practices

• Use for self-contained content like images, diagrams, code
• Should use figcaption for description
• Content should be referenced but independent

<hr> Element

Represents a thematic break between paragraph-level elements, often rendered as a horizontal rule.

Example

<hr>
  Example content
</hr>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 3

<li> Element

Represents a list item in an ordered list (ol), unordered list (ul), or menu (menu).

Example

<li>
  Example content
</li>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 3

<ol> Element

Indicates an ordered list of items, typically rendered as a numbered list.

Example

<ol>
  Example content
</ol>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<p> Element

Represents a paragraph of text.

Example

<p>
  Example content
</p>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<pre> Element

Indicates preformatted text, where whitespace is preserved by browsers.

Example

<pre>
  Example content
</pre>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<ul> Element

Represents an unordered list of items, typically rendered as a bullet-pointed list.

Example

<ul>
  Example content
</ul>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

Text Semantics

<abbr> Element

Represents an abbreviation or acronym; the full description can be provided in the title attribute.

Example

<abbr>
  Example content
</abbr>

Browser Support

• Chrome: ✅ Supported since version 2
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 4

<cite> Element

Marks a reference to a creative work, including the title or author of that work.

Example

<cite>
  Example content
</cite>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<code> Element

Represents a fragment of computer code.

Example

<code>
  Example content
</code>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<dfn> Element

Indicates the defining instance of a term.

Example

<dfn>
  Example content
</dfn>

Browser Support

• Chrome: ✅ Supported since version 15
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 6

<em> Element

Marks text that has stress emphasis.

Example

<em>
  Example content
</em>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<kbd> Element

Represents user input, often from a keyboard.

Example

<kbd>
  Example content
</kbd>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<mark> Element

Highlights text relevant to a particular context.

Example

<p>This is a text where <mark>this part is highlighted</mark></p>

Browser Support

• Chrome: ✅ Supported since version 7
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5.1

<q> Element

Indicates an inline quotation.

Example

<q>
  Example content
</q>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 3

<strong> Element

Indicates text of strong importance, seriousness, or urgency.

Example

<strong>
  Example content
</strong>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<samp> Element

Indicates sample output from a computer program.

Example

<samp>
  Example content
</samp>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<small> Element

Represents side comments and small print, such as copyright and legal text.

Example

<small>
  Example content
</small>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<sub> Element

Designates subscript text.

Example

<sub>
  Example content
</sub>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<sup> Element

Designates superscript text.

Example

<sup>
  Example content
</sup>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<time> Element

Represents a specific period in time, expressed in a machine-readable format.

Example

<time datetime="2024-03-15">March 15, 2024</time>

Browser Support

• Chrome: ✅ Supported since version 62
• Firefox: ✅ Supported since version 22
• Safari: ✅ Supported since version 7

<var> Element

Indicates a variable, in mathematical expressions or programming contexts.

Example

<var>
  Example content
</var>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

Content Grouping

<address> Element

Indicates contact information for the author/owner of a document or article.

Example

<address>
  Example content
</address>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<details> Element

Creates a disclosure widget which the user can open and close to reveal or hide additional information.

Example

<details>
  Example content
</details>

Browser Support

• Chrome: ✅ Supported since version 12
• Firefox: ✅ Supported since version 49
• Safari: ✅ Supported since version 6

<dialog> Element

Represents a dialog box or other interactive component, such as an inspector or subwindow.

Example

<dialog>
  Example content
</dialog>

Browser Support

• Chrome: ✅ Supported since version 37
• Firefox: ✅ Supported since version 98
• Safari: ✅ Supported since version 15.4

<summary> Element

Provides a summary, caption, or legend for a details element’s disclosure box.

Example

<summary>
  Example content
</summary>

Browser Support

• Chrome: ✅ Supported since version 12
• Firefox: ✅ Supported since version 49
• Safari: ✅ Supported since version 6

Forms and Input

<button> Element

Represents a clickable button used to submit forms or anywhere in a document for accessible, standard button functionality.

Example

<button>
  Example content
</button>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<fieldset> Element

Groups related elements in a form, drawing a box around them.

Example

<fieldset>
  Example content
</fieldset>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<form> Element

Creates a form for user input, containing controls such as input fields, buttons, and more.

Example

<form>
  Example content
</form>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 3

<label> Element

Represents a caption for an item in a user interface, associated with a specific form control.

Example

<label>
  Example content
</label>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<legend> Element

Represents a caption for the content of its parent fieldset element.

Example

<legend>
  Example content
</legend>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 3

<meter> Element

Represents a scalar measurement within a known range, or a fractional value; also known as a gauge.

Example

<meter>
  Example content
</meter>

Browser Support

• Chrome: ✅ Supported since version 6
• Firefox: ✅ Supported since version 16
• Safari: ✅ Supported since version 6

<optgroup> Element

Creates a group of options within a select element’s dropdown list.

Example

<optgroup>
  Example content
</optgroup>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<option> Element

Defines an item within a select, optgroup, or datalist element.

Example

<option>
  Example content
</option>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<progress> Element

Displays the progress of a task, typically rendered as a progress bar.

Example

<progress>
  Example content
</progress>

Browser Support

• Chrome: ✅ Supported since version 6
• Firefox: ✅ Supported since version 6
• Safari: ✅ Supported since version 6

<select> Element

Creates a control that provides a menu of options.

Example

<select>
  Example content
</select>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<textarea> Element

Represents a multi-line plain-text editing control, useful for comments or detailed input.

Example

<textarea>
  Example content
</textarea>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

Tabular Data

<caption> Element

Specifies the title of a table, displayed outside the table itself.

Example

<caption>
  Example content
</caption>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<col> Element

Defines a column within a table and is used for applying styles to entire columns, rather than individual cells.

Example

<col>
  Example content
</col>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<colgroup> Element

Groups one or more columns in a table for formatting purposes.

Example

<colgroup>
  Example content
</colgroup>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version ≤4

<table> Element

Creates a table, organizing data into rows and columns.

Example

<table>
  Example content
</table>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<tbody> Element

Groups the body content in an HTML table, consisting of one or more table rows (tr).

Example

<tbody>
  Example content
</tbody>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<td> Element

Defines a cell of a table that contains data.

Example

<td>
  Example content
</td>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<tfoot> Element

Groups the footer content in an HTML table, summarizing the columns.

Example

<tfoot>
  Example content
</tfoot>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<th> Element

Defines a header cell in an HTML table.

Example

<th>
  Example content
</th>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<thead> Element

Groups the header content in an HTML table.

Example

<thead>
  Example content
</thead>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

<tr> Element

Defines a row of cells in a table.

Example

<tr>
  Example content
</tr>

Browser Support

• Chrome: ✅ Supported since version 1
• Firefox: ✅ Supported since version 1
• Safari: ✅ Supported since version 1

Media and Embedded

<audio> Element

Embeds sound content in documents.

Example

<audio>
  Example content
</audio>

Browser Support

• Chrome: ✅ Supported since version 3
• Firefox: ✅ Supported since version 3.5
• Safari: ✅ Supported since version 3.1

<figure> Element

Encapsulates self-contained content, often an image, illustration, diagram, or code snippet, potentially with an optional caption.

Example

<figure>
  <img src="example.jpg" alt="Example image">
  <figcaption>Image caption</figcaption>
</figure>

Browser Support

• Chrome: ✅ Supported since version 8
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5.1

Best Practices

• Use for self-contained content like images, diagrams, code
• Should use figcaption for description
• Content should be referenced but independent

<figcaption> Element

Represents a caption or legend for a figure.

Example

<figcaption>
  Example content
</figcaption>

Browser Support

• Chrome: ✅ Supported since version 8
• Firefox: ✅ Supported since version 4
• Safari: ✅ Supported since version 5.1

<picture> Element

Acts as a container for multiple image resources, allowing the browser to choose the most suitable image based on display characteristics and pixel density.

Example

<picture>
  Example content
</picture>

Browser Support

• Chrome: ✅ Supported since version 38
• Firefox: ✅ Supported since version 38
• Safari: ✅ Supported since version 9.1

<source> Element

Specifies multiple media resources for media elements like picture, audio, and video.

Example

<source>
  Example content
</source>

Browser Support

• Chrome: ✅ Supported since version 3
• Firefox: ✅ Supported since version 3.5
• Safari: ✅ Supported since version 3.1

<track> Element

Specifies timed text tracks for media elements like audio and video.

Example

<track>
  Example content
</track>

Browser Support

• Chrome: ✅ Supported since version 23
• Firefox: ✅ Supported since version 31
• Safari: ✅ Supported since version 6

<video> Element

Embeds a video player in a document, supporting video playback.

Example

<video>
  Example content
</video>

Browser Support

• Chrome: ✅ Supported since version 3
• Firefox: ✅ Supported since version 3.5
• Safari: ✅ Supported since version 3.1

FAQs

What makes an HTML tag semantic?

A semantic tag clearly describes its meaning to both the browser and the developer. Unlike non-semantic tags such as <div> and <span>, semantic tags like <article>, <aside>, and <nav> convey the purpose of the content they enclose.

How do semantic tags improve SEO?

Semantic tags help search engines understand the context and relevance of web page content. By using tags that accurately describe the structure and meaning of content, websites become more visible and rank better in search results.

Can semantic tags improve website accessibility?

Yes, semantic tags enhance accessibility by providing structural information that assistive technologies, such as screen readers, use to convey content meaning to users with disabilities.

Are there any performance benefits to using semantic HTML?

While semantic HTML primarily improves readability and accessibility, it indirectly contributes to better performance by enabling search engines to index content more effectively and by facilitating more efficient code maintenance and updates.

What happens if I don’t use semantic tags?

Websites still function without semantic tags, but they lose significant benefits in accessibility, SEO, and maintainability. Content becomes harder to interpret for both users and search engines, potentially leading to poor user experience and reduced online visibility.

Related Resources

• MDN Web Docs: Offers comprehensive documentation for all HTML elements, including detailed explanations and usage examples.
• W3C HTML Specification: Provides the official specification for HTML, detailing the standards and guidelines for using semantic elements correctly.
• CSS in 2025: 10 New CSS Features You Should Know

Wrapping It Up

HTML semantic tags are a must-have for building accessible, SEO-friendly, and maintainable websites. From organizing your content with <article> to improving accessibility with <header> and <footer>, these tags simplify collaboration and make your code future-proof. They are perfect for projects ranging from personal blogs to collaborative team environments.

If this guide helped you understand semantic HTML tags, share it on social media to help others in the community. Have insights or questions? Leave a comment below—we’d love to hear from you!