In HTML, if you need to divide a theme area for a set of content, such as an introduction, a sidebar, or a standalone module, using <section></section> elements is the most common and semantic way.
What is <section></section> ?
The <section></section> tag represents a "topic block" in the document, usually with a title. It is used to organize relevant content together to help browsers and auxiliary devices better understand page structure.
For example, several parts of an article can be wrapped in multiple <section></section> separately:
<section> <h2>Introduction</h2> <p>This is the first part of the article. </p> </section> <section> <h2>Text</h2> <p>This is the main content of the article. </p> </section>
This writing is not only clear in structure, but also conducive to SEO and barrier-free access.
Best practices for using <section>
- Use with titles : Each
<section>is preferably containing a title (such as<h1>to<h6>), which helps clarify the topic. - Don't abuse : If it is only used for layout or style purposes, use
<div>instead of<section>to avoid semantic confusion. - Reasonable use of nesting : You can divide small
<section>into a large<section>, but be careful not to have too deep levels.
Which scenarios are suitable for <section> ?
- The main content area on the page (such as different sections of the homepage)
- Different chapters of the article
- A set of related links or information blocks in the sidebar
- Functional modules in single page applications
For example, a blog homepage may have the following structure:
<section class="featured-posts"> <h2>Recommended Articles</h2> <!-- Recommended article list--> </section> <section class="recent-posts"> <h2>Latest News</h2> <!-- Latest Posts--> </section>
The difference between <article></article> and <div>
-
<section></section> is a "thematic" content block that emphasizes the overall theme.
-
<article></article> means a complete and independently published content, such as a blog or a news article.
-
<div> has no semantic meaning and is only used for style or script operations. so:
- If you have a piece of content that can be put out separately and placed on another website, then use
<article></article> ;
- If you are organizing content under a topic, use
<section></section> ;
- Only when it is used to wrap elements without semantic requirements,
<div> is considered. Basically that's it. Use <section></section> reasonably to make your HTML clearer and easier to maintain.
-
<section></section>is a "thematic" content block that emphasizes the overall theme. -
<article></article>means a complete and independently published content, such as a blog or a news article. -
<div> has no semantic meaning and is only used for style or script operations.so:
- If you have a piece of content that can be put out separately and placed on another website, then use
<article></article>; - If you are organizing content under a topic, use
<section></section>; - Only when it is used to wrap elements without semantic requirements,
<div> is considered.Basically that's it. Use
<section></section>reasonably to make your HTML clearer and easier to maintain.
- If you have a piece of content that can be put out separately and placed on another website, then use
