Semantics of your HTML tags and attributes

Semantics of your HTML tags and attributes

Another important aspect of separation structure and performance is to make semantic markup to construct document content. The presence of an XHTML element means that part of the tagged content has a corresponding structural meaning, and there is no reason to use other tags. In other words, don't let CSS make an HTML element look like another HTML element, such as <div> instead of a <p> tag title.

The first is about the difference between semantics (semantics) and the default style, the default style is the browser set some of the commonly used tag forms, personally think his main purpose is to let everyone intuitive understanding of the label (markup) and attributes (attribute) the use and role, Obviously the HX series looks like a title because it has a bold and a larger font size. <strong>,<em> is used to distinguish it from other words and plays an important role. As for lists and tables, it's obvious to tell you what they do.

Secondly, the benefits of Semantic Web pages, the most important is the search engine friendly, and the good structure and semantics of your Web page content is naturally easy to be crawled by search engines, you can save a lot of effort to promote the site.

The specific semantics and uses are explained in the XHTML1.0 TAG reference, where some tags and attributes that are easily forgotten or confused are added.

<Hx>

For example:

CODE:

and do not use
<div class= "title" > Document title </div>, or <span class= "title" > document title </span> It is clear that the search engine does not consider him a headline.

<p>

Paragraph marks, you know <p> as a paragraph, you will no longer use <br/> to break lines, and do not need <br/><br/> to distinguish between paragraphs and paragraphs. The text in <p></p> will wrap automatically, and the effect of line wrapping is better than <br>. The gap between paragraphs and paragraphs can also be controlled using CSS, making it easy and clear to distinguish between paragraphs and passages. In the use of row height (line-height) is very easy to define travel spacing, and then define the first word sink effect, it is quite perfect.
For example:

CODE:
<p to build Web site design and development of the home for the purpose of the introduction of network development technology and Web site design communication as the main content. Its website content production is excellent, every day will have the member meticulously produces the tutorial release, selflessly to the Netizen to help, but also has held many design competitions and has developed many is still many websites application the related procedure. And the published works and reviews by a number of media attention and experts praise, but also established their social status, so a group of network Tongren joined the blue Ideal, become one of the largest design class site.
</p>
<p> over the years, the content of the blue ideal constantly enriched, has been some well-known domestic websites, traditional media focused on, and has been Google, Baidu, Yahoo, Sohu, Sina, excite and other major search sites collection, and in Google, Baidu, Yahoo three search engines in Simplified Chinese characters keyword "website design and development" search rankings are first, now blue Ideal has developed into the most influential web site design, development of one of the professional website. <

<ul>, <ol>, <li>

<ul> unordered list, very common to everyone widely used,<ol> ordered list is also very common. In the Web standardization process,<ul> is also used more navigation bar, the navigation bar is a list, this is completely correct, and when your browser does not support CSS, navigation links are still very good, is a little less beautiful.
For example:

CODE:
<ul>
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

CODE:
<ol>
<li> First chapter </li>
<li> Chapter II </li>
<li> Chapter III </li>
</ol>

Semantics of your HTML tags and attributes

Another important aspect of separation structure and performance is to make semantic markup to construct document content. The presence of an XHTML element means that part of the tagged content has a corresponding structural meaning, and there is no reason to use other tags. In other words, don't let CSS make an HTML element look like another HTML element, such as <div> instead of a <p> tag title.

The first is about the difference between semantics (semantics) and the default style, the default style is the browser set some of the commonly used tag forms, personally think his main purpose is to let everyone intuitive understanding of the label (markup) and attributes (attribute) the use and role, Obviously the HX series looks like a title because it has a bold and a larger font size. <strong>,<em> is used to distinguish it from other words and plays an important role. As for lists and tables, it's obvious to tell you what they do.

Secondly, the benefits of Semantic Web pages, the most important is the search engine friendly, and the good structure and semantics of your Web page content is naturally easy to be crawled by search engines, you can save a lot of effort to promote the site.

The specific semantics and uses are explained in the XHTML1.0 TAG reference, where some tags and attributes that are easily forgotten or confused are added.

<Hx>

For example:

CODE:

and do not use
<div class= "title" > Document title </div>, or <span class= "title" > document title </span> It is clear that the search engine does not consider him a headline.

<p>

Paragraph marks, you know <p> as a paragraph, you will no longer use <br/> to break lines, and do not need <br/><br/> to distinguish between paragraphs and paragraphs. The text in <p></p> will wrap automatically, and the effect of line wrapping is better than <br>. The gap between paragraphs and paragraphs can also be controlled using CSS, making it easy and clear to distinguish between paragraphs and passages. In the use of row height (line-height) is very easy to define travel spacing, and then define the first word sink effect, it is quite perfect.
For example:

CODE:
<p to build Web site design and development of the home for the purpose of the introduction of network development technology and Web site design communication as the main content. Its website content production is excellent, every day will have the member meticulously produces the tutorial release, selflessly to the Netizen to help, but also has held many design competitions and has developed many is still many websites application the related procedure. And the published works and reviews by a number of media attention and experts praise, but also established their social status, so a group of network Tongren joined the blue Ideal, become one of the largest design class site.
</p>
<p> over the years, the content of the blue ideal constantly enriched, has been some well-known domestic websites, traditional media focused on, and has been Google, Baidu, Yahoo, Sohu, Sina, excite and other major search sites collection, and in Google, Baidu, Yahoo three search engines in Simplified Chinese characters keyword "website design and development" search rankings are first, now blue Ideal has developed into the most influential web site design, development of one of the professional website. <

<ul>, <ol>, <li>

<ul> unordered list, very common to everyone widely used,<ol> ordered list is also very common. In the Web standardization process,<ul> is also used more navigation bar, the navigation bar is a list, this is completely correct, and when your browser does not support CSS, navigation links are still very good, is a little less beautiful.
For example:

CODE:
<ul>
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

CODE:
<ol>
<li> First chapter </li>
<li> Chapter II </li>
<li> Chapter III </li>
</ol>

<dl>, <dt>, <dd>

The DL is the definition list. For example, the words in the dictionary interpretation, definition can use this list.
For example:

CODE:
<dl>
<dt>Dog</dt>
<dd>a carnivorous mammal of the family canidae.</dd>
</dl>

CODE:
<dl>
<dt> Shanghai Beach </dt>
The <dd>, "Shanghai Beach", which was filmed in 1980, is the most successful and classic episode in the history of television in Hong Kong.
After the broadcast in Hong Kong, it produced a huge sensation. </dd>
<dt> Chow Yun-Fat </dt>
<dd> As with all the great movie stars, Chow Yun-Fat confirms an era, a golden age of Hong Kong cinema.
Windbreaker sunglasses, cold-blooded double gun, sunshine smile, all sealed film, when we look back, hair brother has been carved into a time of the coordinates. </dd>
</dl>

<cite>, cite, <q>, <blockquote>

Forums and blogs often use quotes from others, using <q> to mark short single-line references. The Web browser automatically recognizes the content between <q>. Unfortunately, IE is not recognized, and sometimes <q> can cause some accessibility (accessibility) problems. Because of this, some people suggest trying not to use <Q>, and manually inserting reference marks. By adding a single line of referenced content to a <span> containing the appropriate class, you can use CSS to design the reference style, but this has no semantic meaning. You can read Mark Pilgrim'shttp://diveintomark.org/archives/2002/05/04/the_q_tag about handling <q> related issues.
<blockquote> should be used for lengthy references, either for a period or several paragraphs. CSS can be used to define the style of a reference. Note that an article cannot be placed directly in <blockquote>, and that the referenced content must also be included in an element, usually <p>. Property cite can be used with <q>, or in conjunction with <blockquote>, to provide the source address of the referenced content. It is important to note that if you use <span> instead of <q> tag references, you cannot use the cite attribute. For example:

CODE:
<cite>designing with Web standards</cite> is a excellent book by Jeffrey Zeldman.

CODE:
<p> <cite> Confucius </cite> Yue:<q> Learn without thinking is a blind, thinking and not learning is almost </q>.</p>

CODE:
<p>the says that <q cite= "http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1 ">the presentation of phrase elements
Depends on the user agent.</q>.</p>

CODE:
<blockquote cite= "http://www.w3cn.org/" >
<p> "Most of us have a deep experience, and every time a major browser version is upgraded, the site we just built may become obsolete,
We need to upgrade or rebuild the site again. For example, the 1996-1999 typical "browser wars",
To be compatible with Netscape and IE, the site has to write different code for both browsers. The same,
Whenever new network technology and interactive devices emerge, we also need to make a new version to support this new technology or device,
For example, WAP technology that supports mobile internet. Similar problems abound: the website code is bloated, multifarious waste our large amount of bandwidth;
A browser-specific DHTML effect masks some potential customers, code that is not easy to use, and people with disabilities cannot browse the site, and so on.
This is a vicious circle, is a huge waste. "</p>
</blockquote>

<em>, <strong>

The <em> is used as a,<strong> to emphasize the emphasis. Most browsers use italics to show emphasis, and bold to show the emphasis, however, this is not necessary, if it is to determine how the emphasis content display, the best way is to use CSS to define their performance. When all you want is a visual effect, don't use emphasis. And if you want to emphasize but still feel that the bold or italic visual effect is not so good, especially italic for Chinese, then you can define some other more eye-catching style to achieve the emphasis of the effect.
For example:

CODE:
<p><em> emphasis </em> text is usually shown in italics,
However, the <strong> special emphasis </strong> text is usually shown in bold. </p>

<table>, <td>, <th>, < caption >, summary

Tables in XHTML should not be used for layout. However, if it is to mark the data of the list, you should use the table. <th> for table headers, attribute Summar to summary,<caption> label for the head section,<thead> label for table header,<tbody> label as table body content,<tfoot> The label is the tail of the table.
You can also use scope to replace the headers property, marking cells that contain header information, where the values are as follows:
Row indicates the current cell, providing related header information for the row that contains the current cell.
Col indicates the current cell to provide the corresponding header information for the column specified by the current cell.
Rowgroup indicates the current cell, providing related header information for the remaining row groups that contain the current cell.
Colgroup indicates the current cell, providing the corresponding header information for the remaining column groups specified by the current cell.
ABBR is used to define the abbreviated name in the header cell, and if it is not defined, the default cell content is an abridged form.
For example:

CODE:

<table id= "mytable" cellspacing= "0" summary= "the technical specifications to the Apple PowerMac G5 Series" >
<caption>table 1:power Mac G5 Tech Specs </caption>
<tr>
<th scope= "col" abbr= "Configurations" class= "NOBG" >Configurations</th>

<th scope= "col" abbr= "Dual 1.8" >dual 1.8ghz</th>
<th scope= "col" abbr= "Dual 2" >dual 2ghz</th>
<th scope= "col" abbr= "Dual 2.5" >dual 2.5ghz</th>
</tr>
<tr>
<th scope= "Row" abbr= "Model" class= "Spec" >Model</th>
<td>M9454LL/A</td>

<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope= "Row" abbr= "G5 Processor" class= "Specalt" >g5 processor</th>
<TD class= "alt" >dual 1.8GHz PowerPC g5</td>
<TD class= "alt" >dual 2GHz PowerPC g5</td>

<TD class= "alt" >dual 2.5GHz PowerPC g5</td>
</tr>
<tr>
<th scope= "Row" abbr= "Frontside Bus" class= "spec" >frontside bus</th>
<td>900mhz per processor</td>
<td>1ghz per processor</td>
<td>1.25ghz per processor</td>

</tr>
<tr>
<th scope= "Row" abbr= "L2 Cache" class= "Specalt" >level2 cache</th>
<TD class= "alt" >512k per processor</td>
<TD class= "alt" >512k per processor</td>
<TD class= "alt" >512k per processor</td>
</tr>

</table>

<dfn>

CODE:
<P><DFN title= "Microsoft web browser" >internet explorer</dfn> is the most popular browser used Underwat Er.</p>

<ins>, <del>

Know del, do not use <s> do delete line again, with Del obviously more semantic. And Del also has cite and datetime to indicate the reason for the deletion and the time of deletion. INS is a representation of inserts and also has such properties.
For example:

CODE:
<p>it really was <ins cite= "rarara.html" datetime= "20031024" >very</ins> good.</p>
<code>

The representation is the computer code. The default style is font-typed. Technical forums and blogs are often encountered.
For example:

CODE:
<code>p{margin:2px 0;} </code>

<abbr>, <acronym>

The <abbr> tag is the abbreviation for the,<acronym> label on the Web page. (Note: Here the abbreviation and abbreviation are separated, the short range is larger than the abbreviation, take the first letter of contraction
Write <acronym> label) Windows IE6.0 The following browsers do not support <abbr> tags. In IE, you can apply CSS to <acronym> but not apply to <abbr> tags,
IE will display a prompt for the title property of the <acronym> tag, but will ignore the <abbr> tag.
Solution See: http://www.w3cn.org/article/translate/2005/115.html
For example:

CODE:
<abbr title= "cascading Style Sheets" >CSS</abbr>

CODE:
<acronym title= "cascading Style Sheets" >css</acronym >

Alt Property and Title property

The Title property is used to provide additional descriptive information for the element the title attribute can be used for all tags except base,basefont,head,html,meta,param,script and title. But it's not necessary.
The Alt property is a user agent (UA) that cannot display images, forms, or applets, specifying alternate text. The language of the alternate text is specified by the lang attribute.

CODE:

CODE:
<a href= "http://www.jluvip.com/blog/article.asp?id=260" title= "JS get radio button data" >JS get radio button Data </a>