How to understand the semantic HTML structure


I believe we all know HTML and CSS, the separation of HTML structure and CSS performance, and the semantics of HTML. These are the hot keywords in recent years. Semantic HTML was only sought after a year or two ago in China. Look at the HTML structure discussed in the group. For the 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 Web document content; HTML itself is not represented. For example, < H1 > is bold, font size 2em, bold< Strong > is bold. Don’t think this is the performance of HTML. In fact, the default CSS style of HTML works, so first of all, we should know that HTML has nothing to do with the performance of the page. These are CSS things. The role of HTML in the page is the structure and meaning. Generally speaking, it is to divide the content. What is put here and what we put.

Semantic HTML structure should first emphasize HTML structure

HTML structure is the skeleton of a page. A page is like a house. HTML structure is a steel reinforced concrete wall. If a house does not have a steel reinforced concrete wall, it is a pile of bricks. It can’t live or work. CSS is a decorative material, a log floor, marble and paint. It is used to decorate the house. Needless to say, CSS is powerful. If CSS does not have HTML structure, it is a pile of boards and paint together, which has no practical use value. CSS relies entirely on the (x) HTML document that references it. If you want to give full play to the power of CSS, it is very necessary to provide HTML with clean and structured content. “Html is the common language for publishing hypertext on the Internet… HTML uses tags to structure text.”(。

How to write semantic HTML structure?
Html is a method to supplement the structure and meaning (or “semantics”) of text content. It will tell us: “this line is a title, and these lines form a paragraph. These words are a list of items, and these words are hyperlinks to another file on the Internet.” it is worth noting that HTML should not tell us: “These words are blue and these words are red. This part of the content is the rightmost column, and this line of content is italicized.” 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” At the time of, what we call HTML should be completely separated from the presentation of information, and the tags in it should 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 > indicates emphasis< UL > < li > is an unordered list, etc… when you see the content, think about what label can better describe it, and use what label it is.

What are the benefits of semantic HTML structure?

We know that with the new tags in 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 the semantic HTML structure is the development trend of HTML.

1. When the style is removed or lost, it can make the page present a clear structure:

HTML itself is not represented. For example, < H1 > is bold, font size 2em, bold< Strong > is bold. Don’t think this is the expression of HTML. In fact, the default CSS style of HTML works. Therefore, when the style is removed or lost, it can make the page present a clear structure, which is not the advantage of semantic HTML structure. However, browsers have default styles. The purpose of default styles is to better express the semantics of HTML, It can be said that the browser’s default style and semantic HTML structure are inseparable.

2. The screen reader (if the visitor is visually impaired) will “read” your web page completely according to your mark.

For example, if you use semantic tags, the screen reader will “spell out” your words one by one instead of trying to pronounce them completely

3. PDA, mobile phone and other devices may not be able to render web pages like ordinary computer browsers (usually because these devices have weak support for CSS)

Using semantic tags can ensure that these devices render web pages in a meaningful way. Ideally, the task of viewing devices is to render web pages according to the conditions of the devices themselves

Semantic tags provide relevant information for the device, which saves you from considering all possible display situations (including existing or future new devices). For example, a mobile phone can choose to display a text marked with a title in bold. While a handheld computer may display it in a larger font. Either way, once you mark the text as a title, You can be sure that the reading device will display the page appropriately according to its own conditions

4. Search engine crawlers also rely on tags to determine the weight of context and keywords

In the past, you may not have considered that search engine crawlers are also “visitors” to the website, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then ordinary users will be very sad to visit

5. Whether your page is easy for crawlers to understand is very important, because crawlers will largely ignore the tags used for expression and only focus on semantic tags

Therefore, if the title of the page file is marked instead of, the page may be relatively backward in the search results. In addition to improving ease of use, semantic marking 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 of your website and external links.

6. Convenient for team development and maintenance

W3C has set 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 evenRealize modular development

If you have different views, please add and leave a message for discussion.

Thanks for the discussion of Guige, milk tea, Xiaozhi, stealing rice, Caspar and CSS forest group