HTML Semantic Elements advance - HTML Complete Road Map
HTML5 introduced several new semantic elements to better
define the structure and content of a web page. These elements provide extra
meaning to the web page, making it easier for search engines to understand the
content and for assistive technologies, like screen readers, to present the
information to users with disabilities.
Here is a complete list of all the HTML5 semantic elements:
- 1. <header>: Represents a container for introductory content or a set of navigational links.
- 2. <nav>: Represents a section of a page that contains navigation links.
- 3. <main>: Represents the main content of a document, and it should be unique to the document and exclude content that is repeated across a set of documents, like site navigation, header, or footer.
- 4. <article>: Represents a self-contained composition in a document, such as a blog post, a forum post, or a news story.
- 5. <section>: Represents a standalone section of a document, such as a chapter, a tabbed content area, or a set of related content grouped together.
- 6. <aside>: Represents a section of a page that contains content tangentially related to the main content, and it can be used for sidebars, pull quotes, or advertising.
- 7. <footer>: Represents a container for the footer of a document or section.
- 8. <figure>: Represents a unit of content, optionally with a caption, that is self-contained and is typically referenced as a single unit.
- 9. <figcaption>: Represents a caption or legend for a <figure> element.
- 10. <time>: Represents a date and/or time.
- 11. <mark>: Represents a highlighted text.
- 12. <details>: Represents additional details that the user can view or hide.
- 13. <summary>: Represents a summary, caption, or legend for a <details> element.
- 14. <meter>: Represents a scalar measurement within a known range, or a fractional value; for example disk usage.
- 15. <progress>: Represents the completion progress of a task.
These elements are designed to provide additional meaning to the structure and content of a web page, making it easier for search engines and assistive technologies to understand the content and present it to users. Using these elements correctly can greatly improve the accessibility and search engine optimization of a website.