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.
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |