New feature of HTML5: new semantic tags

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

<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