Semantic web pages XHTML semantic markup

Another important aspect of separating structure from presentation is to use semantic markup to structure document content. The presence of an XHTML element implies that the content of the marked part has structural 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 a <div> instead of a <p> tag for a heading.

First of all, let’s talk about the difference between semantics and default styles. Default styles are the expressions of some common tags set by the browser. I think its main purpose is to let everyone intuitively understand the purpose and function of tags (markup) and attributes (attribute). Obviously, the Hx series looks like a title because it has bold and larger font size. <strong>,<em> are used to distinguish from other words and play a role of emphasis. As for lists and tables, it's obvious what they do.

Secondly, the most important benefit of semantic web pages is that they are search engine friendly. With a good structure and semantics, your web page content will naturally be easily captured by search engines, and you can save a lot of effort in promoting your website.

The specific semantics and uses are explained in the XHTML1.0 TAG reference. Here we will supplement some tags and attributes that are easy to forget or confuse.

<Hx>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> are used as titles, and their importance decreases. <h1> is the highest level.
For example:

Copy content to clipboard

Code:

<h1>文檔標題</h1>
 <h2>次級標題</h2>

Instead of using
<div class="title">Document Title</div>, or <span class="title">Document Title</span>. Obviously, search engines will not consider the latter as a title.

<p>

Paragraph tags. Knowing that <p> is a paragraph, you will no longer use <br/> to break lines, and you don’t need <br/><br/> to distinguish between paragraphs. The text in <p></p> will automatically wrap, and the wrapping effect is better than <br>. The space between paragraphs can also be controlled using CSS, making it easy to clearly distinguish between paragraphs. It would be perfect if we could easily define the spacing between lines using line-height, and then define effects like first-letter drop.
For example:

Copy content to clipboard

Code:

<p>藍色理想www.blueidea.com 誕生于1999年的10月。從成立之初，藍色理想就以建設網站設計與開發人員之家為宗旨，以介紹網絡開發技術與網站創作設計交流為主要內容。其網站內容制作精良，每天都會有會員精心制作的教程發布，無私地對網友進行幫助，而且還舉辦過不少設計比賽并開發了很多目前仍被許多網站應用的相關程序。而所發布的作品與點評受到了多家媒體關注及行家的好評，同時也從中確立了自己的社會地位，于是一批又一批的網絡同仁加盟了藍色理想，成為國內最大的設計類站點之一。
 </p>
 <p>多年來，藍色理想的內容不斷充實，先后被國內一些知名網站、傳統媒體重點推介過，并陸續被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站點收藏，并在Google、百度、Yahoo三大搜索引擎中以簡體漢字關鍵詞"網站設計與開發”搜索排名均為第一，現在藍色理想已發展成為國內影響最大的網站設計、開發的專業網站之一。</p>

<ul>, <ol>, <li>

<ul> unordered list is very common and widely used, and <ol> ordered list is also very commonly used. In the process of web standardization, <ul> is also used more for navigation bars. The navigation bar is originally a list, so it is completely correct to do so. Moreover, when your browser does not support CSS, the navigation link still works well, but the aesthetics are a little worse.
For example:

Copy content to clipboard

Code:

<ul>
 <li>項目一</li>
 <li>項目二</li>
 <li>項目三</li>
 </ul>

Copy content to clipboard

Code:

<ol>
 <li>第一章</li>
 <li>第二章</li>
 <li>第三章</li>
 </ol>

<dl>, <dt>, <dd>

dl stands for "definition list". For example, this kind of list can be used to explain and define words in a dictionary.
For example:

Copy content to clipboard

Code:

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

Copy content to clipboard

Code:

<dl>
 <dt>上海灘</dt>
 <dd>這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。
當年在香港播出以后，產生了巨大的轟動效應。</dd>
 <dt>周潤發</dt>
 <dd>和所有偉大的影星一樣，周潤發印證了一個時代，一個香港電影的黃金時代。
風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的坐標。</dd>
 </dl>

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

Quoting others is often used in forums and blogs. Use <q> to mark short single-line quotes. Web browsers will automatically recognize the content between <q>. Unfortunately, IE doesn't understand it, and sometimes, <q> can cause some accessibility issues. Because of this, some people recommend avoiding the use of <q> as much as possible and inserting quote marks manually. By enclosing the single-line quotation content in a <span> with the appropriate class, you can style the quotation with CSS, but this has no semantic meaning. You can read Mark Pilgrim's The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag ) for his thoughts on dealing with <q>-related issues.
For long quotations of one or more paragraphs, you should use <blockquote>. CSS can be used to define the style of the reference. Note that a paragraph cannot be placed directly in a <blockquote>; the quoted content must also be contained in an element, usually <p>. The attribute cite can be used with <q> or <blockquote> to provide the source address of the quoted content. Note that if you use <span> instead of <q> to mark the citation content, then you cannot use the cite attribute.

For example:

Copy content to clipboard

Code:

<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

Copy content to clipboard

Code:

<p> <cite>孔子</cite>曰：<q>學而不思則罔，思而不學則殆</q>.</p>

Copy content to clipboard

Code:

<p>The W3C 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>

Copy content to clipboard

Code:

<blockquote cite="http://www.w3cn.org/">
 <p>“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，
我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，
為了兼容Netscape 和IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，
每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，
例如支持手機上網的WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；
針對某種瀏覽器的DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。
這是一種惡性循環，是一種巨大的浪費。”</p>
 </blockquote>

<em>、 <strong>

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

Copy content to clipboard

Code:

<p><em>強調</em> 的文本通常用斜體顯示，
然而， <strong>特別強調</strong> 的文本通常以粗體顯示。</p>

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

Tables in XHTML should not be used for layout. However, if the purpose is to label list data, a table should be used. <th> is the table title, the attribute summar is the summary, the <caption> tag is the header description, the <thead> tag is the table header, the <tbody> tag is the table body content, and the <tfoot> tag is the table footer.
You can also use scope to replace the headers attribute to mark the cells containing header information, where the values are as follows:
row indicates the current cell and provides relevant header information for the row containing the current cell.
col indicates the current cell and provides corresponding header information for the column specified by the current cell.
rowgroup indicates the current cell and provides relevant header information for the remaining row groups that include the current cell.
colgroup indicates the current cell and provides corresponding header information for the remaining column groups specified by the current cell.
abbr is used to define the abbreviation name in the header cell. If this attribute is not defined, the cell content will be abbreviated by default.
For example:

Copy content to clipboard

Code:

<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>

Effect view: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>

Copy content to clipboard

Code:

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

<ins>, <del>

Now that you know del, don’t use <s> to strikethrough anymore. Using del is obviously more semantic. And del also carries cite and datetime to indicate the reason for deletion and the time of deletion. ins means insert, and it also has such attributes.
For example:

Copy content to clipboard

Code:

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

<code>

Representation is computer code. The default style is typing. Often encountered in technical forums and blogs.
For example:

Copy content to clipboard

Code:

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

<abbr>, <acronym>

The <abbr> tag is used to represent the abbreviation on the web page, and the <acronym> tag is used to represent the abbreviation of the name. (Note: Here we discuss abbreviations and abbreviations separately. The scope of abbreviations is larger than that of abbreviations. The abbreviations with the first letters use the <acronym> tag.) Windows browsers below IE6.0 do not currently support the <abbr> tag. In IE, you can apply CSS to <acronym> but not to <abbr> tags.
IE will display a hint for the title attribute of the <acronym> tag, but will ignore the <abbr> tag.
The solution is: http://www.w3cn.org/article/translate/2005/115.html
For example:

Copy content to clipboard

Code:

<abbr title="Cascading Style Sheets">CSS</abbr>

Copy content to clipboard

Code:

<acronym title="Cascading Style Sheets">CSS</acronym >

alt attribute and title attribute

The title attribute is used to provide additional descriptive information for an element. The title attribute can be used in all tags except base, basefont, head, html, meta, param, script, and title. But it is not necessary.
The alt attribute specifies alternative text for user agents (UAs) that cannot display images, forms, or applets. The language of the replacement text is specified by the lang attribute.

Copy content to clipboard

Code:

<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">

Copy content to clipboard

Code:

<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js獲取單選按鈕的數據">js獲取單選按鈕的數據</a>

References:
Default style:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
Semantic:
http://www.456bereastreet.com/lab/developing_with_web_standards/en
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/

Resource Links:
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

<<: CSS performance optimization - detailed explanation of will-change usage

>>: Example code for converting Mysql query result set into JSON data