First explain the meaning of the following HTML5 Section label:
The HTML5 section tag defines the sections in the document (the segments, sections). such as chapters, headers, footers, or other parts of the document.
See an example that gives you a better understanding of section Tags:
The section in the document explains the PRC:
<section>Instance effects such as:
Now let's talk about the note points of the section tag:
Section is not a dedicated label for containers, if only for styling or scripting, dedicated Div
The section should have a title (h1~6), but the article recommends using article instead
A simple guideline is that only the element content is listed in the document outline when it is appropriate to use the section element.
The role of section is to block the content on the page, such as the sections with headings, the functional area, or the segmentation of the article, not to confuse the article with its own complete, independent content.
HTML5 Section label usage:
HTML5 introduced the <section> tag to describe the structure of the document, which is the same as the <div> tag. But in a particular environment, there is a clear difference between the two.
W3 defines <section> as a chapter that defines a document (which can have its own
W3 defines <div> as a chapter that defines a document. (but it seems more appropriate for the layout of the outer layer, lacking semantics.) ）
Now look at a case:
<body>Here, we use <section> to define two chapters/regions within the DIV with the ID content. Of course, here you can also direct div with a section instead, or the inside of the <section> into <div>, because there is no obvious difference between the two:
<section id= "Content" > <section></section> <section></section></ Section>Or:
<div id= "Content" > <div></div> <div></div></div>Summary of HTML5 section tags:
We use the <div> tag to lay out the entire outermost chapter, and use <section> to define the internal chapters. Of course, if the entire document is considered a chapter, then you can also use <section> to replace <div>, but it is not recommended to use <section> instead of the <div> layout of the place, those places do not reflect The semantic nature of <section>.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
