Address this question: https://github.com/YvetteLau/Step-By-Step/issues/8
semantic meaning as the name implies, semantic HTML5 refers to the rational use of semantic tags to create the page structure, such as header, footer , nav, from the label which can intuitively know the role of the label rather than abuse div.
Semantic advantages are:
- Clear code structure, easy to read, which will help develop and maintain
- Improve for the experience, when the pattern fails to load, clear page structure
- Other convenient analytical device (such as screen readers) render the page based on semantics.
- Conducive to search engine optimization (SEO), search engine crawlers will be given different weights depending on the label
Semantic tags are:
- title: mainly used for information describes the head of the page
- header: header definition document
- nav: mainly used for page navigation
- main: The main provisions of the document's contents. For documents, it should be unique. It should not contain duplicate content appears in the document, such as the sidebar, navigation, copyright information, stop signs or search form.
- article: independent, self-contained content
- h1 ~ h6: custom title
- ul: used to define an unordered list
- ol: used to define an ordered list
- address: the definition of a document or article of author / owner's contact information.
- canvas: for drawing an image
- dialog: you define a dialog box or window acknowledgment
- aside: which define the content outside its contents.
<aside>The content can be used as sidebar article. - section: define the document section (section, section). Such as other chapters, headers, footers, or document.
- figure: the provisions of a separate stream content (images, diagrams, photos, code, etc.). Content elements should figure associated with the main content, but if it is deleted, it is not to deal with the document flow impact.
- details: Description document or a certain part of the document details
- mark: mark the text with meaning.
Semantic Applications
For example, visual labels, page structure constructed following:
Reproduced in https://www.jianshu.com/p/605386179154