HTML5 new structure: Introduction to HTML body structure and non-body structure

This article brings the content is about HTML5 new structure: HTML main structure and non-main structure of the introduction, there is a certain reference value, the need for friends can refer to, I hope to help you.

1 new body structure elements

1.1 Article elements

Represents a separate, complete, externally referenced content in a document, page, or application. (such as an article in a blog or in the newspapers and magazines)

1.2 section Element

Used to block content on a page in a Web site or application. (for example, for article segmentation)

1.3 Nav Elements

is a group of links that can be used as a page navigation where navigation elements are linked to other pages or to other parts of the current page.

1.4 aside elements

Used to represent the subsidiary information portion of the current page or article, which can contain references to the current page or main content, sidebar, ads, navigation bars, and other similar sections that are different from the main content.

2 new non-principal structure elements

2.1 Header Element

is a guided and navigational structure element, usually used to place the title of an entire page or a chunk of content within a page, but can also contain other content, such as a data table, a search form, or a related logo image.

2.2 Footer Elements

Can be used as a footnote to its upper-level parent content block or to a root chunk. Usually includes footnote information about the relevant block of the device, such as author, related reading link and copyright information.

2.3 Address Element

Used to present contact information in a document, including the name of the document author or document maintainer, the site link of the author or document maintainer, the email address, the phone number, and so on.

2.4 Main Element

Represents the primary content in a Web page.

(1) The main content area refers to content that is directly related to or extends the main features of the page in the page title or application. The area should be specific to each page, not including the entire site navigation bar, copyright information, website logo, public search form and other common content within the entire site.

(2) Only one main element can be placed inside each page.

(3) The main element cannot be placed inside any article, aside, footer, header, or nav elements.

3 Using styles for new structural elements

(1) Since many browsers have not yet provided support for the new structure elements in H5, we cannot know whether the browsers used by the client support these elements, so we need to use CSS to append the following declaration, in order to inform the browser page that the new elements in the H5 are displayed in blocks, as follows:

Append block declaration article,aside,dialog,figure,footer,header,legend,nav,section,main{display:block;}//Normal use style nav {  Float:left; width:20%}article {float:right; width:79%}

(2) IE8 and earlier versions do not support the use of CSS-enabled methods to use these unsupported structural elements, which require JavaScript scripting.

//script to create the element <script>document.createelement ("header"); Document.createelement ("Nav");d ocument.createelement ("article");d ocument.createelement ("footer"); Document.createelement ("main"); </script><style>//normal use style nav {float:left; width:20%}article {float: right; width:79%}</style>