HTML5’s new structural tags
In previous HTML pages, everyone basically used the Div+CSS layout method. When a search engine crawls the content of a page, it can only guess that the content in one of your Divs 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:
<html> <head> <title>my page</title> </head> <body> <header>header</header> <nav>nav</nav> <article> <section>section</section> </article> <aside>aside</aside> <footer>footer</footer> </body> </html>After having the above direct sensory understanding, let’s introduce the relevant structural tags in HTML5 one by one.
<section>##<section> 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 div elements instead of sections.<section> <h1>section是什么？</h1> <h2>一个新章节</h2> <article> <h2>关于section</h2> <p>section的介绍</p> ... </article> </section>
<article>
The special section tag has clearer semantics than section. It represents an independent and complete block of related content. When we describe a specific thing, it is usually encouraged to use article instead of section.
Article will have a title part (usually included in the header), and may also include a footer.
Articles can be nested, and the inner article has a subordinate relationship with the outer article tag.
<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><nav>
can be used as a link group for page navigation. The navigation elements in it are linked to other pages or other parts of the current page, making the HTML code more semantically precise and providing better support for devices such as screen readers. <aside> The aside 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. <header> The header 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 header tag contains at least one title tag (h1-h6), and can also include hgroup tags, table content, logos, search forms, nav navigation, etc. <footer> The footer tag defines the footer of a section or document, which contains information related to the page, article or part of the content, such as an article author or date. It is basically the same as the header tag and can be used multiple times on a page. If a footer is added after a section, it will be equivalent to the footer of the section. <hgroup> The hgroup tag is a combination of the title elements (h1-h6) of the web page or section. For example, if you have consecutive h-series tag elements in a section, you can enclose them with hgroup. <figure><nav>
<ul>
<li>厚德IT</li>
<li>FlyDragon</li>
<li>J飞龙天惊</li>
</ul>
</nav>
<aside>
<h1>作者简介</h1>
<p>厚德IT</p>
</aside>
<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>
<footer>
页脚信息
</footer>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<figure>
<img src="img.gif" alt="figure标签" title="figure标签" />
<figcaption>这儿是图片的描述信息</figcaption>
</figure>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
