**Course Title:** HTML & Web Development Fundamentals: Building Modern Websites **Section Title:** Semantic HTML and Accessibility **Topic:** Common semantic elements: `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, `<aside>`. **Introduction** In the previous topic, we introduced the concept of semantic HTML, which emphasizes the importance of meaning and structure in web development. Semantic HTML provides a way to describe the purpose of different parts of a web page, making it easier for search engines, screen readers, and other tools to understand the content and structure of a website. In this topic, we'll explore some of the most common semantic elements used in modern web development, including `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, and `<aside>`. These elements help to define the structure and meaning of a web page, and are essential for creating accessible and user-friendly websites. **Header Element (`<header>`)** The `<header>` element represents the header section of a document or section. It typically contains introductory content, navigation, and other header-related information. Here's an example of how to use the `<header>` element: ```html <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> ``` **Footer Element (`<footer>`)** The `<footer>` element represents the footer section of a document or section. It typically contains information such as copyright notices, author information, and links to other sections of the website. Here's an example of how to use the `<footer>` element: ```html <footer> <p>Copyright 2023 My Website</p> <p>Designed by John Doe</p> <ul> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </footer> ``` **Article Element (`<article>`)** The `<article>` element represents a self-contained piece of content, such as a blog post, news article, or forum entry. Here's an example of how to use the `<article>` element: ```html <article> <h1>My Blog Post</h1> <p>This is the content of my blog post.</p> <footer> <p>Posted by John Doe on February 10, 2023</p> </footer> </article> ``` **Section Element (`<section>`)** The `<section>` element represents a themed section of a document or section. It typically contains a heading and one or more articles or sections. Here's an example of how to use the `<section>` element: ```html <section> <h1>News</h1> <article> <h2>My News Article</h2> <p>This is the content of my news article.</p> </article> <article> <h2>Another News Article</h2> <p>This is the content of another news article.</p> </article> </section> ``` **Navigation Element (`<nav>`)** The `<nav>` element represents a section of navigation links. Here's an example of how to use the `<nav>` element: ```html <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ``` **Aside Element (`<aside>`)** The `<aside>` element represents a piece of content that is tangentially related to the main content of a document or section. Here's an example of how to use the `<aside>` element: ```html <aside> <h2>Related Articles</h2> <ul> <li><a href="#">My Related Article</a></li> <li><a href="#">Another Related Article</a></li> </ul> </aside> ``` **Conclusion** In this topic, we've explored some of the most common semantic elements used in modern web development, including `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, and `<aside>`. These elements help to define the structure and meaning of a web page, and are essential for creating accessible and user-friendly websites. **Practical Takeaways** 1. Use the `<header>` element to define the header section of a document or section. 2. Use the `<footer>` element to define the footer section of a document or section. 3. Use the `<article>` element to represent a self-contained piece of content. 4. Use the `<section>` element to represent a themed section of a document or section. 5. Use the `<nav>` element to represent a section of navigation links. 6. Use the `<aside>` element to represent a piece of content that is tangentially related to the main content. **Additional Resources** * [W3C HTML5 Specification: Semantic Elements](https://www.w3.org/TR/html5/dom.html#semantic-elements) * [MDN Web Docs: Semantic Elements](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#Semantic_elements) **Leave a Comment/Ask for Help** If you have any questions or need help with understanding semantic HTML, please leave a comment below. I'll do my best to help you out. **Next Topic** In the next topic, we'll explore how to improve accessibility with ARIA roles and semantic tags.