Shulou(Shulou.com)06/03 Report--

This article is about what you need to pay attention to in the page structure of html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Introduction of semantic elements

Many new semantic elements are added to the HTML5 standard, such as page structure, text content, form, and so on.

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

What is a semantic element?

To put it simply, a semantic element is to give a certain meaning to an element (tag), and the name of the element is what the element is trying to express.

Such as headers and footers.

Characteristics

① is easy to maintain: the use of semantic elements will have clearer page structure information and facilitate subsequent maintenance of the page. You don't need to look at the code: find the div and then find the specific ClassName.

② accessibility: facilitates the reading of screen readers and other aids.

③ is good for 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, it is a very common element, with a certain style can be applied to specific scenes, such as headers, sidebars, navigation bars, and so on.

For ease of maintenance, designers often assign these ClassName (style class names) or ID with special names.

For example, an element that represents a header whose ClassName or ID can be page-header, header, and so on.

Page structure semantic elements

Description

The semantic elements of the page structure are mostly used in the overall layout of the page, most of them are block-level elements, but instead of using them, such as headers, footers, and so on.

There is no special style of its own, 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, and so on.

Minimum browser version: IE 9, Chrome 5

Instructions for use:

When used to mark the header of a web page, ① can contain information such as logo, navigation, search bar, and so on.

When ② is used to label the title of content, it is considered only when the title is accompanied by other information. In general, you can use the title.

Defines the body content in a web page

Minimum browser version: not supported by IE, Chrome 35

Define the tail area of a web page or article May include copyright, filing and other content.

Minimum browser version: IE 9, Chrome 5

Instructions for use:

When ① is used as the footer of a web page, it usually includes website copyright, legal restrictions, links and so on.

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

Annotate the page navigation link An area that contains 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.

Contact information and authentication information in the ② area do not have to be included in the element.

It is usually marked as a separate area of a web page

Minimum browser version: IE 9, Chrome 5

Instructions for use:

① can be used as a separate area of a web page, such as a section of an article.

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

Minimum browser version: IE 9, Chrome 5

Define blocks of content other than the surrounding main content Such as: notes.

Minimum browser version: IE 9, Chrome 5

Represents a separate piece of content, often used in conjunction with (representing the title), and can be used for pictures, illustrations, tables, code snippets, and so on.

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

Minimum browser version: IE 9, Chrome 8

Thank you for reading! This is the end of this article on "what do you need to pay attention to in the page structure in html5"? I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.