Section tag_html/css_WEB-ITnose

section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

Contrary to the non-semantic div, section is simply a div with semantics, but don’t think it’s really that simple. A section represents a topical piece of content, usually with a title. Seeing this, we may think that a blog post or a separate comment can just use section? Read on:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.” When relevant, article should be used to replace section.

So, when should section be used? Then look at:

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.”

Typical application scenarios include chapters of articles, tabs in tab dialog boxes, or numbered sections in papers. The homepage of a website can be divided into sections such as introduction, news, and contact information. In fact, I am very interested in the information conveyed here, because I feel that section and artilce to be introduced below are more suitable for modular applications. This topic will be discussed in a special article in the future, so I will skip it here for now.

Note that the W3C also warns:

“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline."

section is more than just an ordinary container tag. When a tag is just for styling or to facilitate scripting, div should be used. Generally speaking, a section is appropriate when the element's content appears explicitly in the document outline.

<article><hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p></section><section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p></section>

The difference between div section article in HTML5

The section element describes an ordinary section in a document or program. Generally speaking, a section contains A head and a content content block. A section can be represented as a subsection, or a box block under a tab on a tab page. A page can be split into multiple sections, representing introduction, news items and contact information respectively.

If the content of the element can be displayed together to express the corresponding meaning, it can be defined as an article element, and there is no need to use a section element.

The section element is not a general container element, so if an element needs to define a corresponding style or script, it is recommended to use the div element. The condition for using section is to ensure that the content of this element can be clearly displayed in the document in the outline.

The following example code comes from part of the Apple website page. The code contains 2 short sections:

As you can see, you can use the h1 element arbitrarily in the section, and There is no need to consider whether this section is a top-level, second-level or third-level element.

<article><hgroup>    <h1>Apples</h1>    <h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section>    <h1>Red Delicious</h1>    <p>These bright red apples are the most common found in many supermarkets.</p></section><section>    <h1>Granny Smith</h1>    <p>These juicy, green apples make a great filling for apple pies.</p></section></article>

The following code is a graduation ceremony page, which contains two sections, one is to display the list of people who will graduate, and the other is to display the form of the graduation ceremony.

   <!DOCTYPE Html>   <html>   <head>    <title>Graduation Ceremony Summer 2022</title>   </head>   <body>    <h1>Graduation</h1>    <section>        <h1>Ceremony</h1>        <p>Opening Procession</p>        <p>Speech by Validactorian</p>        <p>Speech by Class President</p>        <p>Presentation of Diplomas</p>        <p>Closing Speech by Headmaster</p>    </section>    <section>        <h1>Graduates</h1>        <ul>            <li>Molly Carpenter</li>            <li>Anastasia Luccio</li>            <li>Ebenezar McCoy</li>            <li>Karrin Murphy</li>            <li>Thomas Raith</li>            <li>Susan Rodriguez</li>        </ul>    </section>   </body>   </html>

Graduation Ceremony Summer 2022



Graduation

Ceremony

Opening Procession

Speech by Validatorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

Graduates


Molly Carpenter

Anastasia Luccio

Ebenezar McCoy

Karrin Murphy

Thomas Raith

Susan Rodriguez

Concise version of HTML5 study notes (2): New elements section, article, aside

The main function of section is to change the context of the heading. Through its nesting, it is mainly used to represent chapters and other directories. Structures and their dependencies.

What is the difference between section article in HTML5? How to understand header footer nav?

The HTML standard is written like this:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading .

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Note: The section element is not a generic container element. an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The free translation is as follows ([] is my annotation inside):

The

section element represents a part of the document or application. By "section," I mean an area of ​​content grouped by topic, usually with a title. [That is, each section corresponds to a different topic. Pay attention to the theme of the content itself, not to the dividing criteria set by others. 】

Examples of section include book chapters, each tab page of a multi-tab dialog box, and numbered sections of a paper. The homepage of the website may be divided into sections such as introduction, latest content, contact information, etc.

Note: Web page authors should use article instead of section elements if their content is used for syndicate. [For example, every blog on the blog homepage. Another example is the first floor, second floor, third floor...n floor of forum posts. Usually each part of this content is similar in form but independent of source. 】

Note: section is not a universal container element. If it is only used for styling or scripting, use div elements. A simple rule of thumb is to use the section element only if the element's content will be listed in the document outline.

How do you understand HTML5 sections? In what scenarios will it be used? Why do these scenarios use sections instead of divs?