意味化HTML:i、b、em、strongラベル

4417 ワード

一、前言
HTML 4.1のiとbは表象ラベルとしてそれぞれ斜体と太字のスタイルを表し、強調スタイルとコンテンツが分離されたXHTMLではスタイル効果が同じemとstrongの表義ラベルが現れるが、この場合iとbのラベルは使用せず、emとstrongラベルを変更することを推奨する.
しかしHTML 5ではiとbに新しい意味を与えており、本稿ではそれらをもう一度認識する!
 
二、要素の意味
  1. iラベル
W 3 C草案:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized). W3C specification
意味化された要素は、外国語の単語、生物分類、科学技術用語、船名、シナリオの舞台方位、楽譜、3つの代表思想または手書き文字を表すために使用することができる.class特性によって具体的な意味を識別することを提案し、外国語を表す単語であればlang特性を用いて具体的な言語種類を識別する.例:
スライド紹介
スケートボードの基本動作名は豚跳び(ollie)
<h3>    </h3>
<p>
         <i class="skateboard">  </i>(<i lang="en_us">ollie</i>)
</p>

 2. bラベル
W 3 C草案:
The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
W3C specification
意味化された要素は、概要のキーワード、コメントの名詞など、局所的に重要ではないが際立った内容を表すために使用される.classプロパティで特定の意味を識別することを推奨します.例:
スライド構造の概要
スライドプレートは、ホイール、板面、研磨紙、およびブラケットからなる.
<h3>      </h3>
<p>
   <b class="compent">  </b>、<b class="component">  </b>、<b class="component">   </b> <b class="component">  </b>(<i lang="en_us>"truck</i>)</p>

  3. Emラベル
W 3 C草案:
The em element represents a span of text with emphatic stress.
W3C specification
意味化された要素は、文や段落の側面を変えるために局所的に強調された内容を表す.注意その作用範囲は局所的で、つまりある段落や文を読んだときに気づくことです.例:
ollie教育
後ろのペダルと同時に前足を持ち上げ、斜め前方にジャンプします.
後ろのペダルと同時に前足を持ち上げ、斜め前方にジャンプします.
1文目は前足を強調し、2文目は斜め前方に飛び上がることを強調する.
  4. strongラベル
W 3 C草案:
The strong element represents a span of text with strong importance.
W3C specification
意味化された要素は,全範囲で強調された内容が,全文を無秩序にスキャンする際に際立ったキーコンテンツであることを示す.
 
三、まとめ
文語義化HTMLは確かに難しいですね、引き続き努力しましょう!
オリジナルを尊重し、転載はhttp://www.cnblogs.com/fsjohnhuang/p/4172771.htmlから明記してください^^;デブのジョン
 
四、参考
http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/
http://www.blueidea.com/tech/web/2008/6342.asp
http://www.lixuepeng.com/post/1906.html