# HTML5 Semantics

Last Updated : 8 Nov, 2025

– – –
HTML5 introduced a range of semantic elements that clearly describe their purpose in human and machine-readable language. Unlike non-semantic elements, which provide no information about their content, semantic elements clearly define their content.

For instance,

, and

tags clearly define the content and purpose, to the browser…. ## Semantic Elements

Here are some of the fundamental HTML5 semantic elements that you should use to structure your web content:… ## 1. The

Tag

The

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

Article Tag

GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought, and well explained computer science and programming articles, quizzes, and practice/competitive programming/company interview questions.

“`… ## 2. The

Tag

The

is used to place content in a sidebar i.e. aside from the existing content. It is related to surrounding content…. “`

Aside Tag

GeeksforGeeks is a Computer Science Portal

“`… ## 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…. “`

Detail and summary Tag

GeeksforGeeks

GeeksforGeeks is a Computer Science portal
where you can learn good programming.

“`… “`

Figcaption Tag

GeeksforGeeks

GeeksforGeeks Logo

“`

**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…. “`

Header Tag

GeeksforGeeks

A computer Science portal

“`… ## 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…. “`

footer Tag

“`… ## 7. The Main Tag

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

main Tag

…

It is the home of
the President of India.

The White House

It is the home of the
President of United
States of America.

“`… ## 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…. “`

section Tag

…

Data Structure

Data Structure is a data
organization and storage
format that enables efficient
access and modification.

Algorithm

A process or set of rules to
be followed in calculations
or other problem-solving
operations, especially by
a computer.

“`… “`

nav Tag

Navigation Bar

“`… ## 10. The Mark Tag

Mark tag is used to highlight the text.

“`

mark Tag

mark tag

GeeksforGeeks is a
Computer Science
portal

“`… ## Best Practices for Using HTML5 Semantic Elements
– **Do not overuse

: **Use semantic elements where appropriate instead of non-semantic

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…. ### Explore

– HTML Basics**
– HTML Introduction**4 min read
– HTML Editors**4 min read
– HTML Basics**7 min read
– Structure & Elements**
– HTML Elements**4 min read
– HTML Attributes**7 min read
– HTML Headings**3 min read
– HTML Paragraphs**3 min read
– HTML Text Formatting**4 min read
– HTML Block and Inline Elements**3 min read
– HTML Charsets**4 min read

GeeksforGeeks

The White House

Data Structure

Algorithm

Navigation Bar

mark tag

Must Read

Leave a Comment Cancel Reply