Overview
With the evolution of HTML5, a set of new semantic elements was introduced to provide clearer meaning about the content they contain. This lesson will explore these powerful tags, such as header, nav, main, article, section, aside, and footer. Using semantic HTML is crucial for improving accessibility, search engine optimization (SEO), and maintainability of your web pages, moving beyond generic <div> elements for structure.
Key Points
-
What is Semantic HTML?: Semantic HTML uses elements that explicitly describe their meaning to both the browser and the developer, rather than just how they should appear.
-
header: Represents introductory content, often containing navigation, logos, and heading elements for a section or the entire page. -
nav: Used for navigation links, typically found within theheaderorfooterbut can exist independently. -
main: Represents the dominant content of the<body>of a document. There should only be onemainelement per page. -
article: Encloses independent, self-contained content, like a blog post, news story, or forum comment. -
section: Groups related content. It's a thematic grouping of content, typically with a heading. It's less independent than anarticle. -
aside: Contains content related to the surrounding content, but which could be considered separate, such as sidebars or pull quotes. -
footer: Contains information about its containing element, often including copyright, author information, or related links. -
divandspan: While semantic elements are preferred,<div>(block-level) and<span>(inline) remain useful for styling purposes when no semantic element fits.
Quick Example
Structuring a simple blog post layout with semantic tags:
html<body> <header> <h1>My Blog</h1> <nav> <a href="#">Home</a> | <a href="#">About</a> </nav> </header> <main> <article> <h2>First Post Title</h2> <p>Content of the first post...</p> <aside>Related articles:</aside> </article> </main> <footer> <p>© 2023 My Blog</p> </footer> </body>
Summary
This lesson highlighted the importance and practical application of HTML5 semantic elements. By utilizing tags like header, nav, main, article, section, aside, and footer, you can create web pages that are not only structurally sound but also more accessible, discoverable by search engines, and easier for other developers to understand. This practice leads to more robust and maintainable web development.