Semantic web page XHTML semantic tags

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

First of all, it is about the difference between semantics and default styles. The default style is the expression of some commonly used tags set by the browser. I personally think that its main purpose is to let everyone intuitively understand the uses and functions of tags and attributes. It is obvious that the Hx series looks very similar to the title because it has bold and larger font sizes. <strong>,<em> is used to distinguish it from other words and plays an emphasis role. As for the list and table, it's obvious to tell you what they do.

Secondly, the most important thing about semantic web pages is that they are friendly to search engines. With good structure and semantics, your web page content is naturally easy to be crawled by search engines, and your website promotion can save a lot of effort.

The specific semantics and uses have been explained in the XHTML1.0 TAG reference. Some TAGS and attributes that are easy to forget or be confused will be supplemented here.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, are used as titles and are reduced according to importance. <h1> is the highest level.

For example:

Code:

<div class=title>Document title</div>, or <span class=title>Document title</span>. It is obvious that search engines will not consider it to be a title for the latter.

Paragraph marks, knowing <p> as paragraphs, you will no longer use <br/> to break lines, and you do not need to distinguish between paragraphs and paragraphs. Text in <p></p> will automatically wrap, and the effect of wrapping is better than <br>. The gaps between paragraphs can also be controlled using CSS, making it easy and clear to distinguish paragraphs from paragraphs. It would be perfect if you can easily define travel spacing and then define the first-character sinking effects using line-height.

For example: Copy content to clipboard

Code:

</p>

<p>For many years, Blue Ideal's content has been continuously enriched, and has been highlighted by some well-known domestic websites and traditional media. It has been collected by major search sites such as Google, Baidu, Yahoo, Sohu, Sina, and Excite. It has ranked first in the search for website design and development of simplified Chinese keywords among the three major search engines of Google, Baidu and Yahoo. Now Blue Ideal has developed into one of the most influential professional websites in website design and development in China. </p> <ul>, <ol>, <li>

<ul>Unordered lists are very common and are widely used. <ol>Unordered lists are also quite commonly used. During the web standardization process, <ul> is also used more for navigation bars. Originally, navigation bars are a list, which is completely correct to do so. When your browser does not support CSS, the navigation link is still very good, but it is a little less beautiful.

For example: Copy content to clipboard

Code:

<li>Project 1</li>

<li>Project 2</li>

<li>Project 3</li>

</ul> Copy content to clipboard

Code:

<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol> <dl>, <dt>, <dd>

dl is the definition list. For example, the explanation and definition of words in the dictionary can be used in this list.

For example: Copy content to clipboard

Code:

<dt>Dog</dt>

<dd>A carnivorous mammal of the family Canidae.</dd>

</dl> Copy content to clipboard

Code:

<dt>Shanghai Beach</dt>

<dd>This "Shanghai Bund", filmed in 1980, is the most successful and classic drama in the history of Hong Kong TV.

After it was broadcast in Hong Kong that year, it caused a huge sensation. </dd>

<dt>Chow Yun-fat</dt>

<dd>Like all great movie stars, Chow Yun-fat confirmed an era, a golden age of Hong Kong films.

Wind coats, sunglasses, cold-blooded double guns, and sunny smiles are all sealed in the film. When we look back, Fa Ge has been engraved as the coordinates of an era. </dd>

</dl> <cite>, cite , <q>, <blockquote>

Forums and blogs often use quotes from others, using <q> to mark short single-line quotes. The web browser will automatically recognize the content between <q>. Unfortunately, IE cannot recognize, and sometimes <q> can cause some accessibility issues. Because of this, some people recommend not using <q> and manually inserting reference marks. Add a single line of reference content to a <span> containing the appropriate class, then you can use CSS to style the reference, but this has no semantic meaning. You can read the views of The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag) on ​​handling <q> related issues written by Mark Pilgrim.

For long quotes of one or several paragraphs, <blockquote> should be used. CSS can be used to define the style of reference. Note that an article cannot be placed directly in <blockquote>, and the quoted content must also be included in an element, usually <p>. The attribute cite can be used with <q> or <blockquote> to provide the source address of the referenced content. It should be noted that if you use <span> instead of <q> tag reference content, then you cannot use the cite attribute.

For example: Copy content to clipboard

Code:

Code:

Code:

struct/text.html#h-9.2.1>The presentation of phrase elements

Copy content to the clipboard

Code:

<p>Most of us have a profound experience. Whenever the mainstream browser version is upgraded, the website we just built may become outdated.

We need to upgrade or rebuild the website. For example, the typical browser war from 1996 to 1999,

To be compatible with Netscape and IE, the website had to write different code for these two browsers. Similarly,

Whenever new network technology and interactive devices emerge, we also need to make a new version to support this new technology or new device.

For example, WAP technology that supports mobile Internet access. There are countless similar questions: the website code is bloated and complicated, which wastes a lot of our bandwidth;

DHTML special effects for a certain browser block some potential customers; difficult-to-use codes, disabled people cannot browse websites, etc.

This is a vicious cycle and a huge waste. </p>

</blockquote> <em>, <strong>

<em> is used for emphasis, <strong> is used for emphasis. Most browsers use italics to display the highlighted content and bolds to display the highlighted content. However, this is not necessary. If it is to determine how the emphasis is displayed, the best way is to use CSS to define their performance. Don't use emphasis when all you want is visual effects. And if you want to emphasize but still feel that bold or italics are not that good in visual effect, especially italics for Chinese, then you can completely define some other more eye-catching styles to achieve the effect of emphasis.

For example: Copy content to clipboard

Code:

However, texts with special emphasis are usually shown in bold. </p> <table>, <td>, <th>, <caption>, summary

Tables in XHTML should not be laid out. However, if it is to mark the data of the list, a table should be used. <th> is the table title, the attribute summary is the summary, the <caption> tag is the header description, the <thead> tag is the header, the <tbody> tag is the main content of the table, and the <tfoot> tag is the end of the table.

It can also be used to replace the headers attribute and mark cells containing header information, where the content of each value is as follows:

row indicates the current cell, providing relevant header information for rows containing the current cell.

col Indicates the current cell, providing corresponding header information for the columns specified according to the current cell.

rowgroup Indicates the current cell, providing relevant header information for the remaining row groups containing the current cell.

colgroup Indicates the current cell, providing corresponding header information for the remaining column groups specified based on the current cell.

abbr is used to define the abbreviation name in the header cell. If this property is not defined, the default cell content is omitted.

For example: Copy content to clipboard

Code:

<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>Effect viewing: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

Code:

If you know del, don’t use <s> as a strikethrough anymore. Using del is obviously more semantic. In addition, the del also comes with cite and datetime to indicate the reason for the deletion and the time of the deletion. ins means insertion, and there are such attributes.

For example: Copy content to clipboard

Code:

It means computer code. The default style is font. It is often encountered in technical forums and blogs.

For example: Copy content to clipboard

Code:

The <abbr> tag represents the abbreviation on the web page, and the <acronym> tag is an abbreviation. (Note: Here we separate the abbreviation and abbreviation. The range of the abbreviation is larger than the abbreviation, so as to take the abbreviation of the first letter

Write with <acronym> tag) Browsers under Windows IE6.0 do not support <abbr> tags. In IE, you can apply CSS to <acronym> but not to <abbr> tags.

IE will display a prompt for the title attribute of the <acronym> tag, but will ignore the <abbr> tag.

See: http://www.w3cn.org/article/translate/2005/115.html

For example: Copy content to clipboard

Code:

Code:

The title attribute is used to provide additional instructions for elements title attributes can be used on all tags except base, basefont, head, html, meta, param, script and title. But it is not necessary.

The alt property is a User Agent (UA) that cannot display images, forms, or applets, and specifies replacement text. The language of the replacement text is specified by the lang attribute. Copy content to clipboard

Code:

Code:

Default style:

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/TR/CSS21/sample.html

Semantics:

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/

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