How to understand semantic HTML structure

I believe everyone knows HTML and CSS, knows the separation of HTML structure and CSS expression, and knows the semantics of HTML. These have been hot keywords in recent years. Semantic HTML started to be popular in China only one or two years ago. Looking at the HTML structure discussed in the group now, semantic HTML occupies a large part of the interview questions about HTML structure. So why use semantic HTML? What are the benefits of semantic HTML?

HTML provides the contextual structure and meaning of the content of a web document; HTML itself has no expression. For example, we see that <h1> is bold, with a font size of 2em, and is bold; <strong> is bold. Don't think that this is the expression of HTML. In fact, the default CSS style of HTML is at work. So first of all, we need to know that HTML has nothing to do with the expression of the page. These are things that CSS does. The role of HTML in a page is structure and meaning, in layman's terms it is to divide the content, what is put here, what we put.

Semantic HTML structure must first emphasize HTML structure

The HTML structure is the skeleton of the page. A page is like a house, and the HTML structure is the steel, reinforced concrete walls. If a house does not have steel, reinforced concrete walls, it is just a pile of useless bricks, which cannot be used for living or office work. CSS is a decorative material, it is like wooden floor, marble, paint, it is used to decorate the house. There is no need to say much about the power of CSS. If CSS does not have an HTML structure, it is just a pile of wooden boards painted together, and has no practical value. CSS is completely dependent on the (X)HTML document that references it. If you want to use CSS to its full potential, it is necessary to provide HTML with clean and structured content. "HTML is the lingua franca for publishing hypertext on the Internet...HTML uses tags to structure text" ( http://www.w3.org/MarkUp/ ).

How to write semantic HTML structure?
HTML is a method of adding structure and meaning (or "semantics") to textual content. It tells us: "This line is a heading. These lines form a paragraph. This text is a list of items. This text is a hyperlink to another file on the Internet." It is important to note that HTML should not tell us: "This text is blue. This text is red. This part of the content is the farthest right column. This line of content is italic." This kind of presentation-related information is the job of CSS. When doing front-end development, remember that HTML tells us what a piece of content is (or its meaning), not what it looks like. When we mention "semantic markup", we mean HTML that is completely separated from 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, you need to understand the semantics of each tag in HTML. <div> is a container; <strong> indicates emphasis; <ul><li> is an unordered list, and so on... When you see the content, think about which tag can better describe it, and use the tag that describes it.

What are the benefits of semantic HTML structure?

We know that with the new tags added in HTML5, such as <header> and <footer>, HTML is moving towards a more robust semantic HTML structure. XHTML2 is not as advanced as HTML5 in this regard, which is one of the reasons 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, the page can present a clear structure:

HTML itself has no expression. For example, we can see that <h1> is bold, with a font size of 2em, and is bold; <strong> is bold. Don't think that this is the expression of HTML. In fact, these are the default CSS styles of HTML at work. Therefore, removing or losing the style can make the page present a clear structure, which is not an advantage of the semantic HTML structure. However, browsers all have default styles. The purpose of the default style is to better express the semantics of HTML. It can be said that the browser's default style and the semantic HTML structure are inseparable.

2. Screen readers (if the visitor is visually impaired) will "read" your page based entirely on your markup .

For example, if you use semantic markup, the screen reader will "spell out" your word instead of trying to pronounce it.

3. PDAs, mobile phones 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 markup ensures that these devices render the web page in a way that makes sense. Ideally, the viewing device is tasked with rendering the web page in a way that is consistent with the device's native capabilities.

Semantic markup provides the device with the relevant information it needs, saving you from having to consider all possible display situations (including existing and future devices). For example, a cell phone may choose to display a section of text tagged as a heading in bold. A PDA may display it in a larger font. Either way, once you have marked the text as a heading, you can be confident that the reading device will display the page appropriately based on its own conditions.

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

In the past you may not have considered search engine crawlers to be "visitors" to your website, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then it will be difficult for ordinary users to come and visit.

5. It is very important that your page is easy for crawlers to understand, because crawlers will largely ignore the markup used for presentation and only focus on semantic markup.

Therefore, if the title of a page document is marked up instead of , then the page may be ranked lower in the search results. In addition to improving usability, semantic markup facilitates the correct use of CSS and JavaScript, because it 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. Easy for team development and maintenance

W3C has set a very good standard for us. If everyone in the team follows this standard, we can reduce a lot of differences, facilitate development and maintenance, improve development efficiency, and even achieve modular development .

If you have different opinions or additions, please leave a message for discussion.

Thanks to Guige, Milk Tea, Xiaozhi, Toufianmi, Caspar and CSS Forest Group for the discussion