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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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



HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

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

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

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 <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

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
