2.7: Semantic HTML5

1. What is Semantic HTML?

Semantic HTML uses HTML elements that clearly describe their meaning and purpose to both browsers and developers.

Semantic vs Non-Semantic

<div class="header">
  <div class="nav">
    <div class="link">Home</div>
    <div class="link">About</div>
  </div>
</div>

<div class="content">
  <div class="post">
    <div class="title">Article Title</div>
    <div class="text">Article content...</div>
  </div>
</div>

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>

Why Semantic HTML Matters

1. Accessibility

• Screen readers understand page structure
• Users can navigate by landmarks
• Better experience for assistive technology

2. SEO

• Search engines understand content importance
• Better ranking for relevant content
• Rich snippets in search results

3. Maintainability

• Code is self-documenting
• Easier for developers to understand
• Reduces need for comments

4. Future-proof

• Works with new devices/technologies
• Browser/assistive tech improvements benefit you
• Standards compliance

2. Structural Semantic Elements

<header> - Introductory Content

Site header:

<header>
  <h1>Website Name</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

Article header:

<article>
  <header>
    <h2>Article Title</h2>
    <p class="meta">
      By <span class="author">John Doe</span> •
      <time datetime="2024-01-05">January 5, 2024</time>
    </p>
    <p class="summary">A brief summary of the article...</p>
  </header>

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

Can have multiple <header> elements (one per section/article)

<nav> - Navigation Links

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<footer>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
    <a href="/sitemap">Sitemap</a>
  </nav>
</footer>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li>Laptops</li>
  </ol>
</nav>

Best practice: Use aria-label to distinguish multiple <nav> elements

<main> - Primary Content

<main>
  <h1>Page Title</h1>
  <p>Main content of the page...</p>
</main>

Rules:

• Only ONE <main> per page
• Contains unique content (not repeated headers/footers)
• Cannot be descendant of <article>, <aside>, <footer>, <header>, <nav>

<article> - Self-contained Content

Use when content can:

• Stand alone
• Be syndicated (RSS feed)
• Be reused independently

<article>
  <header>
    <h2>How to Learn HTML</h2>
    <p>Published on <time>January 5, 2024</time></p>
  </header>

  <p>HTML is the foundation of web development...</p>

  <footer>
    <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/tutorial">Tutorial</a></p>
  </footer>
</article>

<article>
  <h2>Breaking News: HTML6 Announced</h2>
  <p>The W3C announced HTML6 today...</p>
</article>

<article class="product">
  <img src="laptop.jpg" alt="Laptop">
  <h3>MacBook Pro</h3>
  <p>$1,999</p>
  <button>Add to Cart</button>
</article>

<section> - Thematic Grouping

Use for: Themed content groups (usually with heading)

<main>
  <h1>Annual Report 2024</h1>

  <section>
    <h2>Financial Performance</h2>
    <p>Revenue increased 25%...</p>
  </section>

  <section>
    <h2>Market Expansion</h2>
    <p>We entered 5 new markets...</p>
  </section>

  <section>
    <h2>Future Outlook</h2>
    <p>Looking ahead to 2025...</p>
  </section>
</main>

Each <section> should have a heading (usually <h2> or <h3>)

<aside> - Tangentially Related Content

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="/article-1">Getting Started with CSS</a></li>
    <li><a href="/article-2">JavaScript Basics</a></li>
  </ul>
</aside>

<article>
  <p>The web has evolved significantly...</p>

  <aside>
    <h4>Did you know?</h4>
    <p>The first website was published in 1991</p>
  </aside>

  <p>Modern web development involves...</p>
</article>

<footer> - Footer Content

Site footer:

<footer>
  <div class="footer-content">
    <section>
      <h3>About Us</h3>
      <p>Company description...</p>
    </section>

    <section>
      <h3>Quick Links</h3>
      <nav>
        <a href="/privacy">Privacy Policy</a>
        <a href="/terms">Terms of Service</a>
      </nav>
    </section>
  </div>

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

Article footer:

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

  <footer>
    <p>Author: John Doe</p>
    <p>Published: January 5, 2024</p>
    <p>Tags: HTML, Tutorial</p>
  </footer>
</article>

Can have multiple <footer> elements (one per section/article)

3. Text-Level Semantic Elements

<mark> - Highlighted/Marked Text

<p>Search results for "<mark>HTML tutorial</mark>":</p>

<p>The <mark>most important</mark> thing to remember is...</p>

Default styling: Yellow background

<time> - Date/Time

<p>Published on <time datetime="2024-01-05">January 5, 2024</time></p>

<p>The event starts at <time datetime="2024-12-25T14:00">2 PM on Christmas Day</time></p>

<p>Posted <time datetime="2024-01-05T10:30" title="January 5, 2024 at 10:30 AM">2 hours ago</time></p>

datetime attribute: Machine-readable format (ISO 8601)

<address> - Contact Information

<address>
  <p>Contact us:</p>
  <p>
    Email: <a href="mailto:info@example.com">info@example.com</a><br>
    Phone: <a href="tel:+1234567890">+1 (234) 567-890</a>
  </p>
  <p>
    123 Main Street<br>
    New York, NY 10001<br>
    United States
  </p>
</address>

Note: For contact info of author/organization, not physical addresses in general

<details> and <summary> - Disclosure Widget

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden until you click the summary.</p>
</details>

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS (Cascading Style Sheets) is used to style and layout web pages.</p>
</details>

Interactive: Browser provides expand/collapse functionality

<dialog> - Dialog/Modal

<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>This is a modal dialog.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Methods:

• dialog.showModal() - Show as modal (blocks page)
• dialog.show() - Show as non-modal
• dialog.close() - Close dialog

4. Complete Page Structure

Semantic Page Layout

A well-structured semantic page includes:

1. Skip Link - Accessibility feature

   <a href="#main" class="skip-link">Skip to main content</a>
   

2. Site Header - Branding and navigation

   <header>
     <h1>Site Name</h1>
     <nav aria-label="Main navigation">
       <a href="/">Home</a>
     </nav>
   </header>
   

3. Main Content Area - Primary content

   <main id="main">
     <article>
       <header>
         <h2>Article Title</h2>
         <time datetime="2024-01-05">Jan 5, 2024</time>
       </header>
       <section>
         <h3>Section Title</h3>
         <p>Content...</p>
       </section>
     </article>
   </main>
   

4. Sidebar - Related content

   <aside>
     <h3>Related Posts</h3>
     <ul><li>Link 1</li></ul>
   </aside>
   

5. Site Footer - Footer content

   <footer>
     <p>&copy; 2024 Company</p>
   </footer>
   

Key structural patterns:

• Only ONE <main> element per page
• Multiple <header> and <footer> allowed (one per article/section)
• Use <nav> with aria-label for multiple navigations
• Each <section> should have a heading
• Use <address> for contact information
• Apply <time> with datetime for dates

5. When to Use <div> and <span>

<div> - Generic Container (Block)

Use when:

• No semantic element fits
• Needed for styling/layout purposes
• Grouping for JavaScript

<div class="card">
  <article>
    <h2>Article Title</h2>
    <p>Content...</p>
  </article>
</div>

<div class="grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

<div>
  <h2>About Us</h2>
  <p>Company info...</p>
</div>

<span> - Generic Container (Inline)

Use when:

• No semantic inline element fits
• Styling specific text
• JavaScript hooks

<p>Price: <span class="price">$99.99</span></p>

<button><span class="icon">🔍</span> Search</button>

<p>This is <span class="emphasis">important</span>!</p>

<p>This is <em>important</em>!</p>

6. Semantic HTML Decision Tree

Choose the right element:

Is it navigation links?
└─ YES → <nav>
└─ NO ↓

Is it main content of page?
└─ YES → <main>
└─ NO ↓

Is it self-contained content? (blog post, article, product)
└─ YES → <article>
└─ NO ↓

Is it a thematic section with heading?
└─ YES → <section>
└─ NO ↓

Is it tangentially related? (sidebar, callout)
└─ YES → <aside>
└─ NO ↓

Is it header/intro content?
└─ YES → <header>
└─ NO ↓

Is it footer/meta content?
└─ YES → <footer>
└─ NO ↓

Is it for styling/layout only?
└─ YES → <div> or <span>

7. Accessibility with ARIA

When Semantic HTML Isn't Enough

Sometimes you need ARIA (Accessible Rich Internet Applications) attributes:

<div role="navigation">
  
</div>

<div role="main">
  
</div>

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<div id="menu" hidden>
  
</div>

ARIA Best Practices

Rule #1: No ARIA is better than bad ARIA

<nav role="navigation">...</nav>

<nav>...</nav>

Rule #2: Use semantic HTML first

❌ Bad: ARIA when semantic HTML exists

<div role="button" tabindex="0">Click me</div>

✅ Good: Native button element

<button>Click me</button>

Rule 3: Support keyboard interaction

If using ARIA, add keyboard support:

<div
  role="button"
  tabindex="0"
  onclick="doSomething()"
  onkeypress="if(event.key==='Enter')doSomething()"
>
  Click me
</div>

<button onclick="doSomething()">Click me</button>

8. SEO Benefits of Semantic HTML

How Search Engines Use Semantic HTML

1. Content Hierarchy

<h1>Main Topic</h1>           
<h2>Subtopic 1</h2>            
<h3>Detail 1</h3>

2. Article Structure

<article>
  <header>
    <h1>Article Title</h1>      
    <time datetime="2024-01-05">Jan 5, 2024</time>  
  </header>
  <p>Content...</p>              
</article>

3. Rich Snippets

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">Article Title</h1>
  <time itemprop="datePublished" datetime="2024-01-05">Jan 5, 2024</time>
  <span itemprop="author">John Doe</span>
</article>

9. Practical Exercises

Exercise 2.7.1: Blog Post Structure

Create a semantic blog post page with:

1. Site header with navigation
2. Breadcrumb navigation
3. Main content area with article
4. Article header (title, author, date)
5. Multiple sections with headings
6. Sidebar with related posts
7. Site footer with links
8. Validate semantic structure

Exercise 2.7.2: E-commerce Product Page

Build a product page using semantic HTML:

1. Product article with images
2. Product details section
3. Reviews section (each review as article)
4. Related products aside
5. Proper use of time, mark, and other semantic elements
6. Accessible form for "Add to Cart"

Exercise 2.7.3: Documentation Site

Create a documentation page:

1. Header with search and navigation
2. Sidebar navigation (nav with sections)
3. Main content area with TOC
4. Multiple nested sections
5. Code examples in figure/figcaption
6. Details/summary for FAQs
7. Footer with metadata

Exercise 2.7.4: Semantic Refactoring

Take this non-semantic code and refactor it:

<div class="page">
  <div class="top">
    <div class="menu">
      <div class="item">Home</div>
      <div class="item">About</div>
    </div>
  </div>
  <div class="main">
    <div class="post">
      <div class="title">Post Title</div>
      <div class="content">Post content...</div>
    </div>
  </div>
  <div class="bottom">
    <div>© 2024</div>
  </div>
</div>

Refactor to use: header, nav, main, article, h1, p, footer, etc.

10. Knowledge Check

Question 1: What's the difference between <article> and <section>?

Question 2: Can you have multiple <main> elements on a page?

Question 3: When should you use <div> instead of semantic elements?

Question 4: What's the purpose of the <time> element's datetime attribute?

Question 5: Why use <nav> instead of just <div> for navigation?

Question 6: When should you add ARIA attributes?

11. Common Mistakes

Overusing <div> and <span>

<div class="header">
  <div class="nav">
    <div class="link">Home</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="title">Title</div>
  </div>
</div>

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
  </article>
</main>

Wrong Element for Content Type

<section>
  <p>Some text...</p>
</section>

<section>
  <h2>Section Title</h2>
  <p>Some text...</p>
</section>

Multiple <main> Elements

<main>Page 1 content</main>
<main>Page 2 content</main>

<main>Page content</main>

Redundant ARIA

<nav role="navigation">...</nav>
<button role="button">...</button>

<nav>...</nav>
<button>...</button>

12. Key Takeaways

• Use semantic elements - Prefer <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> over <div>
• Only one <main> per page - Contains unique primary content
• <article> for standalone content - Blog posts, products, comments
• <section> for thematic groups - Usually with headings
• <aside> for tangential content - Sidebars, callouts
• Each <section> needs a heading - Improves document outline
• Use <time> with datetime - Machine-readable dates
• <address> for contact info - Author/organization contact details
• Semantic HTML improves accessibility - Screen readers, SEO, maintainability
• Use ARIA only when necessary - Native semantic HTML is better

13. Semantic HTML Cheatsheet

14. Further Resources

Official Documentation:

• MDN: HTML5 Semantic Elements
• HTML Living Standard

Accessibility:

• W3C: ARIA Authoring Practices
• WebAIM: Semantic Structure

Tools:

• HTML5 Outliner
• WAVE Accessibility Checker

SEO:

• Schema.org - Structured data vocabulary
• Google Search Central

Congratulations!

You've completed Phase 2: HTML Mastery!

You now have a comprehensive understanding of:

• HTML document structure
• Text formatting and typography
• Links and navigation
• Images and media
• Tables and data presentation
• Forms and user input
• Semantic HTML5 elements

What's Next?

In Phase 3: CSS Styling, you'll learn how to style your semantic HTML with:

• CSS selectors and specificity
• Box model and layouts (Flexbox, Grid)
• Typography and colors
• Responsive design and media queries
• Animations and transitions
• CSS best practices