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
Opening Procession
Speech by Validatorian
Speech by Class President
Presentation of Diplomas
Closing Speech by Headmaster
Graduates
Molly Carpenter
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):
Thesection 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?

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
