List of HTML Semantic Elements By Intended Use

13 November 2023

——

HTML semantic elements can be categorized based on their intended use or the kind of content they typically represent.

Here's a categorized list:

Document Structure

<html>: Root of an HTML document.
<head>: Container for metadata (title, scripts, styles).
<body>: Contains the content of an HTML document.
<header>: Introductory content or navigational links.
<footer>: Footer for a section or page.
<main>: Dominant content of the document.
<nav>: Navigation links.
<section>: Section in a document.
<article>: Self-contained composition.
<aside>: Content indirectly related to the main content.

Text Content

<h1> to <h6>: Heading elements.
<p>: Paragraph.
<ol>: Ordered list.
<ul>: Unordered list.
<li>: List item.
<dl>: Description list.
<dt>: Term/name in a description list.
<dd>: Description of a term in a description list.
<figure>: Self-contained content, often with a caption (<figcaption>).
<blockquote>: Block quotation.
<pre>: Preformatted text.
<hr>: Thematic break (horizontal rule).

Inline Text Semantics

<a>: Hyperlink.
<em>: Emphasized text.
<strong>: Important text.
<small>: Smaller, side comments.
<mark>: Highlighted text.
<abbr>: Abbreviation or acronym.
<time>: Date/time.
<code>: Inline code snippet.
<q>: Inline quotation.

Embedded Content

<img>: Image.
<iframe>: Inline frame.
<embed>: Embed external application or interactive content.
<object>: External resource.
<video>: Video content.
<audio>: Audio content.
<source>: Media element source.
<canvas>: Drawing area for graphics.

Form Elements

<form>: Form for user input.
<input>: Input control.
<textarea>: Multiline text input.
<button>: Clickable button.
<select>: Drop-down list.
<optgroup>: Group of options in a drop-down list.
<option>: Option in a drop-down list.
<label>: Label for an <input> element.
<fieldset>: Group of related elements in a form.
<legend>: Caption for a <fieldset>.

Scripting

<script>: Script statements.
<noscript>: Content to display when scripts are not supported or disabled.

Interactive Elements

<details>: Disclosure widget with additional details.
<summary>: Visible heading for a <details> element.
<dialog>: Dialog box or window.

This categorization helps in understanding the purpose and typical use of each element, making it easier to structure your HTML documents semantically and accessibly.

Comments

—approved

Approved comments will appear here.