テキストの意味づけ要素（1/4）
a要素（ハイパーリンク）
| カテゴリ | フロー・コンテンツ フレージング・コンテンツのみを含んでいる場合は、フレージング・コンテンツ、インタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | トランスペアレント（ただし、インタラクティブ・コンテンツを入れてはいけない。 |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | href（ハイパーリンク先のURLを指定） target（ハイパーリンクをたどったときに使われるブラウジング・コンテキストの名前やキーワードを指定） ping（ユーザがハイパーリンクをたどったことを通知するURLのリストを指定） rel（ハイパーリンクがあるドキュメントと、ハイパーリンクが指し示す宛先との関係を表すキーワードのリストを指定） media（ハイパーリンクの宛先が想定するメディアを表すキーワードを指定） hreflang（ハイパーリンクの宛先の言語コードを指定） type（ハイパーリンクの宛先のMIMEタイプを指定） |
| デフォルトスタイル | - |
a要素にhrefコンテンツ属性が指定されていれば、ハイパーリンクを表します。
■利用例
<a href="http://www.sample.com/">SAMPLE.COM</a>
a要素はインラインだけではなく、ブロック全体をハイパーリンクにすることもできます。例えば、section要素で囲まれている全体を囲むようにマークアップすることもできます。
a要素にhrefコンテンツ属性を指定した場合は、target、ping、rel、media、hreflang、typeコンテンツ属性を利用して、そのハイパーリンクの宛先の性質を指定することができます。
em要素（強調）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | em{ font-style:italic; } |
em要素は、強調されたテキストを表します。特に、強調する場所が異なると意味が変わってしまうようなところに使います。HTML5では、em要素は重要性は表しません。もし、重要性を表したい場合はstrong要素を使います。
■利用例
<p>あなたは<em>6時に</em>電車で帰社してください</p>
<p>あなたは6時に<em>電車で</em>帰社してください</p>
利用例の2つの文章は全く同じですが、em要素を使っている場所が異なります。最初の文章は、時間を強調しています。次の文章は「電車で」という乗り物を強調しています。つまり、最初の文章は時間（4時なのか、5時なのか、6時なのか）が問題になり、その次の文章では、帰社する手段（電車、車、バス、タクシーなど）が問題になってきます。em要素を使うことによって、その文章の中でどの部分を強調しているかで、内容の受け取り方が変わってきます。
strong要素（重要性）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | strong{ font-weight:bold; } |
strong要素は、強調という意味合いはなくなり、重要性を伝えるテキストの範囲を表します。HTML5では、em要素とstrong要素のセマンティックスが明確に分離されています。
■利用例
<p>注意：パソコンを持ち歩くときには必ず<strong>セキュリティ</strong>を
しっかりと考慮しておくことが必要です。特に<strong>パスワードは、
<strong>不規則な文字列</strong>と<strong>定期的な更新</strong>が
必要</strong>です。</p>
利用例のように、strong要素はネストすることもできます。ネストすることによって、重要性が階層的な意味を持ってきます。また、em要素もネストすることができ、強調の度合いを指定することも可能です。
small要素（細目）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | small{ font-size:smaller; } |
small要素は、細目のような注釈を表します。
HTML4では、small要素はフォント・スタイル要素として規定されており、小さいフォントでレンダリングするための要素でした。HTML5では、細目という意味合いを与えられ、小さいフォントでレンダリングするという意味はなくなりましたが。実際には、どのブラウザでも小さいフォントサイズでレンダリングされますが、それだけの目的でsmall要素を使ってはいけません。あくまでもインラインのレベルとして使うことも注意します。また、small要素はフレーズの中で括弧書きするような注釈にも使うことができます。
■利用例
<footer>
<p><small>&Copy; copyright HTML5 Reserved</small></p>
</footer>
利用例をみると、これはページフッタの著作権表記をマークアップしたものです。細目には、免責条項、警告、法的制約、著作権表記などがあり、そのような場面の時に利用します。
cite要素（引用元のタイトルや作品名）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | cite{ font-style:italic; } |
cite要素は、引用元のタイトルや作品名を表します。人名に使ってはいけません。
■利用例
<p>Webサイトで有名な<cite>Wikipedia</cite>でHTML要素の意味を調べると、
<q>HTMLでマークアップされた文書を構成するものである。</q>となっていた。</p>
利用例を見ると、cite要素とq要素の違いが分かります。つまり、引用元のタイトルにはcite要素、引用文にはq要素を使います。
cite要素は、作品名（タイトル）だけに利用し、人名には使わないこととして、この要素の用途が限定されています。
q要素（引用文）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | cite（引用元のURLを指定） |
| デフォルトスタイル | q:before{ content:open-quote; } q:after{ content:close-quote; } |
q要素は、引用文を表します。この要素は、フレーズにしか使ってはいけません。もし、複数のフレーズを含むようなブロックとして使うのであれば、blockquote要素を使います。
また、q要素に入れる文の前後にダブルクォーテーションや鉤括弧のような引用符を入れるべきではありません。
■利用例
<p>かの有名は宇宙飛行士であるガガーリンは<q>地球は青かった</q>
という名言を残した。</p>
通常、日本語のブラウザであれば鉤括弧、英語圏であればダブルクォーテーションが自動的に採用されますが、どのブラウザでも引用文を鉤括弧で囲むのであれば、次のようなスタイルシートを記述します。
q:before {
content:'「';
}
q:after {
content:'」';
}
すると、下のような結果で表示されます。
【各要素のリファレンス8】