HTML5 semantic elements (I) Page Structure, html5 Semantics

HTML5 semantic elements (I) Page Structure, html5 Semantics

This article describes the Page Structure in the semantic elements added to HTML5, including: <article>, <aside>, <figure>, <figcaption>, <footer>,

 

Directory

1. Introduction to semantic elements

1.1 What is a semantic Element

Features 1.2

2. Original interface Layout

3. semantic elements of the Page Structure

3.1 Description

3.2 details

3.3 example

 

1. Introduction to semantic elements

The HTML5 standard adds many new semantic elements. If they are differentiated by type, there are page structures, text content, and forms.

Here we mainly introduce new elements in the page structure.

1.1 What is semantic Element

To put it simply, a semantic element is to assign a meaning to an element (TAG), and the element name is the meaning to be expressed by the element.

For example,

 

Features 1.2

① Easy to maintain: semantic elements will provide clearer page structure information and facilitate subsequent page maintenance. No need to check the code: Find the div and find the specific ClassName.

② Accessibility: it helps screen readers and other auxiliary tools read.

③ Conducive to search engine optimization: Search robots can collect information on their index pages after checking some HTML5 semantic elements.

 

2. Original interface Layout

In the page layout, <div> is a very common element. With a certain style, it can be applied to specific scenarios, such as headers, sidebar, and navigation bar.

For ease of maintenance, designers often assign ClassName (Style Class Name) or ID with special names to these <div> values.

For example, a <div> element indicating a header, whose ClassName or ID can be page-header or header.

Example:

 

 

3. Page Structure semantic Element 3.1 Description

The semantic elements of the page structure are mostly used for the overall layout of the page. Most of them are block-level elements, which are used instead of <div>, such as headers and footers.

However, it does not have a special style, but it still needs to be used with Css.

3.2 details

<Header>: Defines the header area of a webpage or article. It can contain logo, navigation, and search items. <Details>

Minimum browser versions: IE 9 and Chrome 5

Instructions for use: ① when used to mark the page header, it can contain information such as logo, navigation, and search entries. ② When the title is used to mark the content, you can use <Main>: Define the subject content on the webpage. <Details>

The lowest version of the browser: not supported by IE, Chrome 35

<Footer>: Defines the ending area of a webpage or article. It can contain copyright, record filing, and other content. <Details>

Minimum browser versions: IE 9 and Chrome 5

Instructions for use: ① when serving as the footer of a webpage, it usually contains website copyright, legal restrictions and links. ② When serving as the footer of an article, it usually contains the relevant information of the author.Instructions for use

<Nav>: Annotation page navigation link. A region that contains multiple hyperlinks. <Details>

Minimum browser versions: IE 9 and Chrome 5

Instructions for use: ① a page can contain multiple <nav> elements, such as page navigation and related article recommendations. ② The contact information and authentication information in the <footer> area do not need to be included in the <nav> element.Instructions for use

<Section>: It is usually marked as an independent area in a webpage. <Details>

Minimum browser versions: IE 9 and Chrome 5

Instructions for use: ① It can be used as an independent area on the webpage, as shown in a section in the article.Instructions for use

<Article>: Complete and independent content blocks. They can contain independent

Minimum browser versions: IE 9 and Chrome 5

<Aside>: Defines content blocks other than the surrounding primary content. For example, annotation. <Details>

Minimum browser versions: IE 9 and Chrome 5

<Figure>: Indicates a piece of independent content. It is often used with <figcaption> (title) and can be used for pictures, illustrations, tables, code segments, and so on in an article. <Details>

Minimum browser versions: IE 9 and Chrome 8

<Figcaption>: Defines the title of the <figure> element. <Details>

Minimum browser versions: IE 9 and Chrome 8

 

3.3 example

 

====================================== Series of articles ==============================================

This article: 6.2 HTML5 semantic elements (I) Page Structure

Web development path Series