Review the semantic elements of HTML5

What is a semantic element

Semantics is meaning. This means that the label's meaning can be known by the name of the tag.

For example, Div,p,span is not a semantic element, because you cannot use this tag to learn what it means.

And header,img is a semantic element, and we know what this tag represents.

Why implement a semantic element to the browser:

A better search engine included.

Enhance the structure of your Web pages.

For users, engineers and maintenance teams:

The use of semantic nonsense enhances the readability and maintainability of your code.

HTML5 New Semantic element 1.section (section)

Sections are commonly used to define chapters, headers, and footers in a Web page.

and section usually presents a set of information (containing content and headings), just like the chapters in a book.

<section>
　　
2, article
Article is often used to define independent content.
<article>
　　
We can see that section and article are used very similarly, so how to differentiate them.
For example, a section is like a large chapter in a book, while article is a small, independent part of it, such as the part of a note. Article always represents a chapter of independence, and the context is not related. Also, sections and article can be nested with each other. How to use it in your Web page, you need to experience it.
3.nav
The NAV tag is the label used to define the navigation link section, but note that this is not a defined link (a) tag, which means a tag can be used alone.
One of the benefits of NAV is that responsive design can be implemented well. For example, in a mobile browser or a small screen browser, we can see that some navigation bars are omitted by default.
<nav><a href= "www.badu.com" > Baidu </a><a href= "www.google.com" > Google </a><a href= "https ://cn.bing.com/"> Bing </a></nav>
　　
4.aside
The aside is used to define the sidebar.
From a semantic point of view, aside needs to be associated with the main content.
<aside><p> This is the sidebar </p></aside>
　　
5.header
Used to define the title bar section of a document.
Headers can be nested within article and sections, and can contain 
For example, we often see the author information, Logo,icon and so on can be placed in the header.
　　
6.footer
and the above header corresponds to the footer.
Footer is usually the copyright information, links and so on. This section is common on many websites, and most of the sites are at the bottom of the footer.
<footer>  <p>posted by:hege refsnes</p>  <p>contact information: <a href= "mailto:[ Email protected] ">  [email protected]</a>.</p></footer>
　　
7.figure and Figcaption
Used to define some independent images, blocks of code, illustrations, and statistical charts.
Figuer the figcaption included. Figcaption is the description of a picture or block of code.
<figure>    < Figcaption>fig1. -The pulpit Pock, norway.</figcaption></figure>
　　
Compatibility issues
Some of the new elements may not be available in earlier versions of IE8.
Need to download HTML5 Shiv script
Then insert the following code in the 
　　
　
Review the semantic elements of HTML5