What are some of the new semantic elements introduced in HTML5?

On a previous tip we talked about the semantic structure of a HTML5 document.

We show how HTML5 does not rely on non-semantic elements like <div> and <span> for structure any more.

On the contrary, it has introduced some new semantic elements to web development that make code easier to read.

By using these semantic elements, developers build web pages that are cleaner, more organized, and more accessible.

Today we are going to talk in more detail about the semantic elements HTML5 has introduced to web development.

Most important elements HTML5 has introduced to improve the code structure

• header defines introductory or navigational content in a web-page or a section of a web-page.

• nav element defines a navigation section within a document.
• main element represents the primary content section of a document or application.
• section defines a segment of a document or application.
• article defines an autonomous written work within a document, like a blog post or news story.
• figure element defines a self-contained piece of content, such as illustrations, diagrams, photos or code. Self-contained means that removing it shouldn’t break the document’s flow.
• aside element defines content secondary to the main one, such as sidebars, ads, pull quotes etc.
• footer represents a footer containing details like copyright and author information.

In addition, several other semantic elements have been introduced.

This was the most important ones. In following tips, we are going to examine these in more detail.

Although my blog doesn’t support comments, feel free to reply via email or X.