HTML5 semantic tags and html5 Semantics

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.