HTML tags and attributes of the Semantic
Separation of structure and performance is another important aspect of the use of semantic structure of the markings to document content. XHTML the existence of an element that is marked on the content of the corresponding part of the significance of the structure, there is no reason to use other markers. In other words, do not let a CSS to HTML element looks like another HTML elements, such as use to replace <div> <p> mark heading.
First, on semantics (Semantics) and the difference between the default style, style is the default browser settings and the performance of some commonly used form of tag, personally think that his main aim is to make everyone intuitive understanding of labels (markup) and attributes (attribute) use and role, it is obvious Hx Series looks like heading, bold and large they have the name. <strong>, <em> Used to distinguish it from other text, that played a role. As for the list and form very obvious to tell you what they are doing.
Second, the semantics of the benefits of the Web, the most important thing is the search engine friendly, a good structure and semantics of the content of the sites you naturally grab easily search engine, you will be able to promote the site to save a lot of effort.
And the use of concrete in the semantic, XHTML1.0 TAG have been in reference to note here will be easily forgotten or confused some of the TAGS and attributes to be added.
<Hx>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, Heading use, and based on the importance of decreasing. <h1> Is the highest grade.
For example: 
Example Source Code [CSS tutorial] <h1> Document Title </ h1>
<h2> Sub-heading </ h2>
Instead use
<div Class="title"> document title </ div>, or <span class = "title"> Document Title </ span>. Clearly search engine for the latter will not think that he is heading.
<p>
Paragraph markers, known as <p> paragraphs, you will no longer use <br /> to the exchange trip, and does not require <br /> <br/> to distinguish between paragraphs and paragraphs. <p> </ P> The text will be automatically newline, and for the trip better than <br>. Paragraphs and paragraphs can be a gap between the use of CSS to control, it is easy and clear the distinction between the paragraphs and paragraphs. In the use of high-line (line-height) is the definition of easy travel distance, the first re-definition of the word, such as subsidence effects, it quite perfect.
For example: Example Source Code [CSS tutorial] <p> in the use of high-line (line-height) is the definition of easy travel distance, the first re-definition of the word, such as subsidence effects, it quite perfect. </ P>
<ul>, <ol>, <li>
<ul> Disorderly List, it is common to use a wide range of people, <ol> orderly list is quite common. In the web standardization process, <ul> been more used for navigation of the original is a list of navigation, it is completely correct, but when your browser does not support CSS time, navigation links are still good so is aesthetics Chaileyidian.
For example: Example Source Code [CSS Guide ul] <>
<li> Item 1 </ li>
<li> Item 2 </ li>
<li> Item 3 </ li>
</ Ul> Example Source Code [CSS Guide ol] <>
<li> Chapter 1 </ li>
<li> Chapter 2 </ li>
<li> Chapter III </ li>
</ Ol>
<dl>, <dt>, <dd>
Dl is the "definition of the list." For example: inside of the interpretation of the word, the definition can use this list.
For example: Example Source Code [CSS Guide dl] <>
<dt> Dog </ dt>
<dd> A carnivorous mammal of the family Canidae. </ Dd>
</ Dl> Example Source Code [CSS Guide dl] <>
<dt> On the beach </ dt>
<dd> The shooting in 1980 "on the beach"å ªç§°Hong Kong is the most successful in television history, the most classic drama.
After that broadcast in Hong Kong, produced a huge sensational effect. </ Dd>
<dt> Chow Yun-fat </ dt>
<dd> And all the great movie stars like Chow Yun-fat confirms an era, the golden age of a Hong Kong film.
Windbreaker Sunglasses, cold-blooded Double Lance, sunny smile, sealed film, when we look back on searching look at the deep Colombia has been an era coordinates. </ Dd>
</ Dl>
<cite>, Cite, <q>, <blockquote>
Forum and blog often use other people's words quoted by <q> to mark the one-way short quote. Web browser automatically identifies In "q> between content. Unfortunately, IE can not be identified, and sometimes it can lead to some <q> will visit (Accessibility) problem. Because of this, some people suggested that as far as possible not to use <q>, invoked manually insert markers. Included in a category appropriate to add single <span> the citations, it can be used to reference design to CSS style, but this no semantic significance. You can read Mark Pilgrim wrote The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag) on the treatment <q> related issues.
For those who for some or a good quote paragraphs long, they should use the <blockquote>. CSS can be used to invoke the style definition. Note, a section of the article is not directly on <blockquote> in the use of the content must also be included in the element, usually <p>. Attributes and can cite <q> together with, and can be used in conjunction with <blockquote>, provide citations to the source address. It must be noted that if you use <span> <q> marker used to replace the contents, then you will not be able to cite the use of the property.
For example: Example Source Code [CSS Guide cite] <> Designing with Web Standards </ cite> is an excellent book by Jeffrey Zeldman. Example Source Code [CSS tutorial] <cite> Confucius <p> </ cite> said: <q> without thought is of note that, without thinking of the perilous </ q>. </ P> Example Source Code [CSS tutorial] <p> The W3C says that <q cite = "http://www.w3.org/TR/REC-html40/
Struct / h-9.2.1 text.html # "> The presentation of phrase elements
Depends on the user agent. </ Q>. </ P> Example Source Code [CSS tutorial] <blockquote cite = "http://www.w3cn.org/">
<p> "Most of us have a profound experience, whenever the mainstream browser version of the upgrade, we have just built on the site may become outdated,
We need to be upgraded or re-construction site again. For example, 1996-1999 typical "browser wars"
To compatible with Netscape and IE, the site had to write two different browser code. Similarly,
Whenever a new network technology and the emergence of interactive equipment, we also need to have support for the production of a new version of this new technology or new equipment,
For example, support for the WAP mobile Internet technology. Similar problems endless: Site code bloated and complicated our waste a lot of bandwidth;
For a browser DHTML effects, shielding some potential customers; difficult to use the code for the disabled, unable to visit the website and so on.
This is a vicious circle, is a tremendous waste. "</ P>
</ Blockquote>
<em>, <strong>
<em> Are used to emphasize that, as <strong> is the emphasis. Most browsers used in italics show that the contents of a bold to show that the emphasis on content, however, this is not necessary, if it is in order to determine that the content is displayed, the best way is to use CSS to define their performance . When you want to do is the visual effect, they do not use stressed. And if you want to think that but it is not bold or italics visual effects not so good, especially the Chinese, italics, and then you can compare the definition of some of the other eye-catching styles to achieve that effect.
For example: Example Source Code [CSS tutorial] <p> <em> stressed </ em> text is usually in italics,
However, <strong> special emphasis </ strong> text is usually bold. </ P>
<table>, <td>, <th>, <Caption>, summary
XHTML forms should not be used to the layout. However, if the list of tags to data on the forms should be used. <th> Form for the title, attributes summar for summary <caption> label headed by the Department that <thead> tag as the head forms, <tbody> labelled as the main form, <tfoot> tag as the form tail.
It also can use the scope can be used to replace the headers attributes, marking the first table contains information cells, in which the value of the contents are as follows:
Instructions current row cell, contain the current cell lines provide relevant information table first.
Col instructions current cell, the light of the current cell specified in the corresponding table headers.
Rowgroup current cell instructions for the cell containing the remainder of the current group to provide information related to the first table.
Colgroup instructions current cell, the light of the current cell in the rest of the designated group with the corresponding header information.
Abbr definition table for the first initials in the cell name, if there is no definition of the properties, will be the default cell content for the abbreviated form.
For example: Example Source Code [CSS tutorial] <table id = "mytable" cellspacing = "0" summary = "The technical specifications of 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>
See results: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
<dfn> Example Source Code [CSS tutorial] <p> <dfn title="Microsoft web browser"> Internet Explorer </ dfn> is the most popular browser used underwater. </ P>
<ins>, <del>
Del know, do not reuse <s> a strikeout to do with del obviously more of semantics. But also with del datetime to cite and that the deletion of reasons, as well as the deletion of time. Ins that is inserted, such attributes.
For example: Example Source Code [CSS tutorial] <p> It really was <ins cite="rarara.html" datetime="20031024"> very </ ins> good. </ P>
<code>
Said that the computer code. The default font style for the fight. Technical Forum and the blog frequently encountered.
For example: Example Source Code [CSS tutorial code] <> p (margin: 2px 0;) </ code>
<abbr>, <acronym>
<abbr> Label is that the short title of web pages, <acronym> from the first label is the acronym. (Note: here the acronym and abbreviation separate terms, or scope than initials, the first letter from the acronym used <acronym> Labelling) following the Windows IE6.0 browser not support <abbr> labels. In IE, you can be applied to the CSS <acronym> but not applied to <abbr> labels,
IE will <acronym> labels title attribute displays a prompt, but it will overlook <abbr> labels.
Solution See: http://www.w3cn.org/article/translate/2005/115.html
For example: Example Source Code [CSS tutorial] <abbr title = "Cascading Style Sheets"> CSS </ abbr> Example Source Code [CSS tutorial] <acronym title = "Cascading Style Sheets"> CSS </ acronym>
Alt attributes and attribute title
Title to property used to provide additional elements of information that the title attribute can be used in addition to base, basefont, head, html, meta, param, and the title of the script all the labels. But it's not necessary.
Alt attribute to not display images, form or applets, the user agent (UA), the designated replacement text. Replace the language of text designated by the lang attribute. Example Source Code [CSS tutorial] <img src = "/ img / common / logo.gif" width = "90" height = "27" alt = "bluediea.com"> Example Source Code [CSS tutorial] <a href = "http://www.jluvip.com/blog/article.asp?id=260" title = "js data access radio button"> js access to the radio button Data </ a>
References:
The default style:
Http://www.w3cn.org/article/tips/2005/116.html
Http://www.w3.org/TR/CSS21/sample.html
Semantic of:
Http://www.456bereastreet.com/lab/developing_with_web_standards/zh
Http://www.456bereastreet.com/lab/developing_with_web_standards
Http://www.w3cn.org/article/translate/2005/114.html
Http://www.w3cn.org/article/translate/2005/114.html
Http://www.junchenwu.com/2005/11/html_tags.html
Http://brainstormsandraves.com/articles/semantics/structure/
Http://www.w3.org/TR/html401/struct/text.htm
Http://www.simplebits.com/bits/simplequiz/
Links to resources:
Bad Tags:
Http://www.htmldog.com/guides/htmlintermediate/badtags/
The Q tag
Http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, semantics and the future of the web
Http://www.westciv.com/style_master/house/good_oil/xhtml/index.html
Http://bbs.blueidea.com/thread-2658231-1-1.html
Tags: css attributes, html, html css, w3c html, xhtml attributes
Leave a Reply