Front-end Q&A

What are the new structural tags added in html5

青灯夜游

Dec 15, 2021 pm 05:44 PM

html5

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>

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 id="section是什么">section是什么？</h1>

<h2 id="一个新的章节">一个新的章节</h2>

<article>

<h2>关于section</h1>

<p>section的介绍</p>

...

</article>

</section>

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 id="这是一篇介绍HTML-nbsp-结构标签的文章">这是一篇介绍HTML 5结构标签的文章</h1>

<h2 id="HTML-nbsp-的革新">HTML 5的革新</h2>

</hgroup>

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

</header>

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

</article>

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>

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 id="作者简介">作者简介</h1>

<p>厚德IT</p>

</aside>

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,
navigation, etc.

<header>

<hgroup>

<h1 id="网站标题">网站标题</h1>

<h1 id="网站副标题">网站副标题</h1>

</hgroup>

</header>

footer tag

footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和

标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

<footer>

COPYRIGHT@厚德IT

</footer>

hgroup标签

hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来

<hgroup>

<h1 id="这是一篇介绍HTML-nbsp-结构标签的文章">这是一篇介绍HTML 5结构标签的文章</h1>

<h2 id="HTML-nbsp-的革新">HTML 5的革新</h2>

</hgroup>

figure 标签

用于对元素进行组合。多用于图片与图片描述组合。

<figure>

<img src="/static/imghwm/default1.png"  data-src="img.gif"  class="lazy"   alt="figure标签"  title="figure标签" />

<figcaption>这儿是图片的描述信息</figcaption>

</figure>

总结：

有了新的结构性的标签的标准，让HTML文档更加清晰，可阅读性更强，更利于SEO，也更利于视障人士阅读。

推荐教程：《html视频教程》

The above is the detailed content of What are the new structural tags added in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

The Benefits of React: Performance, Reusability, and MoreApr 15, 2025 am 12:05 AM

React’s popularity includes its performance optimization, component reuse and a rich ecosystem. 1. Performance optimization achieves efficient updates through virtual DOM and diffing mechanisms. 2. Component Reuse Reduces duplicate code by reusable components. 3. Rich ecosystem and one-way data flow enhance the development experience.

React: Creating Dynamic and Interactive User InterfacesApr 14, 2025 am 12:08 AM

React is the tool of choice for building dynamic and interactive user interfaces. 1) Componentization and JSX make UI splitting and reusing simple. 2) State management is implemented through the useState hook to trigger UI updates. 3) The event processing mechanism responds to user interaction and improves user experience.

React vs. Backend Frameworks: A ComparisonApr 13, 2025 am 12:06 AM

React is a front-end framework for building user interfaces; a back-end framework is used to build server-side applications. React provides componentized and efficient UI updates, and the backend framework provides a complete backend service solution. When choosing a technology stack, project requirements, team skills, and scalability should be considered.

HTML and React: The Relationship Between Markup and ComponentsApr 12, 2025 am 12:03 AM

The relationship between HTML and React is the core of front-end development, and they jointly build the user interface of modern web applications. 1) HTML defines the content structure and semantics, and React builds a dynamic interface through componentization. 2) React components use JSX syntax to embed HTML to achieve intelligent rendering. 3) Component life cycle manages HTML rendering and updates dynamically according to state and attributes. 4) Use components to optimize HTML structure and improve maintainability. 5) Performance optimization includes avoiding unnecessary rendering, using key attributes, and keeping the component single responsibility.

React and the Frontend: Building Interactive ExperiencesApr 11, 2025 am 12:02 AM

React is the preferred tool for building interactive front-end experiences. 1) React simplifies UI development through componentization and virtual DOM. 2) Components are divided into function components and class components. Function components are simpler and class components provide more life cycle methods. 3) The working principle of React relies on virtual DOM and reconciliation algorithm to improve performance. 4) State management uses useState or this.state, and life cycle methods such as componentDidMount are used for specific logic. 5) Basic usage includes creating components and managing state, and advanced usage involves custom hooks and performance optimization. 6) Common errors include improper status updates and performance issues, debugging skills include using ReactDevTools and Excellent

React and the Frontend Stack: The Tools and TechnologiesApr 10, 2025 am 09:34 AM

React is a JavaScript library for building user interfaces, with its core components and state management. 1) Simplify UI development through componentization and state management. 2) The working principle includes reconciliation and rendering, and optimization can be implemented through React.memo and useMemo. 3) The basic usage is to create and render components, and the advanced usage includes using Hooks and ContextAPI. 4) Common errors such as improper status update, you can use ReactDevTools to debug. 5) Performance optimization includes using React.memo, virtualization lists and CodeSplitting, and keeping code readable and maintainable is best practice.

React's Role in HTML: Enhancing User ExperienceApr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

React Components: Creating Reusable Elements in HTMLApr 08, 2025 pm 05:53 PM

React components can be defined by functions or classes, encapsulating UI logic and accepting input data through props. 1) Define components: Use functions or classes to return React elements. 2) Rendering component: React calls render method or executes function component. 3) Multiplexing components: pass data through props to build a complex UI. The lifecycle approach of components allows logic to be executed at different stages, improving development efficiency and code maintainability.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),