Adds a principal structure element and a principal element.

Source: Internet
Author: User

Adds a principal structure element and a principal element.

1. section element: a content block in a page, such as a chapter, header, footer, or other part of the page. It can be used in combination with h1, h2, h3, h4, h5, h6, etc, mark the document structure;

It is used to block content on pages of websites or applications. A section element is usually composed of content and title. The title part is inside it. The content in the section element can be separately stored in the database or output to the Word document.

Do not use the section element as the page container for setting styles. It is the work of the div. If the article element, aside element, or nav element is more suitable for use, do not use the section element; do not use section elements for content blocks without titles.

 

2. article element: an independent content on the page that is irrelevant to the context, such as an article in a blog or an article in a newspaper;

Represents independent, complete, and externally referenced content in a document, page, or application. It can be an article in a blog or newspaper, a forum post, a user comment, an independent plug-in, or other independent content.

In addition to the content, an article element usually has its own title (usually put in a header element), and sometimes its own footer.

The article element can be nested. The content of the inner layer must be associated with the content of the outer layer in principle. For example, in a blog post, you can use the nested article element to present the comments. The article element is included in the article element that indicates the overall content.

The article element can also be used to indicate the plug-in. Its function is to make the plug-in look like it is embedded in the page.

The article element can be considered as a special section element. Sections emphasize block or segment, while article emphasizes independence. If a piece of content is relatively independent and complete, you should use article. If you want to divide the content into several sections, you should use the section element. The div element becomes a container. When using the css style, you can apply the overall css style to the container.

 

3. aside element: auxiliary information related to the content of the article element other than the content of the article element;

Used to indicate the information of the current page or article. It can contain references, sidebar, advertisements, navigation bars related to the current page or main content, and other similar parts that are different from the main content.

It is mainly used in the following ways: it is included in the article element as a subsidiary information part of the main content. It can be reference materials related to the current article, terminology, etc. It is used outside the article element, as a part of the global information of a page or site, the typical form is the sidebar, where the content can be links, other articles in the blog list, advertising units, and so on.

 

4. nav element: the navigation link of the page;

You only need to put the main and basic link groups into the nav element. A page can have multiple nav elements as a whole or different part of the navigation.

The main use cases of nav are: traditional navigation bar and side navigation bar (jump the page from the current article or current product to other articles or other product pages), In-page navigation (jump between several main components of this page), flip navigation (scroll through the front and back pages of multiple pages or previous articles of blog websites) or other basic navigation link groups that are considered important;
Do not replace the nav element with the menu element in H5. The menu element is used on a series of menus that issue commands. It is an interactive element (used in web applications ).

 

5. time element: date or time, or both;

The time element indicates a time or a date in 24 hours, indicating that the time difference is allowed. You can define dates and times in multiple formats.

Microformat: a method that uses the class attribute of HTML to add additional information to a webpage. The additional information can be the date and time when a news event occurs, the personal phone number, and the enterprise email address. A new time element is added to H5 to clearly encode the date and time of the machine without ambiguity and display it easily.

 

<Time datetime = "January 19, 2016"> </time>

<Time datetime = "January 19"> </time>
<Time datetime = "2016-1-19"> birthday </time>
<Time datetime = "2016-1-19T14: 00"> birthday two o'clock P.M. </time>
<Time datetime = "2016-1-19T14: 00Z"> birthday two o'clock P.M. </time>
<Time datetime = "2016-1-19T14: 00 + 9: 00"> Date of birth at two o'clock P.M. in the United States </time>

During encoding, the part read by the machine is in the datetime attribute, and the part in the middle of the Start mark and end mark of the element is displayed on the webpage. In the datetime attribute, the date and time are separated by "T" (time). Z indicates that the UTC standard time is used for machine encoding. The time difference is added to the last one, encode the time of another region to the machine.

The pubdate attribute is an optional and Boolean attribute. It can be used in the time element of the article element, meaning that the time element represents the article (content of the article element) or the publishing date of the entire web page.

 

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.