Semantic HTML: Why It Matters

Pre-Work

As you watch the video above you may reference the following resources**:**

🎶 Essential HTML Elements Documentation:

• 🔗 Heading Elements - The six levels of section headings for structuring your content hierarchy
• 🔗 Line Break - When and why you should (rarely) use line breaks
• 🔗 Contact Address - Semantic element for contact information
• 🔗 Content Division - The generic container element and when to use it
• 🔗 Content Span - Inline generic container for styling hooks
• 🔗 Navigation Section - Semantic element for navigation links
• 🔗 Generic Section - Thematic groupings of content
• 🔗 Main Content - The primary content area of your document
• 🔗 Header Element - Introductory content and navigation aids
• 🔗 Footer Element - Footer information for sections or pages
• 🔗 Aside Element - Content tangentially related to the main content
• 🔗 Bring Attention To - Stylistically offset text without extra importance
• 🔗 Strong Importance - Text with strong importance or urgency
• 🔗 Article Contents - Self-contained, distributable content
• 🔗 Emphasis - Stressed emphasis in text
• 🔗 Idiomatic Text - Text in an alternate voice or mood

🎶 These references will help you understand the semantic meaning and proper usage of each element as you learn to write more meaningful HTML!

Introduction

• Icebreaker: Have you ever used a heading tag just to make text bigger? Or stacked a bunch of <br> tags to add space?
• Real-world scenario: Imagine a visually impaired user navigating your site with a screen reader. Semantic HTML makes their experience possible—and better for everyone.
• Lesson objectives:
  • Understand what semantic HTML is and why it matters
  • Identify common mistakes and how to avoid them
  • Practice writing clean, accessible HTML
• Introduction to the concept:
  • Semantic HTML uses tags that describe their meaning and role in the document (e.g., <header>, <nav>, <main>, <section>, <article>, <footer>).
  • This helps browsers, search engines, and assistive technologies understand your content.

Core Concept Overview

• Key terms: semantic, accessibility, landmark elements, structure
• Analogy: Think of semantic HTML as labeling rooms in a house—"kitchen," "bedroom," "bathroom"—so everyone knows what each space is for.
• Common mistakes:
  • Using headings for size, not structure (multiple <h1>, skipping levels)
  • Using <br> for spacing
  • Overusing <div> and <span> instead of semantic tags
  • Not using <label> for form fields
  • Missing alt on images
  • Using <table> for layout
  • Not using lists for list content
• Conceptual quiz:
  1. What is semantic HTML?
  2. Why is it important for accessibility?
  3. Which tag would you use for navigation links?
  4. What’s wrong with using <br> for spacing?
  5. Why should you avoid multiple <h1> tags?

Hands-On Application

• Example:

  <!-- Bad -->
  <div>
    <h1>About Us</h1>
    <br /><br />
    <div>We are awesome!</div>
  </div>
  <!-- Good -->
  <main>
    <header><h1>About Us</h1></header>
    <section><p>We are awesome!</p></section>
  </main>
  

Troubleshooting & Best Practices

• Common challenges:
  • Unsure which tag to use? Check MDN’s HTML element reference
  • Don’t use headings for size—use CSS!
  • Always use one <h1> per page
• Best practices:
  • Use semantic tags for structure
  • Use CSS for presentation
  • Test with a screen reader or accessibility tool
• Enhancement:
  • Try using ARIA roles only if you can’t use a semantic tag

Wrap-Up & Assessment

• Key takeaways:

  • Semantic HTML is about meaning, not just appearance
  • It’s essential for accessibility and maintainability

• Advanced quiz:

  1. What’s the difference between <section> and <article>?
  2. Why is <nav> important?
  3. How does semantic HTML help SEO?
  4. What’s wrong with using <table> for layout?
  5. How do you make a form accessible?
  6. What’s the role of <main>?
  7. Why avoid multiple <h1> tags?
  8. When should you use <aside>?
  9. What’s the best way to add space between elements?
  10. How do you label a button for screen readers?

  For the quiz, provide answers and explanations after the questions, with adequate reflection in well-formatted MD. How much of this information ℹ️ was new to you? How well did the pre-req course prepare you for this?

  What did you learn from the video and/or is there anything that you found and explored on Mozilla's Developer Network (MDN) that you found particularly helpful?

• Hands-on assessment / Homework:

  • Create any web page you like (a personal homepage, a favorite recipe, a blog post, etc.) using only semantic HTML. Do not add any styles yet! Focus on using the correct tags for structure and meaning.
  • Just use GitHub Gist for this. You can even copy/paste some stuff that you have already done, but make sure to update it to be semantic, using various tags that we have discussed in this lesson.
  • Share your Gist link in our class Teams channel.