How to understand the semantic HTML structure

HTML structure is the skeleton of the page, a page is like a house, the HTML structure is steel reinforced concrete walls, a house if there is no steel reinforced concrete walls that is a pile of bricks, can not live people, can not work.

I believe we all know HTML and CSS, know HTML structure and CSS performance separation, know HTML semantics, these are the hot keywords in these years. Semantic HTML is also a year or two ago in the country began to be sought after, look at now the group talk about the HTML structure, on the HTML structure of the face questions, semantic HTML occupies a large part. So why do you want to make the semantic HTML? What is the benefit of semantically-formatted HTML?

HTML is the context structure and meaning that provides the content of a Web page document; HTML itself is not expressive, we see for example

is bold, font size 2EM, bold; is bold, do not think that this is the performance of HTML, These are actually HTML default CSS styles at work, so first we have to know that HTML and the performance of the page 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, here put what, we put what.

The semantic HTML structure should first emphasize the HTML structure

HTML structure is the skeleton of the page, a page is like a house, the HTML structure is steel reinforced concrete walls, a house if there is no steel reinforced concrete walls that is a pile of bricks, can not live people, can not work. CSS is a decorative material, is the wood floor, is a marble, is paint, is used to decorate the house, the strong CSS will not have to say, CSS if there is no HTML structure that is a pile of wood, paint together, no actual use value. CSS relies entirely on the (X) HTML document that references it. If you want to maximize the capabilities of CSS, it is necessary to provide HTML with both clean and structured content, "HTML is the Lingua-language that publishes hypertext on the internet ... HTML uses labels to structure text "(http://www.w3.org/MarkUp/).

How does the semantic HTML structure write?
HTML is a way to complement the structure and meaning (or "semantics") of text content. It will tell us: "This line is a title, 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 should not be allowed to tell us:" The text is blue and the text is red. This section is the most right side of the column, the line is italic text. "The information related to performance 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 talk about "semantic tags", the html we are talking about should be completely detached from the presentation information, and the tags should all be semantically defined in the structure of the document.

Semantic HTML structure is actually very simple, first grasp the HTML tags in the semantic,

is a container; is to express the emphasis;

• is an unordered list and so on ... When you see the content, think about what tags you can use to describe it better, and what tags you use.

  What is the benefit of a semantically structured HTML structure?

  We know that HTML5 's new tags, such as and

  ,html, are moving toward a more robust semantic HTML structure, XHTML2 not HTML5 advanced at this point, which is one of the reasons Xhtml2 died, This also shows that the semantic HTML structure is the development trend of HTML.

  1. Remove or loss of style can make the page appear clear structure:

  HTML itself is not expressive, we see for example

  is bold, font size 2EM, bold; is bold, do not think that this is the performance of HTML, these actually HTML default CSS style at work, So it's not the advantage of a semantic HTML structure to remove or lose a pattern, but browsers have default styles, and the default style is to better express HTML semantics, which can be said to be inseparable from the browser's default style and semantic HTML structure.

  2. Screen readers (if visitors have visual impairments) will "read" your page exactly according to your logo .

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

  3.PDA, mobile phones and other devices may not be able to render web pages like regular computer browsers (usually because these devices are less supportive of CSS).

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

  Semantic tagging provides the necessary information for the device, leaving you to consider all possible displays (including existing or future new devices). For example, A mobile phone you can choose to make a paragraph marked with a title in bold. The handheld may be displayed in a larger font. Either way, once you mark the text as a caption, you can be sure that the reading device will display the page appropriately according to its own criteria.

  4. Search engine spiders also rely on tags to determine the context and weight of each keyword.

  In the past you may not have considered the search engine crawler is also the site "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 reptiles, because the crawler largely ignores the markup used for performance, but only the semantic markup.

  Therefore, if the title of the paging file is marked instead of, the page may be in the position of the search results. In addition to improving ease of use, semantic tagging facilitates the proper usage 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 site and external links.

  6. Facilitate team development and maintenance

  The consortium has given us a very good standard, in the team we all follow this standard, you can reduce a lot of different things, convenient development and maintenance, improve development efficiency, and even realize the modular development .