HTML5 learning notes simplified version (2): section, article, and aside of new elements

Source: Internet
Author: User
Tags element groups

 

Section

The section element depicts a common section in a document or program. Generally, a section contains a head and a content block. A section can be expressed as a section or a box block under a tab on the tab page. A page can be split into multiple sections, representing introduction, news items, and contact information respectively.

If the content of an element is displayed together, it can be defined as an article element without the use of a section element.

The section element is not a general container element. Therefore, if an element needs to define a style or script, we recommend that you use the div element, section is used to ensure that the content of this element is clearly displayed in the outline of the document.

The following sample code is from a part of the apple website page. The Code contains two short sections:

<Article>

<Hgroup>

<H1> Apples

<H2> Tasty, delicious fruit! </H2>

</Hgroup>

<P> The apple is the pomaceous fruit of the apple tree. </p>

<Section>

<H1> Red Delicious

<P> These bright red apples are the most common found in each supermarkets. </p>

</Section>

<Section>

<H1> Granny Smith

<P> These juicy, green apples make a great filling for apple pies. </p>

</Section>

</Article>

 

 

As you can see, you can use any h1 element in a section, instead of considering whether this section is a top-level, second-level, or third-level element.

The following code is a graduation ceremony page with two sections. One is to display the list of persons to be graduated, and the other is to display the graduation ceremony.

<! DOCTYPE Html>

<Html>

<Head>

<Title> Graduation Ceremony Summer 2022 </title>

</Head>

<Body>

<H1> Graduation

<Section>

<H1> Ceremony

<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

<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 part of the document content, such as a blog entry or newspaper article. The content of the <article> label is independent of the rest of the document.

Article is a special section label. It has more explicit semantics than section. It represents an independent and complete related content block. In general, article includes the title part (usually included in the header) and sometimes footer. Although section is also a topic content, in terms of structure and content, article itself is independent and complete.

When articles are embedded with articles, in principle, the content of internal articles is related to the content of outer articles. For example, in a blog post, articles containing comments submitted by users should be included in articles containing blogs.

<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 <aside> element tag provided by HTML5 is used to indicate the information that is attached to the current page or article. It can contain references, sidebar, advertisement, and nav element groups related to the current page or main content, and other similar content.

According to the current specification, the <aside> element can be used in two ways:

N is included in <article> as the ancillary information of the main content. The content of n can be references related to the current article and vocabulary list.

N is used outside of <article> as a part of the global information of the page or site. The most typical form is the sidebar (sidebar ), the content can be links, affiliated navigation, or advertisement units.

The following sample code combines the above two methods:

<Body>

<Header>

<H1> My Blog

</Header>

<Article>

<H1> My Blog Post

<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

 

Shoshould understand that the content of this aside is directly related

Www.2cto.com

To the article itself. -->

<H1> Glossary

<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

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

 


 

Uncle Tom

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.