A, HTML5 semantic tags
| label | description |
|---|---|
| <article> | Independent page content area. |
| <aside> | Sidebar content of the page. |
| <bdi> | It allows you to set a piece of text, text direction away from the parent element of the set. |
| <command> | Command buttons, such as radio buttons, check boxes or buttons |
| <details> | Used to describe details of a part of the document or document |
| <dialog> | Dialog box, such as the prompt box |
| <summary> | The title tag contains details of elements |
| <figure> | The provisions of a separate stream content (images, diagrams, photos, code, etc.). |
| <figcaption> | Title <figure> element |
| <footer> | Or footer section of the document. |
| <header> | Head area of a document |
| <mark> | Text marked with. |
| <meter> | Weights and Measures. It is known only to measure the maximum and minimum values. |
| <nav> | Part of the navigation links. |
| <progress> | Any type of task progress. |
| <ruby> | ruby annotation (Chinese phonetic or characters). |
| <rt> | Character (or Chinese phonetic characters) interpretation or pronunciation. |
| <rp> | Use the comment in ruby, ruby element does not support content browser is displayed. |
| <section> | Document section (section, section). |
| <time> | Date or time. |
| <wbr> | Provisions in the text where appropriate to add a line break. |
Second, using semantic tags
2.1 <title> </ title> Page main content
(1) Features <title> tag is short, descriptive, unique, for raising search engine rankings.
(2) the search engine will determine the page title as the main content index, effective with the page title should contain several closely related content keywords, suggested that the core of the former title of write 60 characters.
2.2 <header> </ header> Header
(1) HTML5 specification describes as " a set of entries of interpretative or navigational " signs usually site, the main navigation, and links the station search box.
2.3 <nav> </ nav> Navigation
(1) Navigation link page area, a page defined for the primary navigation portion.
(2) commonly used navigation <ul> unordered list. If the breadcrumb links, use <ol> ordered list.
(3) HTML5 specification does not recommend the use of auxiliary nav footer links, important links unless footer displays the top global navigation, or recruitment information again.
2.4 <main> </ main> main content
(1) website page main content , and a page can only be used once <main> tag.
(2) If the web application, including its main function.
2.5 <article> </ article> tag articles
(1) it is represented by a document, page, application, or website in a separate container.
(2) HTML5 specification states <article> tag applied to a self-contained widget: stock quotes, calculators, watches, weather widget and the like.
(3) <article> This tag can be nested to use, but they must be a relationship between the parts to the whole .
2.6 <section> </ section> block
(1) a set of similar subject matter content, there will be a general title.
(2) achieve such section of the article, tabbed dialog various tabs and other functions.
2.7 <aside> </ aside> sidebar
(1) represents the main part of the content of the page is not greater relationship, and may exist independently .
(2) achieve such jack-references, sidebar, links to related articles, ads, links and other functions.
2.8 <footer> </ footer> Footer
(1) and a <header> tag corresponds to, for example can be achieved appendix, index, colophon, license and so on.
2.9 <cite> </ cite> references
(1) References to the text it contains a reference , such as books or magazines title.
(2) By convention, the text will be referenced in italics display.
(3) with <cite> tag to point to other documents referenced separated out, especially those separated from traditional media documents, such as books, magazines, journals, and so on.
2.10 <blockquote> </ blockquote> quoted block
(1) <blockquote> separated All text between the </ blockquote> out from the regular text, often indented in the left and right sides (margins increase) , and sometimes in italics. In other words, block references have their own space.
2.11 <q> </ q> Short REFERENCE
(1) browser often add quotes around the contents of references.
(2) According to HTML 4.01 Specification, q element should be used to render the demarcation marks, that is, the text contained in the element must q quotes to begin and end.
2.12 <time> </ time> date or time
(1) If the undefined datetime attribute, date or time must be specified in the element's content.
2.13 <abbr> </ abbr> Abbreviation or Acronym
(1) are marked by abbreviation, you can browser, spell checking and search engines to provide useful information.
(2) may be used in the global <abbr> tag in the title attribute, so it can exhibit Acronym / Acronym mouse pointer moves to the upper <abbr> element full version .
Definitions 2.14 <dfn> </ dfn> special terms or phrases
(1) now popular browsers usually italicized display text <dfn> of.
(2) As with many other physical style tags based on the style and content, <dfn> tag possible less better.
2.15 <del></del>deleted text
(1) and <ins> tag used in conjunction to describe the document updates and amendments .
2.16 <ins> </ ins> insert text
2.17 <code></code>source code
(1) indicates a computer source code or other machine can read the text of.
2.18 <pre> </ pre> preformatted text
(1) is enclosed in the pre text in the element is usually reserved spaces and line breaks . The text will be presented as a monospaced font.
(2) The use of <pre> tag defined computer source code, such as HTML source code, then using symbolic entity to represent special characters, such as "<" for "<", ">" represents ">", "&" represents "&."
(3) may lead to paragraph disconnect label (e.g., title, <p> and <address> tag) must not be included in block <pre> as defined in. Despite the end of the paragraph tag some browsers will simply be interpreted as a line break, but this behavior on all browsers are not all the same.
(4) pre elements allow text styles and style may include a physical change in the content, as well as links, images and horizontal rule based.