How to understand the semantic HTML structure_HTML/Xhtml_Web page production

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. We see that for example,

is bold, with a font size of 2em, and bold; is bold, Don't think that this is the performance of HTML. These are actually the default CSS styles of HTML. So first of all, we must 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 and cannot be inhabited. , cannot 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 an 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 supplementing text content with structure and meaning (or "semantics"). 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.

is a container; means emphasis;

• is an unordered list. Wait... When you see the content, think about what tags can better describe it, and use whatever tags you want.

  What are the benefits of semantic HTML structure?

  We know that HTML5 has new tags, such as

  and

  . HTML is developing towards a more robust and semantic HTML structure. xhtml2 is not as advanced as html5 in this regard, which is why xhtml2 died. One reason, 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 performance. We see that for example,

  is bold, with a font size of 2em, and bold; is bold. Don’t think this is the performance of HTML. These are actually the default values ​​of HTML. The css style is at work, so when it is removed or lost, the page can present a clear structure. This 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 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, screen readers will "spell out" your word rather than trying to pronounce it in full.

  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 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 markup provides the relevant information needed by the device, saving you the need to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone can choose to use a markup Title text is displayed in bold. A handheld computer may display it in a larger font. Either way once you mark text as a title, you can be sure that the reading device will read it appropriately on its own terms. Show page.

  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 ordinary users will be very Sad to 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 this page may be positioned 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 "hooks" to apply the style and behavior of the page.
  SEO mainly depends 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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn