Html semantics seems to be a cliché. Google has a lot of articles about semantics. Why semantics tags? I think this is what I think: each tag of Html has its specific meaning, and semantics is to let us use appropriate tags in the right place to better make people and machines (machines can be understood as browsers can be understood as search engines). If my explanation is not clear enough, please Google.
How to use the right label in the right place?This is a simple understanding logic. For example, the h1~h6 tags are used for title classes; ul is used for unordered lists; ol is used for filled lists; dl is used for defining lists; em, strong tags are used to emphasize... To put it bluntly, each English definition of the Html tag determines its semantics (later of this article, I will put a comparison table of English definitions of commonly used Html tags for reference).
What is it that people and machines can see at a glance?The best way to check whether the Html page is semantic is to remove the Css link of the page to see if the web page structure is orderly and whether the page is still readable. Why can I say that? Everyone knows that browsers have default styles (recommended to use Chrome Web Developer Tools for Chrome plug-in, or Firefox Web Developer plug-in). For example, h1~h6, there will be a default style of bold/font size reduction and upper and lower margins. Ul, ol, and dl all have default bullets, and strong has a bold style by default... So, for the same page, a well-semantic Html can still perform well when the page Css is removed.
Another point is that good semantic encoding is better friendly to search engines. Search spiders do not recognize your Css, but they can recognize Html tags.
Here is a simple example:Copy the code