HTML Semantics
Master semantic HTML elements based on the WHATWG HTML Living Standard. Learn to create accessible, meaningful, and well-structured web content using proper semantic markup.
Why HTML Semantics Matter
Accessibility
Screen readers and assistive technologies rely on semantic HTML to understand and navigate content effectively.
SEO Benefits
Search engines better understand and index semantically structured content, improving search rankings.
Maintainability
Semantic markup makes code more readable and maintainable for developers and automated tools.
HTML Semantic Elements by Category
Document Structure
Elements that define the overall structure of an HTML document
Key Elements
<html>Root element that represents an HTML document
<head>Container for metadata about the document
<body>Contains the visible content of the document
<title>Defines the document title shown in browser tab
<meta>Provides metadata about the HTML document
Content Sectioning
Elements that organize content into logical sections
Key Elements
<header>Introductory content for a section or page
<nav>Contains navigation links
<main>Main content area of the document
<article>Self-contained content that could be distributed independently
<section>Thematic grouping of content with a heading
<aside>Content tangentially related to main content
<footer>Footer information for nearest sectioning content
Text Content
Elements for organizing and presenting textual content
Key Elements
<h1>-<h6>Heading elements that create document hierarchy
<p>Represents a paragraph of text
<ul>, <ol>, <li>Unordered lists, ordered lists, and list items
<dl>, <dt>, <dd>Description lists with terms and definitions
<figure>, <figcaption>Self-contained content with optional caption
Forms
Elements for creating interactive forms and user inputs
Key Elements
<form>Container for interactive form controls
<input>Various input types for user data entry
<label>Caption for form controls (essential for accessibility)
<select>, <option>Dropdown menus and their options
<textarea>Multi-line text input control
<button>Clickable button for user interactions
<fieldset>, <legend>Groups related form controls with a caption
Interactive Elements
Elements that provide interactive functionality
Key Elements
<a>Hyperlinks to other resources or page sections
<button>Interactive button for JavaScript actions
<details>, <summary>Disclosure widget with collapsible content
<dialog>Modal or non-modal dialog box