Detailed explanation of new tags and common tags in HTML5_html5 tutorial skills

Today I will first introduce the new structural elements of HTML5. Some are often used, and some are not used. Although their appearance makes the page more semantic and better for SEO, in fact, when the page disables styles Finally, their presentation is no different from that of divs. Some students may say that since they are the same and it does not affect the final presentation of the page, it would be fine if both article and section can be used. If you consider the actual project for users, I think so too, but as a refactorer, we still have to be more professional, and then consider accessibility, then the role of html5 tags will be more obvious. So I reviewed the content and recorded it on my blog, sharing it with everyone so that I can find it later.

HTML5 new structural elements are divided into main structural elements and non-main structural elements

1. Main structural elements include article, section, nav, aside, time
2. Non-main structural elements include header, hgroup, footer, address
1. Main structural elements
article
article tag, semantically speaking, is a document or page. Its usage is as follows:

Usually an article, a page, an independent and complete content module
It usually has a title and is placed in the header tag
Article elements can be nested in each other
It is used very frequently. Emphasize independence and pay more attention to the use of header tags.

Copy code

The code is as follows:

< header>

I am a tag

I am a paragraph

My content

section
section tag, Semantically speaking, it is a part, and its usage is as follows:

Used for independent division of page content, often a section of an article
Usually consists of content and title. Content without title is not recommended. Section
is used infrequently and emphasizes segmentation and chunking.

Note: The book "The Definitive Guide to HTML5 and CSS3" states: When a container needs to be styled or a script defines behavior, it is recommended to use div instead of section. Do not use section as a container to set styles.

Copy code

The code is as follows:

< h1>Fruits

Apples

Are apples sprinkled?

orange

Who is Jack Ma

Jack Ma, male, was born on October 15, 1964 in Hangzhou, Zhejiang Province , a famous Chinese entrepreneur, founder of Alibaba Group, Taobao, and Alipay......

References

Baidu, Wikipedia...

• Lao Zhao's blog


• Gui Ge's blog


• Uncle Biao's blog

< ;/aside>

time
time tag, semantically speaking, is time. Its usage is as follows:

Represents a certain moment in 24 hours or a certain date
Allows a time difference when representing a moment
Can define dates and times in many formats
Infrequently used.

Copy code

The code is as follows:

March 6, 2014

March 6, 2014 20:00

March 6, 2014 20:00

2. Non-subject Structural element
header
header tag, semantically speaking, is the header of the document. Its usage is as follows:

A structural element with guidance and navigation functions
Usually placed on the entire page or the title of a content block within the page
There is no limit to the number of header tags in a web page
Frequency of use Extremely high and relatively easy to understand.

Copy code

The code is as follows:

< h1>I am the big head

I am the neck

I am the body

hgroup
hgroup tag, Semantically speaking, it is a title group, and its usage is as follows:

As a child element of the header tag
Use hgroup only when a content module includes the main title and at least one subtitle
Usually group h1~h6 elements
Highly used.

Copy code

The code is as follows:

< header>

I am Liu Bei

I am Guan Yu

I am Zhang Fei

Lu Bu was stunned

footer
footer tag, semantically speaking, is the footnote of the document. Its usage is as follows:

Footnotes in a content block area
Usually the content is contact information, related reading, copyright information, etc.
It is used frequently and is relatively easy to understand.

Copy code

The code is as follows:

< p>Lu Bu was stunned

• About the Three Kingdoms


• Map information< /li>
  
• Game Guide

address
address tag, semantically speaking, is an address. Its usage is as follows:

Used for contact information presented in documents
Usually the content is the author, website link, email address, address, phone number, etc.
Used infrequently.

Copy code

The code is as follows:

< a href="">Author: Zhang Sanfeng
Address: Wudang Mountain
Contact information ：1247

I hope this article can provide some guidance for everyone in the use of html5 structure tags. If you find any errors in the content, you are welcome to correct me~