Home > Article > Web Front-end > HTML5 study notes concise version (2): new elements section, article, aside
HTML5 study notes concise version (2): new elements section, article, aside
- 黄舟Original
- 2017-01-21 16:30:221865browse
section
The section element describes a common 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 section, 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 the 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:
<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>As you can see, you can use the h1 element arbitrarily in the section without considering it. This section is a top-level, second-level or third-level element.
The code below 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>article
Article represents an independent fragment of the content of a document, for example, a blog entry or a newspaper article. The content of the 23c3de37f2f9ebcb477c4a90aac6fffd tag is independent of the rest of the document.
article is a special section tag, which has clearer semantics than section. It represents an independent and complete block of related content. Generally, an article will have a title section (usually contained within the header) and sometimes a footer. Although a section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.
When article is embedded in article, in principle, the content of the inner article is related to the content of the outer article. For example, in a blog post, the article containing user-submitted comments should be hidden within the containing blog post article.
<article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>
aside
The 15221ee8cba27fc1d7a26c47a001eb9b element tag provided by HTML5 is used to represent the subsidiary information part of the current page or article, and can include references and sidebars related to the current page or main content. , advertisements, nav element groups, and other similar sections that are distinct from the main content.
According to the current specification, the 15221ee8cba27fc1d7a26c47a001eb9b element can be used in two ways:
n is included in 23c3de37f2f9ebcb477c4a90aac6fffd as ancillary information part of the main content, and the content can be Quotes, word lists, etc. related to the current article.
n Used outside of 23c3de37f2f9ebcb477c4a90aac6fffd as a global subsidiary information part of the page or site; the most typical form is the sidebar (sidebar), the content of which can be friendly links, affiliated navigation or advertisements Unit etc.
The following code example combines the above two usage methods:
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>The above is the concise version of HTML5 study notes (2): the content of the new elements section, article, and aside, more related Please pay attention to the PHP Chinese website (www.php.cn) for content!
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server