Understanding HTML5 semantic elements

Through our SEO Agency Optimize 360

HTML5 Semantic Elements


The HTML5 semantic elements are used to reinforce the meaning of the information contained in the tiles on your web page.

These tags not only make it easier for users to read, but also for search engines to index and rank your content more effectively.

In this article, we'll explain what HTML5 semantic elements are and how they improve the quality of your code.

HTML5 Semantic Elements

What are HTML semantics?

Semantics is a branch of linguistics that studies the meaning of words and phrases. In web programming, semantics refers to the use of a clear and comprehensible mark-up structure to describe the content of a document. A code HTML semantics allows you to differentiate between the different parts of the page: header, footer, main sections, etc., and to assign a specific role to each part.

What are the advantages of HTML5 semantic elements?

There are several advantages to using semantic elements:

  • Improved referencing : Search engines can better interpret and index the content of a page if it is well structured with semantic tags. This optimises the natural referencing (SEO) of your site.
  • Accessibility : Semantic tags are essential for making your content accessible to visually impaired people or people with other disabilities who use assistive technologies to navigate the web.
  • Maintenance made easy : Well-structured code with semantic elements is easier to read and maintain. This facilitates collaboration between developers and reduces coding errors.
  • Versatility : Semantic elements can be used in a variety of platforms, such as mobile applications or sites designed for mobile devices.

What are the main HTML5 semantic elements?

HTML5 semantic elements are used to clearly describe the content of a document and include :

The header (
)

The

tag is used to represent the header of a section or page. It generally contains a logo, a title, main navigation and possibly a subtitle. This tag is not intended to be used to group together several titles or links.

The footer (
)

The

tag is used to represent the footer of a section or page. It generally contains information such as contact details, legal notices, useful links, share buttons, etc.

Sections (
)

The <section> tag is used to delimit a thematic section of the content. Each section must contain a title (tag <h1> à <h6>) which precisely describes its content.

Articles (
)

The

tag is used to describe the main content of a page or in a standalone frame.

Navigations (

The

blank Digital Performance Accelerator for SMEs

ContactAppointments

en_GBEN