Section 6: HTML Semantic Elements

Lesson 1: Understanding Semantic HTML

Semantic HTML involves using tags that convey the meaning and structure of the content they enclose. This lesson covers various semantic tags, such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.

1.1 Semantic Tags Overview

Semantic tags provide a clearer structure to your HTML document and improve its readability for both developers and assistive technologies.

• <header>: Represents the header of a section or a page.

• <nav>: Defines a navigation bar or menu.

• <main>: Contains the main content of the document.

• <article>: Represents a self-contained piece of content.

• <section>: Represents a thematic grouping of content.

• <aside>: Contains content that is tangentially related to the content around it.

• <footer>: Represents the footer of a section or a page.

Lesson 2: Improving Accessibility and SEO with Semantic Elements

Semantic HTML not only improves the structure of your document but also enhances accessibility and search engine optimization (SEO).

2.1 Accessibility Benefits

By using semantic elements, you provide additional information to assistive technologies, making your content more accessible to users with disabilities.

<header>

    <h1>Website Title</h1>

    <p>Subtitle or Slogan</p>

</header>

2.2 SEO Benefits

Search engines use semantic HTML to better understand the structure and context of your content, which can positively impact your website's search rankings.

<article>

    <h2>Blog Post Title</h2>

    <p>Author: John Doe</p>

    <!-- Blog post content goes here -->

</article>

By incorporating semantic tags appropriately, you contribute to a more inclusive and SEO-friendly web.

Experiment with semantic HTML elements in your documents to enhance the overall structure, accessibility, and search engine visibility of your web content.