Understanding of Web Semantics

Web semantics is to make the appropriate label, so that the page has a good structure, page elements have meaning, can make people and search engines are easy to understand.

If the appropriate label can be used in the right place, then the page is written in a clear semantic, clear structure, the search engine can also recognize what is the important content of the page, the higher the weight value. a major innovation in HTML5 is the refinement of semantic tagging.

The semantics of the HTML structure is actually very simple, first of all, the semantics of the HTML tags,<div> is a container;<strong> is to emphasize that;<ul><li> is an unordered list and so on ... When you see the content, think about what tags you can use to better describe it, and what label to use.

What are the benefits of a semantic HTML structure?

I believe we all know HTML and CSS, know HTML structure and CSS performance separation, know HTML semantics, these are the hot keywords of these years. Semantic HTML in the country is also a couple of years ago began to be sought after, look at the current group of the HTML structure, about the HTML structure of the face questions, semantic HTML occupies a large part. So why do you want to make the semantics of HTML? What are the benefits of semantic HTML?

HTML is to provide the context structure and meaning of the content of the Web page document, HTML itself is not performance, we see for example

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 steel reinforced concrete wall, a house if there is no steel reinforced concrete wall that is a heap of bricks, can not live people, can not work. CSS is decorative material, is the wood floor, is the marble, is the paint, is used to decorate the house, the powerful CSS does not have to say, CSS if there is no HTML structure that is a pile of wood, paint together, without the actual use of value. CSS relies entirely on the (X) HTML document that references it. If you want to get the most out of your CSS, it is necessary to provide HTML with both clean and structured content, "HTML is the lingua-generic language for publishing hypertext on the internet ... HTML uses tags to structure text "(http://www.w3.org/MarkUp/).

How does the semantic HTML structure be written?
HTML is a way to supplement the structure and meaning (or "semantics") of textual content. It will tell us, "This line is a heading, and these lines make up a paragraph." The text is a list of items that are hyperlinks to another file on the Internet. "It's worth noting that HTML shouldn't be allowed to tell us:" These words are blue and the text is red. This part of the content is the most right column, this line is italic word. "These and performance-related information is the work of CSS. When doing front-end development, remember that HTML tells us what a piece of content is (or what it means), not what it looks like. When we refer to "semantic markup", we should say that HTML should be completely out of the performance information, where the label should be semantically defined the structure of the document.

The semantics of the HTML structure is actually very simple, first of all, the semantics of the HTML tags,<div> is a container;<strong> is to emphasize that;<ul><li> is an unordered list and so on ... When you see the content, think about what tags you can use to better describe it, and what label to use.

What are the benefits of a semantic HTML structure?
We know that HTML5 new tags, such as 1. When you remove or lose the style, you can make the page appear in a clear structure:
HTML itself is not performance, we see for example

2. Screen readers (if the visitor has a visual impairment) will "read" your page exactly according to your tag .

For example, if you use a semantic tag, the screen reader will "spell out" your words, instead of trying to pronounce them completely.

3.PDA, mobile phones and other devices may not be able to render web pages like normal computer browsers (usually because these devices have weak support for CSS).
Use semantic tags to ensure that these devices render Web pages in a meaningful way. Ideally, the task of viewing the device is to render the Web page in accordance with the conditions of the device itself.

Semantic tagging provides the device with the information it needs, eliminating the need for you to consider all possible display scenarios (including existing or future new devices). For example, A mobile phone can choose to make a piece of text marked with a headline appear in bold. The PDA may be displayed in a larger font. Either way, once you mark the text as a caption, you can be confident that the reading device will display the page appropriately based on its own criteria.

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

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

5. It is important that your page is easily understood by crawlers, because the crawler largely ignores markup for performance and focuses only on semantic tagging.
Therefore, if the title of the page file is marked instead of, then the location of the page in the search results may be compared. In addition to improving ease of use, semantic tagging facilitates the correct usage of CSS and JavaScript, since it provides many "hooks" to apply the style and behavior of the page.
SEO is mainly by the content of your site and external links.

6. Facilitate team development and maintenance

We have set a very good standard, in the team we all follow this standard, can reduce a lot of differentiated things, convenient development and maintenance, improve development efficiency, and even achieve modular development.

Understanding of Web Semantics