Semantic search engine optimization of HTML tags

In order to make our website better by the search engine crawl ingest, more natural to get higher traffic,

The semantics of Web site tagging is particularly important. The so-called label semantics, refers to the meaning of the label.
To better understand the semantics of labels, let's look at the following example:

<table>     <tr>        <td> Entertainment </td>        <td> project spending </td>    </tr>    <tr>        <td> Dinner </td>        <td>200 $ </td>    </tr></table>

The above code is a clear example of the lack of semantic labeling, in order to make its structure clearer, the correct approach is as follows:

<table>    <caption> Spending statistics </caption>    <thead>        <tr>            <th> Entertainment Projects </th>            <th> Project spending </th>        </tr>    </thead>    <tbody>        <td > Dinner </td>        <td>200 </td>    </tbody></table>

which

<caption>: title of the table;
<thead>: Table header of a table;
<th>: column header for a column of a table.

Yes, the purpose of labeling semantics is to search engine friendly, with good structure and semantics our web content will naturally

Easy to be crawled by the search engine, this conforms to the search engine collection Rules of practice, the promotion of the site can save a lot of Kung fu, and

And maintainability is higher because the structure is clear and easy to read. This is also search engine optimization seo (Search engine Optimization)

An important step, of course, about SEO far more than that.

So what we're going to do is semantic our HTML tags and attributes, such as:

Div semantics: Division (delimited)
Span semantics: span (range)
OL semantics: Ordered list (sorted)
UL semantics: Unordered list (unordered lists)
Li semantics: List item (listing items)

1.

2.<p>

Paragraph mark, know <p> as a paragraph, you will no longer use <br/> to line up, and do not need <br/><br/> to distinguish between paragraphs and

Paragraph. The text in <p></p> wraps, and the line wrap effect is better than <br>.

3.<b>, <em> and <strong>

<b> tag Semantics "bold"

<em> tag semantics for "emphasis"

The <strong> tag semantics are "stronger emphasis" and the EM defaults are in italics, and the strong is indicated in bold.

When we know the semantics of these three tags, when doing seo it is good to decide which to use to emphasize important keywords,

Emphasis on <em> and <strong>, pure and bold <b>.

4.<ul> tags, <ol> tags, <li> tags

<ul> tag semantics for defining unordered lists

<ol> tag semantics for defining ordered lists

<li> tag semantics for defining list items

So when it comes to the list of items, you should use <ul><li> or <ol><li> (or <dl><dt><dd> to layout) instead of <table > or <p> even <span>.

5.<dl> tags, <dt> tags, <dd> tags

<dl> tag semantics defines a list of definitions

<dt> tag semantics defines the items in the definition list (that is, the term part)

<dd> tag semantics defines the definition of an entry in the definition list

So, when we use a list with headings, we can implement the <dl><dt><dd> custom list

6.<span> Label

The semantics of <span> tags are used to combine inline elements in a document

(You should also distinguish between <span> and <div>,<div> is a block level element,

<span> is an inline element where the contents of the former are automatically wrapped, and the latter is not wrapped automatically.

7.<q>, <blockquote>, <cite>

The semantics of <q> tags are used to mark short single-line references, and Web browsers automatically identify content between <q>

The semantics of the <blockquote> tag are used to mark a lengthy reference to a paragraph or several paragraphs.

<cite> tags can be used with <q> or with <blockquote> to provide the source address of the referenced content.

See an example:

<p> <cite> Confucius </cite> Yue:<q> have friends from afar, </q>.</p><blockquote cite= "/http www.w3cn.org/"> <p>& #8220; Most of us have a deep experience, and whenever a major browser version is upgraded, the site we just created can become obsolete and we need to upgrade or re-build the site again. For example, the typical "browser wars" of the 1996-1999, in order to be compatible with Netscape and IE, the site had to write different codes for both browsers. Similarly, whenever new network technologies and interactive devices appear, we also need to make a new version to support this new technology or new device, such as WAP technology that supports mobile internet. Similar problems endless: The website code is bloated, the complexity wastes our large amount of bandwidth, the DHTML effect for a certain browser, blocking some potential customers, hard-to-use code, the disabled people can not browse the site and so on. This is a vicious cycle, a huge waste. & #8221;</p></blockquote>

8.<table>, <th>, <td>, <caption>

<table> the semantics of tags for defining HTML tables

The semantics of <th> tags define the header cells within the table

<caption> label semantics for defining table headings

9.<button> tags, <input> tags, <textarea> tags

<button> label semantics for defining a button

The semantics of <input> tags are used to collect user information, and depending on the type attribute value, the input field

There are many forms. The input field can be a text field, a check box, a masked text control, a radio button

button, buttons, and so on.

<textarea> tag semantics for text input controls that define multiple lines

The button control provides more powerful functionality and richer <input type= than the "button" >

Content. All content between <button> and </button> tags is the content of the button, including

Any acceptable body content, such as text or multimedia content.

10.<label> Label

<label> tag semantics for defining callouts (tags) for input elements

11.<ins>, <del>

The semantics of the <ins> tag are defined as the text that has been inserted into the document.

The semantics of <del> tags are defined as text that has been deleted in the document.

<ins> is used together with <del> to describe updates and corrections in the document. If you know del, don't use it again.

<s> made the strikethrough, with Del obviously more semantically. And Del also comes with cite and datetime to table

The reason for deletion and the time of deletion. INS is a representation of an insert, and also has such properties.

Semantic search engine optimization of HTML tags