A semantic category label
Semantic category label is to add text, such as headings, paragraphs, sections, lists, these elements are not expressed in plain text, we need to rely on semantic tags on behalf of expression.
<ruby>
牛<rp>(</rp> <rt>zha</rt> <rp>)</rp>
逼<rp>(</rp> <rt>zha</rt> <rp>)</rp>
</ruby>
复制代码Second, what kind of semantic tags that use it What are the benefits?
Semantic is the meaning of the expression we speak, most of the words to the semantics are actually carried. Semantic category label is to add text, such as headings, paragraphs, sections, lists, these elements are not expressed in plain text, we need to rely on semantic tags on behalf of expression.
- Semantic category label is more friendly to developers, using semantic category label enhances readability, even in the absence of CSS, developers can clearly see the structure of web pages, and more teams to facilitate the development and maintenance.
- In addition to human-friendly than the semantic category label is also very suitable for machine reading. Its text is rich and expressive, more suitable for search engines (SEO), search engine crawlers can also allow better access to information more efficiently, effectively increasing the amount of web search, and semantic class can also support screen reader software, according to articles can be automatically generated table of contents, and so on.
wherein the nesting section will make a drop h1-h6
- header, as the name suggests, usually the front, showing the content of navigation or introductory.
- footer, usually found in the tail, contains some of the information, related links, copyright information, and so on.
header and footer are generally placed in direct child elements or body of the article, but the standard does not clearly defined, and footer can aside, nav, section associated (header associated with no problem).
- aside represents with the main part of the article is not so relevant, it may contain content nature of navigation tools, advertising and so on.
aside easily be understood as a sidebar, in fact, the relationship between the two is included, the sidebar is aside, aside necessarily the sidebar.
aside in both the header and navigation (nav tag) may occur, the difference between the two is that the majority of navigation in the header of the article is to own directory, but navigation is the most aside to be associated with a page or the entire station map.
Finally footer contains the address, this is a very easy to misuse of labels. address is not the same as the date, indicates the address of a machine to read, but rather "article (author) contact details", address explicitly linked to the article and only body.
- It is a term used to wrap the label dfn defined.
- abbr tag indicates an abbreviation.
- Name tags cite works.
- figure tag is used to represent the main stream content related article images, photos, etc.
- pre label indicates that this part is over pre-layout does not require browser layout.
! ! ! If you are sure that you put it to use to use, you still do not want to use div and span it!
Reproduced in: https: //juejin.im/post/5ceb8d606fb9a07ed136b3dc