I believe everyone knows html and css, knows the separation of html structure and css performance, and knows html semantics. These are popular keywords in recent years. Semantic HTML only started to be popular in China a year or two ago. Looking at the HTML structure discussed in the group now, and 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 contextual structure and meaning of web document content; html itself has no representation. For example, we see that <h1> is bold, with a font size of 2em, and bold; <strong> is bold, so don’t think it is HTML. Performance, these are actually the default CSS styles of HTML at work, so first of all we need to know that HTML has nothing to do with the performance of the page, these are CSS matters. The role of HTML in the page is structure and meaning. In layman's terms, it is to divide the content. What we put here is what we put.
Semantic HTML structure must first emphasize the HTML structure
The HTML structure is the skeleton of the page. A page is like a house. The HTML structure is the walls of steel and concrete. If a house does not have walls of steel and concrete, it is just a pile of useless bricks. It cannot be lived in or used for work. . CSS is a decorative material. It is a log floor, marble, and paint. It is used to decorate a house. Needless to say, the power of CSS. If CSS does not have an HTML structure, it is just a pile of wooden boards. They are painted together and have no actual use value. . CSS relies entirely on the (X)HTML document that references it. If you want to take full advantage of the power of CSS, it is necessary to provide HTML with content that is both clean and structured. "HTML is the lingua franca for publishing hypertext on the Internet... HTML uses tags to structure text. ization” ( http://www.w3.org/MarkUp/ ).
How to write a semantic HTML structure?
HTML is a method of adding structure and meaning (or "semantics") to text content. It will tell us: "This line is a title, these lines form a paragraph. These words are a list of items, and these words are a hyperlink to another file on the Internet." It is worth noting that you should not let HTML tells us: "These texts are blue, and these texts are red. This part of the content is the rightmost column, and this line of content is in italics." This information related to performance is the job 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 talk about "semantic markup", the HTML we are talking about should be completely separated from the presentation information, and the tags in it should semantically define the structure of the document.
The semantic HTML structure is actually very simple. First, grasp the semantics of each tag in html. <div> is a container; <strong> is for emphasis; <ul><li> is an unordered list, etc... After seeing the content When thinking about what label can better describe it, use whatever label it is.
What are the benefits of semantic HTML structure?
We know that HTML5 has new tags, such as <header> and <footer>. HTML is developing towards a more robust and semantic HTML structure. xhtml2 is not as advanced as html5 in this regard. This is also one of the reasons for the death of xhtml2. It also shows that 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 performance. For example, we see that <h1> is bold, font size 2em, bold; <strong> is bold. Don’t think this is the performance of HTML. These are actually the default CSS styles of HTML. Function, so 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 have default styles. The purpose of the default style is also to better express the semantics of html. It can be said that Browser default styles and 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, screen readers will "spell out" your word rather than trying to pronounce it in its entirety.
3. Devices such as PDAs and mobile phones 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 web pages in a meaningful way. Ideally, the viewing device is tasked with rendering web pages consistent with the conditions of the device itself.
Semantic tagging provides the device with the relevant information it needs, saving you the trouble of having to consider all possible display scenarios (on existing or new devices in the future). For example, a phone could choose to display a section tagged with a title. The text is displayed in bold font. 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 on its own terms.
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 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 it will be difficult for ordinary users to come and visit. .
5. It is very important whether your page is easy for crawlers to understand, because crawlers will largely ignore the markup used for performance and only focus on semantic markup.
Therefore, if the title of the page file is tagged instead of tagged, then the page may appear lower in the search results. In addition to improving ease of use, semantic markup facilitates the correct use of CSS and JavaScript because it itself provides many "Hook" to apply the style and behavior of the page.
SEO mainly relies on the content of your website and external links.
6. Facilitate 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 even achieve modular development .
If you have different opinions or additions, please leave a message for discussion.
Thanks to Brother Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar and the CSS Forest Group for the discussion
Original text: http://www.css88.com/archives/1668