Html semantics seems to be a commonplace issue. If you search on Google, there are a lot of articles about semantics. Why semantic tags? I think this way: each tag of Html has its specific meaning, and semantic tags , that is, let us use appropriate tags at the appropriate locations to better understand both people and machines (machine can understand it as a browser and can understand it as a search engine). If my explanation is not clear enough, please Google.

How to use the right tags at the right place?
This is a simple understanding logic. For example, h1~h6 tags are for title classes; ul is for unordered lists ; ol is used for filled lists; dl is used to define lists; em, strong tags are used for emphasis... To put it bluntly, each English interpretation of the Html tag determines its semantics (later in this article, I will Put a comparison table of English definitions of commonly used Html tags for reference).
What is clear to both humans and machines?
The best way to check whether an Html page is semantic is to Remove the Css link on the page and see if the web page structure is in order and the page is still very readable. Why can you say this? Everyone knows that browsers have default styles (it is recommended to use Chrome Web Developer Tools for Chrome plug-in, or Firefox's Web Developer plug-in), such as h1~h6, will be bold/ The font size decreases sequentially, and the default styles for top and bottom margins, ul, ol, and dl all have default bullets, and strong has a bold style by default... Therefore, on the same page, Html with good semantics can be removed from the page Css It still performs well.
Another point is that good semantic coding is more friendly to search engines. Search spiders do not know your Css, but they can recognize Html tags.
The following is a simple example:

Through the above simple example and the rendering without any Css definition, it’s time to understand the difference between the two. If you are learning Html5, its header, footer, sidebar, article and other elements are all new Added semantic tags.
Semantic Html coding is a step towards high-quality front-end development. It means better following Web standards, and it can also keep your pages in order after removing styles. More about semantics For a more detailed introduction, you can Google or read Adang's "The Way of Web Front-End Development" Chapter 3.
Attachment : Comparison table of tag semantics in Chinese and English