What are the new structural tags added in html5

青灯夜游
Release: 2021-12-22 13:45:16
Original
8897 people have browsed it

The newly added structural tags of html5 are: 1. section tag, which defines the sections in the document; 2. article tag; 3. nav tag; 4. aside tag; 5. header tag, which defines the header of the document ; 6. footer tag; 7. hgroup tag; 8. figure tag.

What are the new structural tags added in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5’s new structure tag

In previous HTML pages, everyone basically used the p CSS layout method. When a search engine crawls the content of a page, it can only guess that the content in one of your pages is an article content container, a navigation module container, or a container introduced by the author, etc. In other words, the structure of the entire HTML document is not clearly defined. In order to solve this problem, HTML5 specially adds: header, footer, navigation, article content and other structural element tags related to the structure.

Before talking about these new tags, let’s first look at the layout of an ordinary page:

We can see very clearly in the picture above that a An ordinary page will have a header, navigation, article content, an attached right column, and bottom modules. However, we distinguish them through classes and handle them through different css styles. But relatively speaking, class is not a universal standard specification. Search engines can only guess the functions of certain parts. In addition, if this page program is given to visually impaired people to read, the document structure and content will not be very clear. The new layout brought by the new HTML5 tag is as follows:

The relevant HTML code is:

<body>

  <header>...</header>

  <nav>...</nav>

  <article>

    <section>

      ...

    </section>

  </article>

  <aside>...</aside>

  <footer>...</footer>

</body>
Copy after login

With the above direct After the sensory understanding, we will introduce the relevant structural tags in HTML5 one by one.

section tag

tag defines a section in the document. Such as chapters, headers, footers, or other parts of the document. Generally used for sectioned content, it will start a new section in the document stream. It is used to represent ordinary document content or application blocks, usually consisting of content and its title. But the section element tag is not an ordinary container element. It represents a thematic content, usually with a title.
When we describe a specific thing, we are usually encouraged to use article instead of section; when we use section, we can still use h1 as the title without worrying about its location and whether it is used elsewhere. To; when a container needs to be styled directly or behavior defined through scripts, it is recommended to use the p element instead of section.

<section>

<h1>section是什么?</h1>

<h2>一个新的章节</h2>

<article>

<h2>关于section</h1>

<p>section的介绍</p>

...

</article>

</section>
Copy after login

article tag

is a special section tag, which has clearer semantics than section. It represents an independent and complete related Content blocks can be used independently of other content on the page. For example, a complete forum post, a blog post, a user comment, etc. Generally speaking, an article will have a title part (usually included in the header), and sometimes a footer. Articles can be nested, and the inner article has a subordinate relationship with the outer article tag. For example, a blog article can be displayed as article, and then some comments can be embedded in it in the form of article.

<article>

<header>

<hgroup>

<h1>这是一篇介绍HTML 5结构标签的文章</h1>

<h2>HTML 5的革新</h2>

</hgroup>

<time datetime="2011-03-20">2011.03.20</time>

</header>

<p>文章内容详情</p>

</article>
Copy after login

nav tag

The nav tag represents a part of the page and is a link group that can be used as page navigation. The navigation elements link to other pages or the current page. Other parts of the HTML code make the HTML code more semantically precise and provide better support for devices such as screen readers.

<nav>

<ul>

<li>厚德IT</li>

<li>FlyDragon</li>

<li>J飞龙天惊</li>

</ul>

</nav>
Copy after login

aside tag

Theaside tag is used to load non-text content and is considered a separate part of the page. The content it contains is separate from the main content of the page and can be deleted without affecting the content, sections, or information of the page. Such as ads, groups of links, sidebars, etc.

<aside>

<h1>作者简介</h1>

<p>厚德IT</p>

</aside>
Copy after login

header tag

tag defines the header of the document, usually some guidance and navigation information. It is not limited to being written in the header of the web page, but can also be written in the content of the web page.

Usually the

tag contains at least (but is not limited to) a header tag (

-

), and can also include the
tag, and can also include table content, Logo, search form,
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template