HTML5 New Semantic Tags

1. What is a semantic tag?

So what is called semantic, the popular point is: Understand the use of each label (under what circumstances I can use this label is reasonable) for example,

The title of the article on the page can be used as the title tag, the column name of each column on the page can also use the title tag.

The paragraph in the article should be placed in the paragraph label , in the article has the want to emphasize the text, you can use the EM tag to express emphasis and so on.

2. Why do I make a semantic label?

1. More easily indexed by search engines.

2. It is easier for screen readers to read the page content.

3. Can better reflect the theme of the page

4. Better compatibility, support more network equipment

3.html Semantic Tags

1):<a> Tags: implementing hyperlinks

Emphasis: The role of the title property, the mouse over the link text will display the text content of this property. This property in the actual web page Development role is very large, the main convenience of the search engine to understand the content of the link address (more semantic-friendly)

2):

3):

There are 6 title labels, one heading, h1、h2、h3、h4、h5、h6 two headings, three titles, four titles, five headings, and six headings. and decreases on the basis of importance. is the highest level.


4):<strong> and <em> Tags: special emphasis on a few words

But there is a difference between the two in the tone of emphasis,:<em> stressed that,<strong> expressed a stronger emphasis. And in the browser <em> by default in italics ,,<strong> is indicated in bold .

Two tags compared to the current domestic front-end programmers prefer to use <strong> to emphasize.

5):<q> Tags: short text quote

Note that the text you want to reference does not have double quotes , and the browser automatically adds double quotes to the Q tag

6):<blockquote> tag: Long text reference

Note The browser's parsing of <blockquote> tags is indented style

7):<address> Tag: Add address information to Web page

8):<ul> Tags: unordered list

9):<ol> tag: Ordered list

:<caption> Label: Add a title and a summary to the table

The content of the summary is not displayed in the browser. Its role is to increase the readability of the table (semantic), so that the search engine to better understand the table content, but also to enable screen readers to better help special users to read the table content.

Syntax:<table summary="表格简介文本">

Headings are used to describe the contents of the table, where the caption appears: Above the table.

syntax:<caption> title text </caption>

4.HTML5 Semantic Tags

1): Article tag: Load displays a separate article content.

For example, a full forum post, a website news, a blog article, and so on, a user comments and so on artilce can be nested, the inner layer of the artilce external layer of the article tag has a subordinate relationship.

For example, a blog post can be displayed in article, and some comments can be embedded in article form.

<article>
2): section tab: Defines the sections in the document. such as chapters, headers, footers, or other parts of the document.
Instance:
<section>   
3): Aside tag: Used to load the contents of a non-body class. Examples include ads, groups of links, sidebar, and so on.
4): Hgroup tag: Used to group the title Element (H1-H6) of a Web page or section.
For example, in a section where you have successive H-series label elements, you can enclose them in hgroup.
5): Header tag: Defines the page composition of the document, usually some guidance and navigation information.
6): Footer tag: Defines the footer of a section or document.
Typically, the element contains the creator's name, the date the document was authored, and/or contact information.
Instance:
<footer>©2012 Baidu to use before must read Beijing ICP Certificate No. 030173 </footer>
7): Nav tag: Navigation link is placed in nav tab.
The Nav tab should include some of the main navigation links in the current page.
For example, in the footer display a site navigation links (such as the homepage, Service information page, copyright information page, etc.), you can use the nav tag, of course, this is not necessary.
8): Time tab: Defines the period (24 hour) or date of the Gregorian calendar, and the time and timezone offset is optional.
The element is able to encode dates and times in a machine-readable manner, and search engines can generate smarter search results
9): Mark tag: Defines a marked text. Use the <mark> tag when you need to highlight text.
: Figure Tags: Specify separate stream content (images, charts, photos, code, etc.).
The content of the figure element should be related to the main content, but if deleted, it should not affect the flow of the document.
One): Figcaption Label: Defines the caption of the figure Element (caption).
The "figcaption" element should be placed in the position of the first or last child element of the "figure" element.
Instance:
<figure> <figcaption> Beauty Pictures </figcaption> </ Figure>
HTML5 New Semantic Tags