Introduction to semantic tags in HTML5

In the HTML5 standard, several new tags are added to add page semantics. These tags include: article, section, nav, and aside. Unlike most other tags, the browser only treats them as ordinary p block-level elements when interpreting and rendering these tags, without adding any additional presentation logic; that is, these tags are only used to add semantics. For web developers, the actual significance of using these tags is mainly two points: search engine optimization, and increasing the usability of the page (accessibility).

In terms of element classification, article, section, nav and aside are called "Sectioning Content"

article

article elements can be used to represent pages A certain piece of independent content. This content can be an article, a post/comment on a forum, a blog, an interactive control, etc. Article tags can be nested. When doing so, the child article element must be logically related to the parent article element. For example, web developers can use the text and comments of a blog as the parent article element, and use each comment as a child article element.

The main element cannot appear inside the article element - the main element means the main content of the page. When there is a main element, the article element exists as a child element of the main element.

#section

The section element refers to a part of a page or web application. Different sections should have different "themes" or "tones" from each other. , this "theme"/"tone" is generally defined by placing the heading element (h1-h6) within the section element.

It is a mistake to use section as p - except for the content that can be displayed on the page, the sub-elements of section should not assume any other role (style, behavior, auxiliary tags, etc.).

nav

The nav element is mainly used to contain navigation links on the page, so it is a very common practice to directly include ul elements or ol elements in nav elements. . Nevertheless, nav does not need to contain ul or ol elements. For example, the nav element can contain an article paragraph (p tag), and the article paragraph contains some links (a tag).

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

aside

theaside element is generally used to represent the sidebar on the page, but this element only semantically represents "sidebar". The browser When parsing and rendering the tag, it will only be processed as an ordinary p block-level element. If you want to really get the sidebar effect, web developers need to write their own CSS to achieve it.

The above introduction to the semantic tags of HTML5 is all the content shared by the editor. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!