<section>

The <section> tag is used in HTML to define an autonomous section within a document.

It allows you to group contents with a common theme, thus facilitating the structuring of the page for search engines. 😉

Structure and syntax of the <section> tag

Basic structure and syntax

Here is the basic syntax of a <section> tag:

<section>
  Section content here
</section>

Usage example

Here is a typical example of using the <section> tag:

<section>
  <h2>The advantages of online learning</h2>
  <p>Online learning offers great flexibility for students.</p>
</section>

In this example, the <section> tag is used to group a title and a paragraph with the theme of online learning.

Attributes

The <section> tag accepts classic HTML attributes such as:

• class: to apply CSS styles.
• id: to identify a unique container.
• style: to apply inline styles.

Best practices

Use the <section> tag to structure parts of the content with a particular theme or subject. This makes the content more understandable, both for users and for search engines.

Also, avoid using <section> for elements that are not independent sections, such as navigation elements or page headers. In these cases, it is preferable to use tags like <header> or <nav>.

Difference with other similar tags

• <article>: The <article> tag is used to mark an autonomous content, but unlike <section>, it represents an independent element that could be redistributed, such as a publication or a blog article.
• <aside>: The <aside> tag is used to mark secondary content, often related to the main content, but not an integral part of it. Unlike <section>, <aside> is not intended to group contents with a specific theme.

Browser compatibility

The <section> tag is supported by all modern browsers.