Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what is the role of semantic HTML structure". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

HTML provides page document content context structure and meaning; HTML itself is not shown, we see, for example, bold, font size 2em, bold; is bold, do not think that this is the performance of HTML, these are actually HTML default CSS style at work, so first of all we have to know that HTML and page performance is not related, these are CSS things. The role of HTML in the page is the structure and meaning, popular point is to divide the content, what we put here, what we put.

The semantic HTML structure should first emphasize the HTML structure.

HTML structure is the skeleton of the page, a page is like a house, HTML structure is the wall of steel reinforced concrete, if there is no steel reinforced concrete wall of a house, it is a pile of expensive bricks, can not live, can not work. CSS is a decorative material, is a log floor, is marble, is paint, is used to decorate the house, CSS is powerful, needless to say, CSS if there is no HTML structure that is a pile of wood, paint together, no practical value. CSS relies entirely on the (X) HTML document that references it. If you want to make full use of the power of CSS, it is necessary to provide a HTML with clean and structured content. "HTML is the lingua franca for publishing hypertext on the Internet... HTML uses tags to structure text."

How to write the semantic HTML structure?

HTML is a way to supplement the structure and meaning (or "semantics") of text content. It tells us, "this line is a title, and these lines make up a paragraph." these are lists of projects, and they are hyperlinks to another file on the Internet. " It is worth noting that HTML should not be asked to tell us: "the text is blue and the text is red. This part is the rightmost column, and this line is in italics." This performance-related information is the job of CSS. When doing front-end development, keep in mind that HTML tells us what a piece of content is (or its meaning), not what it looks like. When we mention "semantic tags", the HTML we are talking about should be completely independent of the presentation information, and the tags in it should semantically define the structure of the document.

Writing semantic HTML structure is actually very simple, first of all, grasp the semantics of each tag in HTML, it is a container, it is an emphasis, it is an unordered list, and so on. When you see the content, think about what tag can better describe it, and use whatever tag it is.

What are the benefits of semantic HTML structures?

We know that HTML5's new tags, such as and, HTML is moving towards a more robust semantic HTML structure, xHTML2 is not as advanced as HTML5 in this respect, which is also a reason for xHTML2's death, which also shows that semantic HTML structure is the development trend of HTML.

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

HTML itself does not show, we see, for example, bold, font size 2em, bold Is bold, do not think that this is the performance of HTML, in fact, HTML default CSS style in play, so removed or lost style can make the page show a clear structure is not the advantage of semantic HTML structure, but browsers have default style, default style is also designed to better express the semantics of HTML, it can be said that the browser default style and semantic HTML structure are inseparable.

two。 Screen readers (if visitors are visually impaired) will "read" your web page entirely according to your tags.

For example, if you use semantic tags, the screen reader will "spell" your word one by one, rather than trying to pronounce it completely.

Devices such as 3.PDA and mobile phones may not be able to render web pages like browsers on ordinary computers (usually because of their weak support for CSS).

The use of semantic tags ensures that these devices render web pages in a meaningful way. Ideally, the task of the viewing device is to render the web page in accordance with the conditions of the device itself.

Semantic tagging provides the relevant information needed for the device, eliminating the need to consider all possible displays (including existing or future new devices). For example, a mobile phone can choose to display a paragraph of text marked with a title in bold. PDAs may be displayed in larger fonts. 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 context and keyword weights.

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

5. It is important whether your page is easy for the crawler to understand, because the crawler largely ignores the tags used for presentation and focuses only on semantic tags

Therefore, if the title of the page file is marked instead of, the page may be lower in the search results. In addition to improving ease of use, semantic tags are conducive to the correct use of CSS and JavaScript, because they themselves provide many "hooks" to apply page styles and behaviors.

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

6. Easy for team development and maintenance

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

This is the end of the content of "what is the purpose of semantic HTML structure". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.