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

This time I will bring you what aspects of html5 page structure need to be paid attention to, what are the notes of html5 page structure, the following is a practical case, let's take a look.

Introduction to Semantic Elements

The HTML5 standard adds many new semantic elements. If divided by type, there are page structure, text content, forms, etc.

Here we mainly introduce the new elements in the page structure.

What is a semantic element

Simply speaking, a semantic element is to give a certain meaning to an element (tag), and the name of the element is the meaning that the element wants to express.

For example, means the header, and means the footer.

Features

①Easy to maintain: Using semantic elements will have clearer page structure information, making it easier to maintain the page later. No need to look at the code again: find the div and then find the specific ClassName.

②Accessibility: Conducive to reading by screen readers and other assistive tools.

③ Beneficial to search engine optimization: After checking some semantic elements of HTML5, search robots can collect information about their indexed pages.

Original interface layout

In the layout of the page, is a very common element. With a certain style, it can be applied to specific scenarios, such as header, side Sidebar, Navigation bar, etc.

In order to facilitate maintenance, designers often assign ClassName (style class name) or ID with a special name to these .

For example, a element representing a page header, its ClassName or ID can be page-header, header, etc.

Page structure semantic elements

Explanation

The semantic elements of page structure are mostly used for the overall layout of the page. Most of them are block-level elements, which are used instead of . Such as: header, footer, etc.

It has no special style, so it still needs to be used with Css.

Detailed introduction

: Define the header area of a web page or article. Can include logo, navigation, search bar, etc.

Minimum browser version: IE 9, Chrome 5

Instructions for use:

①When used to mark the header of a web page, it can include logo, navigation, and search bar and other information.

②When used to mark the title of the content, use only when the title also comes with other information. Generally, use to mark the title.

: Define the main content of the web page.

Minimum browser version: IE not supported, Chrome 35

: Define the footer area of a web page or article. Can include copyright, filing and other content.

Minimum browser version: IE 9, Chrome 5

Instructions for use:

①When used as the footer of a web page, it usually contains website copyright, legal restrictions, links, etc. .

②When used as the footer of an article, it usually contains information about the author.

: Mark the page navigation link. An area containing multiple hyperlinks .

Minimum browser version: IE 9, Chrome 5

Instructions for use:

①A page can contain multiple elements, such as page navigation and related Article recommendations, etc.

②The contact information and authentication information in the area do not need to be included in the element.

: Usually marked as an independent area in the web page.

Minimum browser version: IE 9, Chrome 5

Instructions for use:

①Can be used as an independent area in a web page, such as a section in an article.

: A complete and independent content block; it can contain independent structural elements such as and . Such as news, blog posts and other independent content (excluding comments or author profiles).

Minimum browser version: IE 9, Chrome 5

: Define content blocks outside the surrounding main content. Such as: annotation.

Minimum browser version: IE 9, Chrome 5

: represents an independent piece of content, often used in conjunction with (indicating title), and can be used in articles pictures, illustrations, tables, code snippets, and more.

Minimum browser version: IE 9, Chrome 8 : Defines the title of the element.

Minimum browser version: IE 9, Chrome 8

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!