Html5 semantic tags make it easier for developers to build a clear layout of a page

The label describe
<header> Defines the header area of the document
<footer> Defines the tail area of the document
<nav> Define the navigation of the document
<section> Define sections in the document
<article> Define the article
<aside> Define content outside the page
<details> Define additional details that the user can see or hide
<summary> The tag contains the title of the Details element
<dialog> Define dialog
<figure> Define self-contained content
<main> Define the document main content
<mark> Define the main content of the document
<time> Define the date/time
The header element

The

element defines the header area of the document

<header>     
   <hgroup>         
       <h1>The title</h1>
       <h1>subtitle</h1>
   </hgroup>
</header>
Copy the code
Footer element

The

element defines the tail area of the document. Usually contains some basic information about the section, such as the author, links to related documents, and copyright materials.

<footer>Original author; Copyright information; Contact information; Document related links etc...</footer>
Copy the code
The nav element

The

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
Copy the code
Section element

The

element represents the “section” or “section” in the document. “Section” can refer to the subsections of an article by topic. “Sections” can refer to groups within a page.

<section>
    <h1>Here are the section headings...</h1>
    <p>Here are the section headings for the contents...</p>
</section>
Copy the code
Value element

The

<article>     
    <p>content</p>     
    <aside>         
        <h1>Author's brief introduction</h1>         
        <p>content</p>     
    </aside>
</article>
Copy the code
The details element

Describes the document or details of a part of the document. Summary is the title of the Details element

<details>
    <summary>The title</summary>
    <p>content</p>
</details>
Copy the code
Figure element

The

element represents a single piece of content. Used to combine elements. Mostly used for combination of picture and picture description.

<! -- Just a figure -->
<figure>
  <img src="figure.png" alt="Figure. PNG Image click" title="Figure pictures">
</figure>
<p>The paragraph</p>
 
<! -- Figure with figcaption -->
<figure>
   <img src="figure.png" alt="Figure. PNG Image click" title="Figure pictures">picture">   
   <figcaption>Figure Picture description</figcaption>
</figure>
<p>Paragraph...</p>
Copy the code
The time element

Define the date/time

<time datetime="2021-06-01">
Copy the code
Functions of new semantic tags:
  • Removing or losing styles allows the page to be clearly structured
  • Facilitate parsing by other devices (screen readers, blind readers, mobile devices) to render a web page in a meaningful way
  • Is conducive to SEO
  • Easy for teams to develop and maintain, following W3C standards and reducing differentiation