HTML5 semantic tags and html5 semantic tags

HTML5 semantic tags and html5 semantic tags

1. What is semantic tag?
1. What is semantics?
In layman's terms, an external number is given to the div, for example,
The title of an article on the web page can be called his title, and each article on the web page can be called his article.

2. Why use semantic tags?
(1). It is easier to be indexed by search engines.
(2) it is easier for the screen reader to read the webpage content.
(3). It can better reflect the theme of the page.
(4). better compatibility and support for more network devices.
Ii. common semantic tags

Header. the header of the direct child element under the body is generally used to display the introductory information of the page, such as the website name, logo, or navigation bar nav.

<Header> 

The nav element represents the navigation link area of the page. Defines the main navigation part of a page.

1): article label: This label is most likely to be confused with section and div. In fact, article represents a self-contained content in the document, page, or website, the purpose is to allow developers to develop or reuse data independently. The structure of article is generally as follows:

    <article>     

Article applications include Forum posts, blog articles, user comments, and interactive widgets. (Special section) except its content, article has a title (usually in the header) and a footer.

2): hgroup label: this label combines the titles of a webpage or section. It is much easier to put a bunch of titles into a basket.

3): cite Tag: used to define titles of referenced content from books or magazines. Other information, such as authors and dates, is not allowed.

4): time Tag: Generally, this tag consists of three time stamps that can be recognized by machines. The time stamp must be in the format of a number (year, month, and day) separated by minus signs. If you increase the time, add the letter T after the date and the time value in the 24-hour format and the time zone offset, for example, datetime = "2012-2-15T22: 49: 40 + 08: 00 "text content that can be recognized by people: the format is random, as long as you can understand. An optional pubdata flag: pubdata is a Boolean value. If necessary, write the attribute name to pubdata. But for the sake of appearance, we can also write pubdata = "". Note that if the time is in an article, it indicates the release time of this article; if it is not in article, it indicates the release time of the entire document.

5): section label: indicates the section or segment in the document. The section can refer to the section based on the topic in an article; A "section" can be a group on a page.
Section usually also has a title, although sections in html5 will automatically downgrade the title h1-h6, but it is better to manually downgrade them.

6): blockquote label: this label defines the block reference from another source.

All texts between <blockquote> and </blockquote> are separated from common texts, which are often indented on both sides of the left and right, and sometimes italic words are used. That is to say, block references have their own space.

7): figure labels: define independent stream content (images, charts, photos, Code, etc ).
The content of the figure element should be related to the main content, but if it is deleted, it should not be affected by document abortion.

8): figcaption label: Define the title of the figure element ).
The "figcaption" element should be placed at the first or last child element of the "figure" element.

9): table tag semantics: The table TAG provides thead, tfoot, and tbody elements that group rows in the table. When creating a table, you may want to have a title row, some rows with data, and a total row at the bottom. This division enables the browser to support table body scrolling independent of the table title and footer. Note: If you use thead, tfoot, and tbody elements in a table, you must use all the elements in the order of thead, tbody, and tfoot, in this way, the browser can display the footer before receiving all the data.

10): The aside element is included in the article element as the ancillary information of the main content. The content can be related to the relevant information, tags, ranking explanation, and so on. (Special section)

11): code: This label is a phrase label used to define the computer code text.

12): pre label: pre can define pre-formatted text. Text enclosed in the pre element usually contains spaces and line breaks. The text is also displayed as an equal-width font. A common application of pre tags is to represent source code.

The relationship between the code tag and the pre Tag is similar to that of the application. They are mainly used to display the source code in the computer in the browser. However, there is a big difference between the two. One function of the code tag implies that the text surrounded by the browser code tag is the computer source code, and the browser can make its own style processing, the pre label does not have this function, but the pre label can retain spaces and line breaks in the text. The spaces and line breaks in the text are the necessary styles for computer source code display. In this case, we can imagine whether the code tag and the pre Tag can be used together? The answer is yes. code labels and pre labels can be nested, but you must pay attention to the nesting order of the two.

13): dialog Tag: defines a dialog box or window, which makes it easy to use the pop-up window.
By default, the browser (Chrome 37 + and Opera 27 +) supported by this label will present the <dialog> element in a hidden form, only the show () or showModal () calls of JavaScript () the method is displayed, and the close () method is called to hide it again. This method is usually executed on a click event.

3. Tail -- footer

<Footer> <p> copyright & copy @ </p> <address> I am an address </address> </footer>

Adderss Tag: This tag defines the contact information of the Document Author or owner, which is usually italic. Most browsers add line breaks before and after the element. If the <address> element is inside the <article> element, it indicates the contact information of the author or owner of the article. Generally, add the address element to the header or bottom of a webpage. Note that the <address> label should not be used to describe the postal address, unless this information is part of the contact information.

Iii. Summary
Of course, there are more and more semantic tags. Here we only present the tags that may be common, and we will not list them here.
Finally, I will show a family happiness to end this note: