Semanticization of HTML tags (including H5)

introduce

HTML provides the contextual structure and meaning of the content of a web document; HTML itself has no expression. For example, we see that <H3> is bold and the font size is 2em; <strong> is bold, but don’t think that these are the expression of HTML. This is the default style of HTML at work. So we need to know that HTML has nothing to do with the expression of the page . Expression is the business of CSS. The role of HTML in a page is structure and meaning. To put it simply, it is to divide the content. What is put here is what we put.

Structuring

If a web page is compared to a house, then HTML is the reinforced concrete walls and the roof and beam frames; and CSS is the decorative materials, floor paint and the like. A good page structure means that even without CSS decoration, the page structure is still clear and the house is still visible. The DIV+CSS that people often talk about is just a popular term, not DIV throughout the article. Remember: DIV is not God!

Semantic

HTML is a supplementary representation of the content and meaning (i.e. semantics) of text. It tells us, "This line is a heading, these lines form a paragraph, this is a bulleted list, that is a link." It doesn't tell us, "These words are blue, those are red, this part is on the right, these are italic." That's the job of CSS. In short: HTML tells us what a piece of content is (or what it means), not what it looks like.

What are the benefits of semantics?

1. Removing styles can make the page structure clear
2. Screen readers will "read" your web pages by marking them up
3. Good for SEO
4. Easy for team development and maintenance

Appendix: New elements in HTML5