New H5 Elements

New H5 Elements

1. article element (TAG)

Defines an independent content block, such as an article or blog.

Other elements can be nested in the article element. It can have its own header, tail, body, and other content. When using this element, pay special attention to the independence of the content. In general, the article element is used only when the content is independent and complete, if it is just a piece of content, the section element should be used.

2. section Element

Used to define chapters in an article (usually including titles and paragraphs)

It is used to define specific content blocks in the document. It can be viewed as a regional grouping element and used to block content on the page.

The section element defines the subject content of a document.

In a word, its function is to segment the content and partition the page.

Note the difference between it and div. div emphasizes formal independence, section emphasizes content independence, and pay attention to its semantics.

3. Differences between article and section elements

Different Semantics

The article element emphasizes content independence.

The section element emphasizes the relevance of content.

The article element is independent and complete, and the section element page content is segmented.

Similarities

Essentially, it is a div block element with semantics.

<Div id = "section"> and <div id = "article">

4. aside Elements

The aside element is usually used to set the sidebar.

Defines content other than the article element, provided that the content is related to the content in the article element.

It can also be nested in the article element and used as ancillary information of the main content, such as references and glossary related to the content.

5. nav Elements

Used to define directories, navigation bars, and hyperlinks

Not all hyperlinks are placed in the nav element. Generally, only the main navigation bar of a document is placed in the nav.

On the article page, nav can also be used to create a directory hyperlink for a text

6. time Element

Concepts of micro-formats

The microformat in HTML5 is a method of adding additional information to a webpage using the new tags in HTML5, such as the date and time when a news event occurs, and the posting date of an article.

In HTML5, micro-formats are used to simplify data extraction by browsers and facilitate search engines.

Time Element

Time is a new element of html5.

The time element indicates a time or a date in 24 hours, indicating that the time difference is allowed. It can define dates and times in many formats.

The datetime attribute indicates that the date and time must be separated by the "T" text, and "T" indicates the time. Pay attention to the last and second rows, the time plus Z text indicates that the UTC standard time is used for machine encoding, indicating that the time of another region is coded to the machine. If the local time is encoded, no time difference is required.

The pubdate attribute is an optional tag. With it, the search engine/browser can easily identify the date on which an article or news is published.

7. Example of time Element

<Time datetime = "October 12, 2015"> </time>

<Time datetime = "2015-10-22T20: 00">, January 1, October 12, 2015 </time>

<Time datetime = "2015-10-22T20: 00Z">, January 1, October 12, 2015 </time>

<Time datetime = "2015-10-22T20: 00 + 09: 00">, January 1, October 12, 2015, us time </time>

8. hgroup Element

It is usually used to group titles. It is usually placed in the header, but it is not mandatory or absolute.

9. address Element

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

The content in the address element is displayed in italic.

10. advantages of the new layout

1. Pay more attention to content rather than form

2. friendly to people: More semantic, highly descriptive, more intuitive, and more readable code.

3. Computer friendliness: browsers are easier to parse, and search engines are easier to capture document content.

4. Simpler code

11. figure Element

Figure/figcaptio are newly added elements in html5.

A figure element is a media combination element, that is, a combination of other media elements, such as images and icons.

12. figcaptio Elements

Used to define titles for the figure Element