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

Source: Internet
Author: User
Tags element groups

HTML5 learning notes simplified version (2): section of new elements, article, aside, and html5 learning notes
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>    

 

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>

 

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>     

Copyright statement: This article is the original author of the http://www.zuiniusn.com, not allowed by the blogger can not be reproduced.

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.