セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティックマークアップを使用してドキュメントコンテンツを構造化することです。 XHTML 要素が存在するということは、マークされた部分の内容に構造的な意味があり、他のタグを使用する必要がないことを意味します。つまり、見出しに <p> タグの代わりに <div> を使用するなど、CSS によって HTML 要素が別の HTML 要素のように見えることがないようにしてください。

まず、セマンティクスとデフォルトスタイルの違いについてお話ししましょう。デフォルトスタイルとは、ブラウザが設定するいくつかの共通タグの表現方法です。タグ（マークアップ）と属性（アトリビュート）の目的と機能を誰もが直感的に理解できるようにすることが主な目的だと思います。明らかに、Hxシリーズは太字でフォントサイズが大きいため、タイトルのように見えます。 <strong>,<em> は他の単語と区別するために使用され、強調の役割を果たします。リストとテーブルについては、それが何をするのかは明らかです。

第二に、セマンティックウェブページの最も重要な利点は、検索エンジンに適していることです。適切な構造とセマンティクスがあれば、ウェブページのコンテンツは自然に検索エンジンに簡単に取り込まれ、ウェブサイトの宣伝にかかる労力を大幅に節約できます。

具体的な意味と使用法については、XHTML1.0 TAG リファレンスで説明されています。ここでは、忘れたり混乱したりしやすいタグと属性について補足します。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6> はタイトルとして使用され、重要度は低下します。 <h1> が最高レベルです。
例えば：

コンテンツをクリップボードにコピー

コード：

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

代わりに
<div class="title">ドキュメントタイトル</div>、または <span class="title">ドキュメントタイトル</span>。当然ながら、検索エンジンは後者をタイトルとは見なしません。

<p>

段落タグ。<p> が段落であることがわかれば、行を区切るために <br/> を使用する必要がなくなり、段落を区別するために <br/><br/> を使用する必要もなくなります。 <p></p> 内のテキストは自動的に折り返され、折り返し効果は <br> よりも優れています。段落間のスペースも CSS を使用して制御できるため、段落を明確に区別することが容易になります。 line-height を使用して行間の間隔を簡単に定義し、最初の文字のドロップなどの効果を定義できれば完璧です。
例えば：

コンテンツをクリップボードにコピー

コード：

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

<ul>、<ol>、<li>

<ul> 順序なしリストは非常に一般的で広く使用されており、<ol> 順序付きリストも非常に一般的に使用されています。ウェブ標準化の過程で、<ul> はナビゲーションバーにもより多く使用されるようになりました。ナビゲーションバーはもともとリストなので、このようにするのはまったく正しいことです。また、ブラウザーが CSS をサポートしていない場合でも、ナビゲーションリンクは正常に機能しますが、見た目は少し悪くなります。
例えば：

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

<dl>、<dt>、<dd>

dl は「定義リスト」の略です。たとえば、この種のリストは辞書の単語の説明や定義に使用できます。
例えば：

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

<cite>、cite、<q>、<blockquote>

フォーラムやブログでは、他の人の発言を引用することがよく行われます。短い 1 行の引用をマークするには、<q> を使用します。 Web ブラウザは <q> 間のコンテンツを自動的に認識します。残念ながら、IE はこれを理解せず、場合によっては <q> によってアクセシビリティの問題が発生することがあります。このため、<q> の使用をできるだけ避け、引用符を手動で挿入することを推奨する人もいます。適切なクラスを持つ <span> で単一行の引用コンテンツを囲むと、引用を CSS でスタイル設定できますが、これには意味的な意味はありません。 <q> 関連の問題への対処に関する彼の考えについては、Mark Pilgrim の The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag ) をお読みください。
1 つ以上の段落の長い引用の場合は、<blockquote> を使用する必要があります。 CSS を使用して参照のスタイルを定義できます。段落を <blockquote> 内に直接配置することはできないことに注意してください。引用されたコンテンツも要素 (通常は <p>) 内に含まれている必要があります。 cite 属性は、引用されたコンテンツのソースアドレスを提供するために、<q> または <blockquote> と共に使用できます。引用コンテンツをマークするために <q> ではなく <span> を使用する場合は、cite 属性を使用できないことに注意してください。

例えば：

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

<em>、 <strong>

<em> は強調に使用され、<strong> は強い強調に使用されます。ほとんどのブラウザでは、強調されたコンテンツは斜体で表示され、強く強調されたコンテンツは太字で表示されます。ただし、これは必須ではありません。強調されたコンテンツの表示方法を決定する場合、最も良い方法は CSS を使用して外観を定義することです。視覚的な効果だけが必要な場合は強調を使用しないでください。また、強調したいが、太字や斜体、特に中国語の斜体では視覚効果が良くないと感じる場合は、強調効果を実現するために、他のより目を引くスタイルを定義することができます。
例えば：

コンテンツをクリップボードにコピー

コード：

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

<table>、<td>、<th>、<caption>、要約

XHTML のテーブルはレイアウトに使用しないでください。ただし、リストデータにラベルを付けることが目的の場合は、テーブルを使用する必要があります。 <th> は表のタイトル、属性 summar は概要、<caption> タグはヘッダーの説明、<thead> タグは表のヘッダー、<tbody> タグは表の本体の内容、<tfoot> タグは表のフッターです。
また、scope を使用して headers 属性を置き換え、ヘッダー情報を含むセルをマークすることもできます。値は次のとおりです。
行は現在のセルを示し、現在のセルを含む行に関連するヘッダー情報を提供します。
col は現在のセルを示し、現在のセルによって指定された列に対応するヘッダー情報を提供します。
rowgroup は現在のセルを示し、現在のセルを含む残りの行グループに関連するヘッダー情報を提供します。
colgroup は現在のセルを示し、現在のセルによって指定された残りの列グループに対応するヘッダー情報を提供します。
abbr は、ヘッダーセル内の省略名を定義するために使用されます。この属性が定義されていない場合、セルの内容はデフォルトで省略されます。
例えば：

コンテンツをクリップボードにコピー

コード：

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

効果ビュー: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>

コンテンツをクリップボードにコピー

コード：

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

<挿入>、<削除>

del の使い方がわかったので、取り消し線を引くために <s> を使わないでください。del を使うほうが明らかに意味的に優れています。また、del には、削除の理由と削除時刻を示す cite と datetime も含まれています。 ins は挿入を意味し、次のような属性も持っています。
例えば：

コンテンツをクリップボードにコピー

コード：

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

<コード>

表現はコンピュータコードです。デフォルトのスタイルは入力です。技術フォーラムやブログでよく見かけます。
例えば：

コンテンツをクリップボードにコピー

コード：

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

<略語>、<頭字語>

<abbr> タグは Web ページ上の略語を表すために使用され、<acronym> タグは名前の略語を表すために使用されます。 (注: ここでは、略語と省略形を別々に説明します。省略形の範囲は略語の範囲よりも広くなります。頭文字の省略形には <acronym> タグを使用します。) IE6.0 未満の Windows ブラウザーは現在、<abbr> タグをサポートしていません。 IE では、CSS を <acronym> タグに適用できますが、<abbr> タグには適用できません。
IE は <acronym> タグの title 属性のヒントを表示しますが、<abbr> タグは無視します。
解決策は次のとおりです: http://www.w3cn.org/article/translate/2005/115.html
例えば：

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

alt属性とtitle属性

title 属性は、要素の追加の説明情報を提供するために使用されます。title 属性は、base、basefont、head、html、meta、param、script、title を除くすべてのタグで使用できます。しかし、それは必要ありません。
alt 属性は、画像、フォーム、またはアプレットを表示できないユーザーエージェント (UA) の代替テキストを指定します。置換テキストの言語は、lang 属性によって指定されます。

コンテンツをクリップボードにコピー

コード：

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

コンテンツをクリップボードにコピー

コード：

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

参考文献:
デフォルトのスタイル:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
セマンティック：
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/

リソースリンク:
不適切なタグ:
http://www.htmldog.com/guides/htmlintermediate/badtags/
Qタグ
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML、XHTML、セマンティクス、そしてウェブの未来
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

<<: Dockerはプライベートライブラリイメージを完全に削除します

>>: デザイン理論：人の心を理解する方法