H5 new elements

H5 new element

1.article element (tag)

　 Used to define an independent content block, such as an article, a blog, etc.

　Other elements can be nested within the article element. It can have its own head, tail, body and other content. When using it, special attention should be paid to the independence of the content. Generally, the article element is only used for independent and complete content. If it is just a piece of content, it should be Use the section element.

2. Section element

Used to define chapters in an article (usually should have titles and paragraph content)

Used to define specific content blocks in the document, which can be regarded as a regional grouping element, used to add content on the page content chunks.

　The section element can define the main content of the document

　To sum up in one sentence, its function is to segment the content and partition the page

　Pay attention to the difference between it and div. div emphasizes independence in form, while section emphasizes It is content independent, pay attention to its semantics.

3. The difference between article element and section element

Different semantics

The article element emphasizes the independence of the content

The section element emphasizes the relevance of the content

The article element is independent and complete content, while the section element page content is divided into Block

　 Similarity

　　They are essentially div block elements with semantics

　　Can be seen as

and

respectively

4. aside element

　 The aside element is usually used to set up the sidebar

Used to define article Content outside the element, provided that the content is related to the content within the article element

At the same time, it can also be used nested inside the article element as ancillary information to the main content, such as content-related reference materials, noun explanations, etc.

5.nav element

Used to define directories, navigation bars, and hyperlinks

Not all hyperlinks are placed in nav elements. Usually only the main navigation bar in a document is placed in nav

In article pages , nav can also be used to make a directory hyperlink for a text

6. time element

The concept of microformat

The microformat in HTML5 is a method that uses the new tags in HTML5 to add additional information to the web page Method, additional information such as the date and time of the news event, the publication date of the article, etc.

The microformats in HTML5 are to simplify the browser’s extraction of data and facilitate search engines

The time element

Time is HTML5 The new element

　 The time element represents a certain time or date in 24 hours, indicating that time differences are allowed. It can define dates and times in many formats

　The date and time in the datetime attribute representation should be separated by "T" text, "T" represents time, please pay attention to the penultimate line, the time plus Z text means to encode the machine When using UTC standard time, it means encoding the time of another region to the machine. If the local time is encoded, there is no need to add the time difference.

　　The pubdate attribute is an optional tag. With it, search engines/browsers can easily identify which date is the publication date of articles and news

7.time element example

　October 12, 2015

　　October 12, 2015 at 8 pm

　October 12, 2015 at 8 pm

　October 12, 2015 at 8 o'clock in the United States

8.hgroup element

Usually used To group titles, usually placed in the header, but it is not mandatory and not absolute

9. address element

　 Usually used to describe sitting contact information, such as name, email, phone number, address, etc.

　The content in the address element will be displayed in italics

10. Advantages of the new layout

　1. Focus more on content rather than form

　2. Friendly to people: more semantic, highly descriptive, and more Intuitive and increases the readability of the code.

　 3. Computer-friendly: it is easier for browsers to parse and search engines to crawl the content of the document

4. The code is more concise

11. figure element

figure/figcaptio are new in HTML5 Element

　The figure element is a media combination element, which is a combination of other media elements, such as: images, icons, etc.

12.figcaptio element

Used to define a title for the figure element

13.video

src attribute: audio address

loop attribute: whether to repeat play

autoplay attribute: whether to play automatically

controls attribute: add control

poster attribute: what to display before the video is loaded

first type: