New structures in html5: Introduction to html main structure and non-main structure

The content of this article is about the new structure of html5: the introduction of html main structure and non-main structure. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1 New main structure element

1.1 article element

Represents a document, page or application that is independent, complete, and can stand alone Content referenced externally. (Such as a blog or an article in a newspaper or magazine)

1.2 The section element

is used to divide the content on the page in the website or application into sections. (Such as segmenting articles)

1.3 The nav element

is a link group that can be used as page navigation. The navigation elements link to other pages or other parts of the current page.

1.4 aside element

is used to represent the subsidiary information part of the current page or article. It can include references, sidebars, advertisements, navigation bars, and related to the current page or main content. Other similar sections that are different from the main content.

2 New non-main structural elements

2.1 header element

is a structural element with guiding and navigation functions, usually used Place the title of the entire page or a content block within the page, but can also include other content, such as data tables, search forms, or related LOGO images.

2.2 The footer element

can be used as a footer for its parent content block or a root block. It usually includes footnote information about the relevant sections of the server, such as author, related reading links, copyright information, etc.

2.3 The address element

is used to present contact information in the document, including the name of the document author or document maintainer, the website link of the document author or document maintainer, email address, real address, Phone number etc.

2.4 The main element

represents the main content of the web page.

(1) The main content area refers to the content directly related to or extending the title of the web page or the main function of the page in the application. This area should be content unique to each web page and cannot include common content within the entire website such as the entire website's navigation bar, copyright information, website LOGO, public search forms, etc.

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

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

3 Use styles for new structural elements

(1) Because many browsers have not yet provided support for the new structural elements in H5, we cannot know whether the browser used by the client supports it These elements, so you need to use CSS to append the following statement. The purpose is to notify the browser that the new elements in H5 used on the page are displayed in block mode, as shown below:

//追加block声明
article，aside，dialog，figure，footer，header，legend，nav，section，main｛ display：block；｝
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }

(2) IE8 and above Earlier versions did not support using CSS to use these unsupported structural elements, and you needed to use Javascript.

//脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script>
<style>
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }
</style>

Related recommendations:

HTML5 new structural elements

What aspects should be paid attention to in the page structure of html5

The above is the detailed content of New structures in html5: Introduction to html main structure and non-main structure. For more information, please follow other related articles on the PHP Chinese website!