HTML5 Semantics

HTML5 semantic elements provide meaningful tags that clearly describe their purpose, improving readability, accessibility, and SEO for both humans and browsers.

• Clearly define the role and content of elements.
• Improve code readability and structure.
• Enhance accessibility for screen readers.
• Help browsers and search engines understand page content.
• Examples include <form>, <table>, <article>, <header>, and <footer>.

Semantic Elements

Here are some of the fundamental HTML5 semantic elements that you should use to structure your web content:

1. The <article> Tag

The <article> tag is used for content that stands alone and can be independently distributed or reused, such as a blog post or news article.

2. The <aside> Tag

The <aside> is used to place content in a sidebar i.e. aside from the existing content. It is related to surrounding content.

3. The Details and Summary Tag

The "details" defines additional details that the user can hide or view. "summary" defines a visible heading for a "details" element.

4. The Figure and Figcaption Tag

The <figure> and <figcaption> tags are used together in HTML to display an image (or illustration) with a descriptive caption.

Output:

5. The Header Tag

As the name suggests, it is for the header of a section introductory of a page. There can be multiple headers on a page.  

6. The Footer Tag

Footer located at the bottom of any article or document, they can contain contact details, copyright information etc. There can be multiple footers on a page. 

7. The Main Tag

It defines the main content of the document. The content inside the main tag should be unique. 

8. The Section Tag

A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.

9. The nav Tag

The nav tag is used to define a set of navigation links in the form of a navigation bar or nav menu.

10. The Mark Tag

Mark tag is used to highlight the text.

Best Practices for Using HTML5 Semantic Elements

• Do not overuse <div>: Use semantic elements where appropriate instead of non-semantic <div> elements to provide more specific information about the content.
• Structure content logically: Organize the content within semantic elements to reflect the meaning and importance of the information.
• Validate your HTML: Use tools like the W3C HTML Validator to ensure that your use of semantic elements adheres to HTML5 standards.