How to understand semantic HTML structure

I believe everyone knows html and css, knows the separation of html structure and css performance, and knows the semantics of html. These are the popular keywords in recent years. Semantic html was only sought after a year or two ago in China. Look at the html structure that is being talked about in the group now. Interview questions about html structure, semantic html accounts for a large part. So why use semantic HTML? What are the benefits of semantic HTML?

HTML provides the context structure and meaning of the content of the web page document; html itself does not express it. We see that for example, <h1> is bold, the font size is 2em, bold; <strong> is bold, don't think that this is the manifestation of html. These are actually the default css style of html in action, so first we need to know that html has nothing to do with the performance of the page, these are the matter of css. The role of HTML in a page is the structure and meaning. In layman's terms, it is to divide the content. What is placed here and what we put.

HTML structure is the skeleton of a page. A page is like a house. HTML structure is a wall of steel reinforced concrete. If a house does not have a wall of steel reinforced concrete, it will be a bunch of bricks, and cannot live in people or work. CSS is a decorative material, a log floor, a marble, a paint, and is used to decorate the house. There is no need to say more about the power of CSS. If CSS does not have an html structure, it will be a pile of wooden boards, painted together, without actual use value. CSS relies entirely on (X) HTML documents that reference it. If you want to get the full power of CSS to the fullest, it is very necessary to provide an html with both clean and structured content. HTML is the common term for publishing hypertext on the Internet... HTML uses tags to structure text ( http://www.w3.org/MarkUp/ ).

HTML is a method of supplementing text content structure and meaning (or semantics). It will tell us: this line is a title, and these lines form a paragraph. These texts are lists of items, and these texts are hyperlinks that link to another file on the internet. It is worth noting that HTML should not tell us: these texts are blue, and these texts are red. This part of the content is the most right column, and this line is in italics. These performance-related information is the work of CSS. When doing front-end development, remember: HTML tells us what a piece of content is (or its meaning), not what it looks like. When we mention semantic tags, what we call HTML should be completely separated from the presentation information, and the tags in it should all semantically define the structure of the document.

The semantic HTML structure is actually very simple. First, master the semantics of each tag in html. <div> is a container; <strong> is an emphasis; <ul><li> is an unordered list, etc. When you see the content, think about what tags can better describe it, and use whatever tags are.

We know that the newly added tags of HTML5, such as <header> and <footer>, html is developing towards a more robust semantic HTML structure. xhtml2 is not as advanced as html5 in this regard, which is also a reason for the death of xhtml2. This also shows that semantic HTML structure is the development trend of html.

html itself does not express itself. We see that for example, <h1> is bold, with a font size of 2em, bold; <strong> is bold, don't think that this is the manifestation of html. These are actually the default css styles of html in action, so removing or losing styles can make the page present a clear structure is not the advantage of semantic HTML structure, but browsers have default styles. The purpose of the default style is also to better express the semantics of html. It can be said that the default style of the browser and the semantic HTML structure are inseparable.

For example, if you use semantic markers, the screen reader will spell your words one by one, instead of trying to pronounce them in full.

Using semantic tagging ensures that these devices render web pages in a meaningful way. Ideally, the task of watching a device is to render web pages in line with the conditions of the device itself.

Semantic marking provides the device with the relevant information it needs, eliminating the possibility of all possible displays (including existing or new devices in the future). For example, a phone can choose to make a paragraph of text marked with a title in bold. The handheld computer may be displayed in larger fonts. Either way, once you mark the text as a title, you can be sure that the reader will properly display the page according to its own conditions.

In the past you may not have considered that search engine crawlers are also visitors to websites, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then the average user will be very difficult to come over to visit.

Therefore, if the title of the page file is marked instead of, the page may be in the lower position of the search results. In addition to improving ease of use, semantic tagging is conducive to the correct use of CSS and JavaScript, because it itself provides many hooks to apply the style and behavior of the page.

SEO mainly depends on the content and external links of your website.

W3C sets a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things, facilitate development and maintenance, improve development efficiency, and even realize modular development .

If you have different opinions, please add them. Please leave a message to discuss.

Thanks to Gui Ge, Milk Tea, Xiaozhi, Stealing Rice, Caspar and CSS Forest Group for discussion