HTML5 semantic tags and html5 Semantics

Source: Internet
Author: User

HTML5 semantic tags and html5 Semantics

In the HTML5 standard, several new labels are added for adding the page semantics. These labels include article, section, nav, and aside. Unlike most other labels, when interpreting and rendering these labels, the browser simply treats them as common div block-level elements without adding any additional presentation logic. That is, these labels are only used to add semantics. For Web developers, the use of these tags has two main meanings: Search Engine Optimization and page availability (accessibility ).

In terms of element classification, article, section, nav, and aside call it "Sectioning Content"

Article

The article element can be used to indicate a piece of content on the page that has certain independence, this content can be an article, a post/comment on a forum, a blog, and an interactive control. Article labels can be nested. In this case, the sub-article element and the parent article element must be logically associated. For example, a Web Developer can use the body and comment of a blog as the parent article element, and use each comment as the sub-article element.

The main element-main element cannot appear inside the article element, which indicates the main content of the page. When a main element exists, the article element exists as a child element of the main element.

Section

A section element refers to a part of a page or Web application. Different sections have different theme or tone, and generally place the heading element (h1-h6) in the section element) to define the "theme"/"tone ".

It is an error to use section as a div-except for the content that can be displayed on the page, the child element of the section should not assume any other roles (style, behavior, auxiliary tag, etc ).

Nav

The nav element is mainly used to contain navigation links on the page. Therefore, it is very common to directly include ul or ol elements in the nav element. Even so, the nav can also not contain ul or ol elements. For example, the nav element can contain an article section (p tag ), the section contains links (a tag ).

Like the article element, the main element cannot appear inside the nav element.

Aside

The aside element is generally used to represent the sidebar on the page. However, this element only indicates the sidebar in semantics ", when parsing and rendering the tag, the browser only processes it as a common div block-level element. To achieve the effect of the sidebar, Web developers need to write CSS on their own.

Related Article

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.