New semantic elements of HTML5

Source: Internet
Author: User

1.<section>

The <section> element is used to define the area (or section) in a document or application. For example, you can use it to organize your personal information, a <section> for contact information, and another for news feeds. It is important to understand that it is not intended to beautify the style. If you just want to wrap an element in order to set the style, you should continue to use <div> as before.

2.<nav>

The <nav> element is used to define the main navigation area of the document, where the links point to other pages or to certain areas of the current page. Because <nav> is used in the main navigation area, it is strictly not designed for footers or other chunks that often contain a set of links (although it is no problem to include links in these chunks).

3.<article>

<article> elements are easily confused with <section> elements. It is used to wrap separate pieces of content. When setting up a page, think about whether the contents of your <article> tag can be copied and pasted into another completely different website as a whole, and can maintain the full meaning? Another way is to think about whether the content in <article> will be an independent article in the RSS feed? Should use the contents of the <article> tag package, the most obvious example is the body of the blog. Note that if a nested <article> element is present, the contents of the <article> element in the inner layer should be directly related to the content of the outer article.

4.<aside>

The <aside> element is used to represent content that is loosely related to the main content of the page. In practice, I often use it as a sidebar (when it contains the right content). In addition, citations, advertisements, and navigational elements (such as links, etc.) can also be used.

5.

If you have a group of headings, banners, and subheadings that use labels such as

You can use the following HTML5 outline Builder to test the large steel structure that generates the Web page:

(1) http://gsnedders.html5.org/outliner/

(2) http://hoyois.github.com/html5outliner/

6.

Because the

7.<footer>

As with

8.<address>

The <address> element is used to explicitly label contact information from its nearest <article> or <body> ancestor element. To avoid confusion, keep in mind that <address> generally does not place a specific postal address unless the corresponding content does require a contact address. The postal address and other contact information that may change should be wrapped using the <p> tag.

9.<b>

In the past, people often used the <b> element to add styles to text, but its actual use was to "make text bold." But now you can formally use it as a style hook, because now the HTML5 standard defines <b> as:

...... A small piece of text, purely to attract attention, does not convey any importance, nor does it imply any other voice or tone, such as keywords in a document digest, product names in comments, actionable words in interactive text software, or lead in the article.

10.<em>

...... Highlighting the focus in the content

11.<i>

...... A piece of text that has a different voice or tone, or a character that differs from a regular article in order to indicate a different character. To put it simply, it's not just for some text with a diagonal effect.

HTML5 also has a large number of text-level semantic tags that you want to fully understand, with the following addresses:

Http://www.w3.org/html/wg/drafts/html/master/semantics.html#text-level-semantics

New semantic elements of HTML5

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.