HTML5 study notes concise version (2): new elements section, article, aside-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 study notes concise version (2): new elements section, article, aside

黄舟

Jan 21, 2017 pm 04:30 PM

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>

Copy after login

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>

Copy after login

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

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>

Copy after login

aside

The

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

element can be used in two ways:

n is included in

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

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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn