HTML5 Semantic Elements

1. Document Sectioning (<header>, <nav>, <main>, <aside>, <footer>)

Element	Purpose	Typical Use	Can Contain
<header>	Introductory content or navigation	Page header, article header, section header	Any content except <header> or <footer>
<nav>	Navigation links section	Main menu, breadcrumbs, pagination, table of contents	Links, lists, text content
<main> HTML5	Primary page content (unique per page)	Main article, central content area	Any content except <header>, <footer>, <aside>, <nav>
<aside>	Tangentially related content	Sidebars, pull quotes, advertising, related links	Any flow content
<footer>	Footer for nearest sectioning element	Page footer, article footer, copyright info	Any content except <header> or <footer>

Usage Rules

<main> must be unique (only one per page)
<main> should not be descendant of <article>, <aside>, <footer>, <header>, <nav>
<header> and <footer> can appear multiple times
<nav> for major navigation only
<aside> can be inside <article> or at page level

Accessibility Benefits

Screen readers identify page landmarks
Keyboard navigation shortcuts enabled
Clearer document structure for assistive tech
Better content prioritization
Improved skip navigation functionality

Example: Complete page structure with semantic elements

<body>
  <header>
    <h1>Site Name</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <p>By Author | Published: Jan 1, 2025</p>
      </header>
      <p>Article content...</p>
      <footer>
        <p>Tags: HTML, Semantic</p>
      </footer>
    </article>
  </main>

  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2025 Company Name. All rights reserved.</p>
  </footer>
</body>

2. Content Sectioning (<section>, <article>, <hgroup>)

Element	Purpose	When to Use	Should Contain
<section>	Thematic grouping of content	Chapters, tabbed content, themed groups	Heading + related content
<article>	Self-contained, distributable content	Blog posts, news articles, forum posts, comments	Independent, reusable content
<hgroup> REMOVED	Groups heading with subheading	Removed from HTML5 spec, avoid use	Multiple heading elements (h1-h6)
<div>	Generic container (no semantic meaning)	Styling/scripting only, when no semantic element fits	Any content

<section> vs <article>

Aspect	<section>	<article>
Independence	Part of a whole	Standalone content
Reusability	Context-dependent	Fully reusable
RSS Feed	No	Yes, makes sense
Nesting	Can contain <article>	Can contain <section>

Note: <div> vs Semantic Elements

Use semantic elements first
<div> for styling containers only
Semantic = better SEO + accessibility
<div> has no meaning to assistive tech
Prefer <section> over <div> when possible

Example: Proper use of section and article

<!-- Article containing sections -->
<article>
  <h1>Complete Guide to HTML5</h1>
  <section>
    <h2>Introduction</h2>
    <p>Introduction content...</p>
  </section>
  <section>
    <h2>Semantic Elements</h2>
    <p>Semantic elements explanation...</p>
  </section>
</article>

<!-- Section containing articles (blog posts) -->
<section>
  <h2>Latest Blog Posts</h2>
  <article>
    <h3>Post Title 1</h3>
    <p>Post content...</p>
  </article>
  <article>
    <h3>Post Title 2</h3>
    <p>Post content...</p>
  </article>
</section>

Warning: <hgroup> was removed from HTML5 specification. Use <header> with heading and <p> for subtitles instead.

3. Heading Hierarchy (h1-h6) and Document Outline

Level	Element	Purpose	SEO Weight
1	`<h1>`	Main page heading (one per page recommended)	Highest
2	`<h2>`	Major sections	Very High
3	`<h3>`	Subsections	High
4	`<h4>`	Sub-subsections	Medium
5	`<h5>`	Minor headings	Low
6	`<h6>`	Smallest headings	Lowest

Best Practices:

One h1 per page (primary topic)
Don't skip heading levels (h1→h2→h3)
Use headings for structure, not styling
Each section should have a heading
Headings create document outline
Screen readers use headings for navigation

Common Mistakes:

❌ Multiple h1 elements (debated)
❌ Skipping levels (h1 → h3)
❌ Using headings for font size only
❌ Empty headings
❌ Inconsistent hierarchy
❌ Headings inside <address>

Example: Proper heading hierarchy

<!-- Correct hierarchy -->
<h1>Website Title</h1>
  <h2>Main Section</h2>
    <h3>Subsection</h3>
      <h4>Detail Point</h4>
    <h3>Another Subsection</h3>
  <h2>Second Main Section</h2>

<!-- Article with its own heading structure -->
<article>
  <h2>Article Title</h2>
  <p>Introduction...</p>
  <h3>First Point</h3>
  <p>Content...</p>
  <h3>Second Point</h3>
  <p>Content...</p>
</article>

Note: HTML5 sectioning elements (<article>, <section>, etc.) were intended to allow multiple h1 elements, but this is not well supported by assistive technologies. Stick to traditional hierarchy.

4. Address Element (<address>) and Contact Information

Element	Purpose	Can Contain	Cannot Contain
<address>	Contact info for article/page author	Contact details, links, text	Headings, sectioning content, <address>

Appropriate Uses:

Author contact information
Company/organization contact details
Email addresses
Physical addresses
Phone numbers
Social media links

Inappropriate Uses:

❌ Postal addresses unrelated to contact
❌ Publication dates
❌ Generic company info in content
❌ Addresses in article text
❌ Mailing list descriptions

Example: Various address element uses

<!-- Page footer contact -->
<footer>
  <address>
    Contact us at:<br>
    <a href="mailto:info@example.com">info@example.com</a><br>
    Phone: <a href="tel:+1234567890">+1 (234) 567-890</a><br>
    123 Main Street, City, State 12345
  </address>
</footer>

<!-- Article author contact -->
<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
  <footer>
    <address>
      Written by <a href="mailto:author@example.com">John Doe</a><br>
      Follow on Twitter: <a href="https://twitter.com/johndoe">@johndoe</a>
    </address>
  </footer>
</article>

<!-- Multiple contact methods -->
<address>
  <strong>Customer Support:</strong><br>
  Email: <a href="mailto:support@example.com">support@example.com</a><br>
  Live Chat: <a href="/chat">Start Chat</a><br>
  Phone: Available 9AM-5PM EST
</address>

Note: Default browser styling typically italicizes <address> content. Use CSS to override if needed. The element provides semantic meaning, not just styling.

5. Time and Date Elements (<time> datetime)

Attribute	Purpose	Format	Example
datetime	Machine-readable date/time	ISO 8601 format	`2025-12-21`
datetime (time)	Specific time	HH:MM or HH:MM:SS	`14:30`, `14:30:45`
datetime (full)	Date and time combined	YYYY-MM-DDTHH:MM	`2025-12-21T14:30`
datetime (timezone)	With timezone offset	...T...+/-HH:MM	`2025-12-21T14:30+05:00`
datetime (duration)	Time duration	P[n]Y[n]M[n]DT[n]H[n]M[n]S	`P3D` (3 days), `PT2H30M` (2.5 hours)

Common Date Formats

Type	Format	Example
Date	YYYY-MM-DD	`2025-12-21`
Year-Month	YYYY-MM	`2025-12`
Year	YYYY	`2025`
Week	YYYY-W##	`2025-W51`

Duration Examples

Duration	Format
1 hour	`PT1H`
30 minutes	`PT30M`
2 days	`P2D`
1 year 6 months	`P1Y6M`

Example: Time element in various contexts

<!-- Human-readable with machine-readable datetime -->
<p>Published on <time datetime="2025-12-21">December 21, 2025</time></p>

<!-- Specific time -->
<p>Event starts at <time datetime="2025-12-21T19:00">7:00 PM</time></p>

<!-- With timezone -->
<time datetime="2025-12-21T19:00-05:00">7:00 PM EST</time>

<!-- Duration -->
<p>Video length: <time datetime="PT2H30M">2 hours 30 minutes</time></p>

<!-- Relative dates -->
<p>Posted <time datetime="2025-12-20">yesterday</time></p>

<!-- Just year -->
<p>Copyright <time datetime="2025">2025</time></p>

<!-- Date range (use two time elements) -->
<p>Conference: <time datetime="2025-06-15">June 15</time> to 
   <time datetime="2025-06-17">June 17, 2025</time></p>

Note: The <time> element improves SEO and accessibility by providing machine-readable dates. Search engines and assistive technologies can parse and understand temporal information.

6. Ruby Annotations (<ruby>, <rt>, <rp>) for East Asian Typography

Element	Purpose	Required	Example Content
<ruby>	Container for ruby annotation	Yes	Base text + annotation
<rb>	Ruby base text	Optional (implicit)	Kanji, Hanzi characters
<rt>	Ruby text (pronunciation/meaning)	Yes	Furigana, Pinyin, pronunciation
<rp>	Ruby parentheses (fallback)	Optional	Parentheses for unsupported browsers
<rtc>	Ruby text container	Optional	Groups multiple <rt> elements

Common Use Cases:

Japanese: Furigana for kanji pronunciation
Chinese: Pinyin romanization
Korean: Hanja pronunciation
Pronunciation guides
Translation annotations
Phonetic guides for learning

Browser Support

Element	Support
<ruby>	All modern browsers
<rt>	All modern browsers
<rp>	All browsers
<rtc>, <rb>	Limited support

Example: Ruby annotations for different languages

<!-- Japanese Furigana (simple) -->
<ruby>
  漢字
  <rp>(</rp>
  <rt>かんじ</rt>
  <rp>)</rp>
</ruby>

<!-- Chinese Pinyin -->
<ruby>
  汉语
  <rp>(</rp>
  <rt>Hànyǔ</rt>
  <rp>)</rp>
</ruby>

<!-- Multiple characters with individual annotations -->
<ruby>
  <rb>東</rb><rt>とう</rt>
  <rb>京</rb><rt>きょう</rt>
</ruby>

<!-- Complex ruby with double annotations -->
<ruby>
  <rb>東京</rb>
  <rtc><rt>とうきょう</rt></rtc>
  <rtc><rt>Tokyo</rt></rtc>
</ruby>

<!-- Fallback for old browsers using <rp> -->
<ruby>
  日本語
  <rp>(</rp>
  <rt>にほんご</rt>
  <rp>)</rp>
</ruby>
<!-- Renders as: 日本語(にほんご) in unsupported browsers -->

Note: Always include <rp> elements for graceful degradation in browsers that don't support ruby annotations. The text will display with parentheses as fallback.

Section 2 Key Takeaways

Use <header>, <nav>, <main>, <aside>, <footer> for page structure
<main> must be unique per page; only one allowed
<article> for standalone content; <section> for thematic grouping
Maintain proper heading hierarchy (h1→h2→h3); don't skip levels
One h1 per page recommended for best SEO and accessibility
<address> for contact information only, not general addresses
<time> with datetime attribute for machine-readable dates
<ruby> with <rt> and <rp> for East Asian typography annotations

Related Cheat Sheets

HTML