HTML5 Semantic Elements and Structure

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 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 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

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 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 Cheatsheets

Frontend