Make tagging a habit of semantics

has been the understanding of the meaning of the ambiguity is vague, to tell the truth is not sure what it is used, today finally took seriously to see the next, long insight! Sum up to study and study together! We have to let the label semantics become a habit! The popular understanding of semantics:

1, in the web design process, we often hear the semantics of the term, the HTML tag semantic design thinking is to give a piece of code content and the most appropriate label, so that whoever can read this paragraph of what is.

2. Beginners can understand semantics to make it easier for developers and machines to read and understand code!

3, remember that the purpose of semantics is to facilitate the reading of machines and developers, and not to change the page style!

An example of semantic interpretation:

A Web page is like a house, HTML structure is a side of the wall (or frame), and the label is a block of bricks, bricks should be placed orderly, neat, the wall will be firm. The final CSS is a decorative material, the beauty of the United States depends on her. Therefore, a good web page, both to provide a clean, structured HTML, but also the need for the ultimate CSS beautification.

From the above also explained that the label semantics is extremely important, HTML each tag has its own semantics, has its own scope of application. But often we are ignored or abused by us, for example: in a page <div> with dozens of or even hundreds, this is a meaningless tag, just represent a layer, very detrimental to the maintenance of the later; so we need semantic editing and use of tags, so that a page of the structure of the framework more reasonable, Rugged, organized and easy to maintain!

There are countless reasons for you to semantically structure your HTML:

1, remove or style lost when the page can be rendered clear structure.

HTML itself is not performance, we see for example

2.(If the visitor has a visual impairment) The screen reader will "read" your page exactly according to your tag, and will automatically parse it according to the semantics of the tag . If you use a semantic tag, the screen reader will judge the content of the page based on your tag, rather than the spelling of a letter.

3, PDA, mobile phones and other devices may not be like a normal computer browser to render the Web page (because these devices are weak in support of CSS) using semantic tags can ensure that these devices in a meaningful way to render the Web page. Ideally, the task of viewing the device is to match the conditions of the device itself to render the page.

4, search engine crawler also relies on the tag to determine the context and the weight of the individual keywords. Search engine crawlers are also "visitors" to the site and are now extremely valuable users. Without them, search engines will not be able to index your site, and then general users will be hard to come over to visit.

5, easy to team development and maintenance in the team we all follow the same standard, can reduce a lot of differentiated things, convenient development and maintenance, improve development efficiency, and even achieve modular development.

6 、.............................

HTML Tag Semantics Summary

For faster and better use of label semantics, the following table lists all the HTML tags and descriptions of the tags. The following list is in alphabetical order, with new: the label in HTML5.

label	Description
<!–...–>	Defines a comment.
<! Doctype>	Defines the document type.
<a>	Defines a hyperlink.
<abbr>	Define abbreviations.
<acronym>	Not supported in HTML 5. Defines the initials.
<address>	Defines the address element.
<applet>	Not supported in HTML 5. Defines an applet.
<area>	Defines the area in the image map.
<article>	Define article.
<aside>	Define content beyond the content of the page.
<audio>	Defines the sound content.
<b>	Defines bold text.
<base>	Defines the base URL for all links in the page.
<basefont>	Not supported in HTML 5. Please use CSS instead.
<bdi>	Defines the text orientation of the text so that it is set out of the direction of the text around it.
<bdo>	Defines the direction in which the text is displayed.
<big>	Not supported in HTML 5. Defines large text.
<blockquote>	Defines a long reference.
<body>	Defines the BODY element.
<br>	Inserts a newline character.
<button>	Defines the button.
<canvas>	Define the graphic.
<caption>	Defines the table title.
<center>	Not supported in HTML 5. Defines the centered text.
<cite>	Defines a reference.
<code>	Defines the computer code text.
<col>	Defines the properties of a table column.
<colgroup>	Defines the grouping of table columns.
<command>	Defines a command button.
<datalist>	Defines a drop-down list.
<dd>	A description of the definition definition.
<del>	Defines the deletion text.
<details>	Defines the details of the element.
<dfn>	Define the definition of the project.
<dir>	Not supported in HTML 5. Defines a list of directories.
<div>	Defines a section in the document.
<dl>	Defines a list of definitions.
<dt>	Defines the defined project.
<em>	Defines the accent text.
<embed>	Define external interaction content or plug-ins.
<fieldset>	Define FieldSet.
<figcaption>	Defines the caption of a figure element.
<figure>	Defines the grouping of media content, as well as their titles.
<font>	Not supported in HTML 5.
<footer>	Defines the footer of a section or page.
<form>	Define the form.
<frame>	Not supported in HTML 5. Defines a child window (frame).
<frameset>	Not supported in HTML 5. Defines the set of frames.
	Define Heading 1 to heading 6.
	Defines information about the document.
	Defines the header for a section or page.
	Defines information about a section in a document.
	Defines a horizontal line.
	Defines an HTML document.
<i>	defines italic text.
<iframe>	Defines a child window (frame) within a row.
	Define the image.
<input>	Defines an input field.
<ins>	Defines the insert text.
<keygen>	Defines the build key.
<isindex>	Not supported in HTML 5. Defines the input fields for a single line.
<kbd>	Defines the keyboard text.
<label>	Defines a callout for a form control.
<legend>	Defines the caption in the fieldset.
<li>	The item that defines the list.
<link>	Defines a resource reference.
<map>	Defines an image map.
<mark>	Defines the marked text.
<menu>	Defines a menu list.
<meta>	Defines meta information.
<meter>	Define measures within a predefined range.
<nav>	Defines the navigation link.
<noframes>	Not supported in HTML 5. Defines the Noframe section.
<noscript>	Defines the NoScript section.
<object>	Defines the embedded object.
<ol>	Defines an ordered list.
<optgroup>	Define an option group.
<option>	Defines the options in the drop-down list.
<output>	Defines some types of output.
<p>	Defines a paragraph.
<param>	Define parameters for the object.
<pre>	Defines the pre-formatted text.
<progress>	Defines the progress of any type of task.
<q>	Defines a short reference.
<rp>	Defines if the browser does not support the content displayed by the Ruby element.
<rt>	Defines the interpretation of Ruby annotations.
<ruby>	Define Ruby annotations.
<s>	Not supported in HTML 5. Defines the text to add strikethrough to.
<samp>	Define the sample computer code.
<script>	Define the script.
<section>	Defines a section.
<select>	Defines an optional list.
<small>	Renders the margin note (side comments) as small text.
<source>	Defines the media source.
<span>	Defines a section in a document.
<strike>	Not supported in HTML 5. Defines the text to add strikethrough to.
<strong>	Defines the accent text.
<style>	Defines a style definition.
<sub>	Defines the subscript text.
<summary>	Defines the caption of the details element.
<sup>	Defines the superscript text.
<table>	Define the table.
<tbody>	Defines the body of the table.
<td>	Defines a table cell.
<textarea>	Define TEXTAREA.
<tfoot>	Defines a footnote to the table.
<th>	Defines a table header.
<thead>	Defines a table header.
<time>	Defines the date/time.
<title>	Defines the title of the document.
<tr>	Defines a table row.
<track>	Defines a text track used in a media player.
<tt>	Not supported in HTML 5. Defines the typewriter text.
<u>	Not supported in HTML 5. Defines the underlined text.
<ul>	Defines an unordered list.
<var>	Defines a variable.
<video>	Define the video.
<xmp>	Not supported in HTML 5. Defines the pre-formatted text.

Recommended Links:

Http://www.jiawin.com/tag-semantics-habit (Simple Rough)

Http://www.5icool.org/a/201006/537_4.html (in-depth understanding)

Make tagging a habit of semantics