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

Last Update:2013-11-22 Source: Internet

Author: User

Tags element groups

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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:

<H1> Apples

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

</Hgroup>

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

<H1> Red Delicious

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

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

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

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

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

<H1> My Blog

</Header>

<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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More