専用の要素を使わない共通のイディオム

4.12 専用の要素を使わない共通のイディオム

4.12.1 小見出し、サブタイトル、別表題、タグライン

HTML は小見出し、別表題、タグラインをマークアップするための専用のメカニズムを持っていません。ここでは代わりの方法を提案します。

h1h6 要素は、新たなセクションや副セクションの見出しとならない限り、小見出し、サブタイトル、別表題、タグラインに使ってはいけません。

次の例では、ウェブページのタイトルとサブタイトルが、header 要素を使ってグループ化されています。ウェブ制作者はそのサブタイトルを目次に含めたくないのと、新たなセクションの開始を示すわけではないため、それらは p 要素を使ってマークアップされています。CSS でスタイルされたこのタイトルとサブタイトルのレンダリング例は、コード例の下に用意されています。

   <header>
   <h1>HTML 5.1 Nightly</h1>
   <p>A vocabulary and associated APIs for HTML and XHTML</p>
   <p>Editor's Draft 9 May 2013</p>
   </header>
   

Title:'HTML 5.1 Nightly' in a mid blue Sans Serif font. 
   Subtitle 1:'A vocabulary and associated APIs for HTML and XHTML' on a new line, same style smaller font size. 
   Subtitle 2:'Editor's Draft 9 May 2013' on a new line, same style and size as subtitle 1.

次の例では、本のサブタイトルが、コロンで分割されたタイトルとして、同じ行にあります。CSS でスタイルされたこの見出しとサブタイトルのレンダリング例は、コード例の下に用意されています。

<h1>The Lord of the Rings: The Two Towers</h1>

Title and subtitle:'The Lord of the Rings: The Two Towers' in a gold coloured Gothic style Serif font on a black background.

次の例では、アルバムのタイトルの一部が span 要素に入れられています。これによって、そのタイトルの残りの部分とは違うスタイルを当てることができるようになります。br 要素を使って、アルバムのタイトルを新たな行に置いています。CSS でスタイルされたこの見出しのレンダリング例は、コード例の下に用意されています。

   <h1>Ramones <br>
   <span>Hey! Ho! Let's Go</span> 
   </h1>

 Line 1:'Ramones' displayed in a large bold angular hand writing style font with a spray can paint effect. Line 2:'Hey! Ho! Let's Go' displayed in a smaller, standard sans serif style font.

次の例では、新記事のタイトルとタグラインが header 要素を使ってグループ化されています。このタイトルは h2 要素を使ってマークアップされ、タグラインは p 要素を使ってマークアップされています。CSS でスタイルされたこのタイトルとタグラインのレンダリング例は、コード例の下に用意されています。

   <header>
   <h2>3D films set for popularity slide </h2>
   <p>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters,
    according to Fitch Ratings report</p>
   </header>
   

 Title:'3D films set for popularity slide' in a large, bold, dark blue Serif font style. Paragraph: 'First drop in 3D box office projected for this year despite...' in a smaller, dark grey, Sans Serif font style.

この最後の例では、新刊雑誌のタイトルとタグラインが header 要素を使ってグループ化されています。このタイトルは h1 要素を使ってマークアップされ、タグラインはそれぞれ p 要素を使ってマークアップされています。CSS でスタイルされたこのタイトルとタグラインのレンダリング例は、コード例の下に用意されています。

   <header>
   <p>Magazine of the Decade</p>
   <h1>THE MONTH</h1>
   <p>The Best of UK and Foreign Media</p>
   </header>
   

Tagline above the heading:'Magazine of the Decade'. Tagline below the heading 'The Best of UK and Foreign Media' both in a small,all caps, sans-serif font style. Heading:'The Month' in a large, Serif font style. All text is black against a red background.

4.12.2 パンくずナビゲーション

本仕様は、パンくずナビゲーションメニューを記述するマシンリーダブルな方法を提供していません。ウェブ制作者は、パンくずナビゲーションをリストとしてマークアップすることが推奨されます。nav 要素を使えば、ナビゲーションブロックとしてリンクを含んだリストをマークアップすることができます。

次の例では、現在のページは、表示されたパスを通して到達できます。そのパスは右矢印記号 "→" を使って示されています。ユーザーに前後の関係を示すために、テキストラベルが提供されています。リンクはリストとして構造化され、ユーザーに項目番号の目安を提供しています。

   <nav>
   <h2>You are here:</h2>
   <ul id="navlist">
   <li><a href="/">Main</a> →</li> 
   <li><a href="/products/">Products</a> →</li> 
   <li><a href="/products/dishwashers/">Dishwashers</a> →</li> 
   <li><a>Second hand</a></li> 
   </ul>
   </nav>   
   

このパンくずのコード例は、CSS を使って、水平なリストにスタイルすることができるでしょう:

The heading and the links are displayed on one line.

右角括弧記号 ">" をパスの方向を示すために使うのは非推奨です。それは、この文脈においては、すべてのユーザーに明確にその意味が伝わらないからです。

4.12.3 タグクラウド

本仕様は、ページのグループに適用できるキーワードのリスト(タグクラウドとしても知られています)を作るための特別なマークアップを定義していません。一般的に、ウェブ制作者は、ul 要素を使ってそういったリストをマークアップすることが推奨されます。その中には、カウントを明示的にインラインで見えない形で入れておき、スタイルシートを使って表示効果に反映します。または、SVG を使うことが推奨されます。

ここには短いタグクラウドの中に 3 つのタグが入れられています:

<style>
@media screen, print, handheld, tv {
  /* 非ビジュアルブラウザーでは無視されるはず */
  .tag-cloud > li > span { display: none; }
  .tag-cloud > li { display: inline; }
  .tag-cloud-1 { font-size: 0.7em; }
  .tag-cloud-2 { font-size: 0.9em; }
  .tag-cloud-3 { font-size: 1.1em; }
  .tag-cloud-4 { font-size: 1.3em; }
  .tag-cloud-5 { font-size: 1.5em; }
}
</style>
...
<ul class="tag-cloud">
 <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">リンゴ</a> <span>(人気)</span>
 <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">キーウィ</a> <span>(レア)</span>
 <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">西洋ナシ</a> <span>(超人気)</span>
</ul>

それぞれのタグの実際の頻度は title 属性を使って与えられています。CSS スタイルシートを使って、このマークアップを、大小混在の単語のクラウドに変換しています。しかし、CSS をサポートしていないブラウザーやビジュアルブラウザーでないブラウザーのために、このマークアップには、頻度に応じてタグを分類できるよう "(人気)" や "(レア)" といった注記が入れられています。

順番は特に重要ではないので、(ol ではなく) ul 要素が使われています。このリストは実際にはアルファベット順ですが、仮にタグの長さ順だとしても、同じ情報を伝えています。

a 要素には rel キーワードの tag は使われていません。なぜなら、それらはページ自身に適用できるタグを表しておらず、タグそのものを列挙した索引の一部に過ぎないからです。

4.12.4 会話

本仕様は、会話、議事録、オンラインチャットの記録、脚本のセリフ、インスタントメッセージのログなど、異なる話者が順番に語り合う場面をマークアップするための専用の要素を定義していません。

ウェブ制作者は、p 要素と句読点を使って会話をマークアップすることが推奨されます。スタイリング目的で話者をマークアップする必要がある場合、ウェブ制作者は span または b を使うことが推奨されます。i 要素で囲まれたテキストを伴う段落は、ト書きをマークアップするために使うことができます。

この例は、アボット・アンド・コステロの有名な寸劇 Who's on first からの引用を使って、前述のやり方を示しています:

<p> コステロ: おい、一塁選手を見つけきたのか?
<p> アボット: いかにも。
<p> コステロ: なら誰が一塁をやるんだ?
<p> アボット: そうだな。
<p> コステロ イライラしてくる。
<p> コステロ: 毎月一塁選手の給料を払うとき、誰がお金をもらうんだ?
<p> アボット: 全額さ。

次の抜粋は、IM の会話ログがどのようにマークアップできるかを示しています。行ごとに data 要素を使って UNIX タイムスタンプを提供しています。このタイムスタンプが time 要素がサポートしていない形式(つまり、UNIX time_t タイムスタンプ)で提供されているために、data が使われている点に注意してください。ウェブ制作者が time 要素でサポートされた日時形式のひとつを使ってデータをマークアップしたいと思ったなら、その要素が data の代わりに使われてたことでしょう。これが都合な場合もあります。なぜなら、そうすることによって、ページ製作者と調整しなくても、データ解析ツールが 正確にタイムスタンプを検知できるからです。

<p> <data value="1319898155">14:22</data> <b>egof</b> 僕はそんなにオタクではないよ。スタートレック全話のうち 30% しか見ていないし。
<p> <data value="1319898192">14:23</data> <b>kaj</b> もし君がスタートレック全話のうち何パーセント見たのか知っているなら、間違いなく君はオタクだ。
<p> <data value="1319898200">14:23</data> <b>egof</b> そんなことあるよ。
<p> <data value="1319898228">14:23</data> <i>* kaj がまばたきする</i>
<p> <data value="1319898260">14:24</data> <b>kaj</b> 君は墓穴を掘ってるな。

HTML ではグラフをうまくマークアップできません。そのため、ゲームに出てくるような双方向の会話の記述は、マークアップするのがより困難です。この例は、会話の各ポイントで返信可能な発言を列挙するために、dl 要素を使ってひとつの可能な会話を示しています。他の方法としては、ドットファイルの形式の会話を記述し、SVG イメージとして結果を出力してドキュメントに配置することも考えられます。 [DOT]

<p> 次に、あなたは漁師に会います。あなたは挨拶をひとつ言うことができます:
<dl>
 <dt> "こんにちわ!"
 <dd>
  <p> 彼は "こんにちわ、ご用件は何でしょう?" と答える; あなたはこう答えることができます:
  <dl>
   <dt> "魚を一匹買いたいのですが。"
   <dd> <p> 彼はあなたに魚を売り、会話が終わる。
   <dt> "あなたのボートを貸してもらえませんか?"
   <dd>
    <p> 彼は驚き、"代わりに何をくれますか?" と聞いてくる。
    <dl>
     <dt> "ゴールド 5 個。" (もしあなたが十分に持っていれば)
     <dt> "ゴールド 10 個。" (もしあなたが十分に持っていれば)
     <dt> "ゴールド 15 個" (もしあなたが十分に持っていれば)
     <dd> <p> 彼はあなたにボートを貸す。会話が終わる。
     <dt> "魚。" (もしあなたが持っていれば)
     <dt> "新聞。" (もしあなたが持っていれば)
     <dt> "小石。" (もしあなたが持っていれば)
     <dd> <p> "いえ結構です。" と彼は答える。この時点での        
     あなたの会話オプションは、彼のボートを借りたいとと頼んだ後の状態
     から、あなたが前に提案したオプションを引いた結果と同じです。
    </dl>
   </dd>
  </dl>
 </dd>
 <dt> "次の選挙では私に一票を!"
 <dd> <p> 彼は外れる。会話が終わる
 <dt> "あなたはご自分の魚が逃げていることに気づいてますか?"
 <dd>
  <p> 彼は怪訝そうにあなたを見てこう言う "魚は走ることができませんよ。"
  <dl>
   <dt> "そりゃぁ、そうですね!"
   <dd> <p> 漁師はため息をつき、会話が終わる。
   <dt> "単なる冗談ですよ。"
   <dd> <p> "冗談がうまいですね!" 彼は言い返す。この時点でのあなたの
   会話オプションは、前の "こんにちわ!" に続くものと同じです。
   <dt> "では魚達は何をしているのですか?"
   <dd> <p> 彼は自分の魚を見る。あなたは彼のボートを盗む機会を
   得る。会話が終わる。
  </dl>
 </dd>
</dl>

ゲームによっては、会話がもっとシンプルなものがあります。それぞれのキャラクターの発言が決まっている場合です。この例では、ゲームの FAQ/手引の中に、それぞれのキャラクターが答えることができる返答が並べられています:

<section>
 <h1>会話</h1>
 <p><small>いくつかのキャラクターはあなたが相手するたびに、各行に書かれた発言
 を順番に繰り返します。それ以外のキャラクターは各行に書かれた発言をランダムに取り出します。
 下記のリストでは、順番に返事をするキャラクターの発言の行には番号が振られています。</small>
 <h2>店主</h2>
 <ul>
  <li>何になさいましょうか?
  <li>新鮮なリンゴ!
  <li>パンをおひとついかがですか?奥様
 </ul>
 <h2>パイロット</h2>
 <p>アクシデントの前:
 <ul>
  </li>ちょうど発進するところなんだよ。悪いな!
  </li>すまん。いま飛行許可を待っているところなんだよ。もらったらどくよ!
 </ul>
 <p>アクシデントの後:
 <ol>
  <li>ちょうど発進するところなんだよ。悪いな!
  <li>OK、まだ離陸しない。私の飛行機を洗っているところだ。
  <li>OK、洗ってるんじゃないんだ。その前にちょっと修理が必要なんだ。
  <li>OK、OK、邪魔しないでくれ!そうだよ、故障したんだよ。
 </ol>
 <h2>クランのリーダー</h2>
 <p>初めてのクラン会議にて:
 <ul>
  <li>ねぇ、私の娘を見なかった? あの子、また悪巧みを目論んでいるに違いないの...
  <li>今日はいい天気、ですよね?
  <li>名前はベイリー、ジェフ・ベイリーよ。今日は何かお困りですか?
  <li>お水を一杯いかが? 泉の新鮮なお水よ!
 </ul>
 <p>地震の後:
 <ol>
  <li>みんなシェルターの中にいて安全ですが、すぐに消火しないといけません。
  <li>私が消防隊に通報してくるよ。ホースで水を掛け続けてくれ!
 </ol>
</section>

4.12.5 脚注

HTML には、脚注をマークアップするための専用のメカニズムがありません。ここでは代わりの方法を提案します。


注釈には a 要素を使って、ドキュメントにある後方の要素を指し示すべきです。リンクのコンテンツとして角括弧付きの数字を入れる方法がよく使われます。

この例では、会話の脚注が、その会話の下の段落にリンクしています。その段落はお互いにその会話とリンクしあうことで、ユーザーがその脚注の位置から戻れるようにしています。

<p> アナウンサー: 16 番: <i>拍手</i>。
<p> インタビュアー: こんばんわ。今晩は
ノーマン・セント・ジョン・プレヴォルタ氏にスタジオにお越しいただき
ました。彼は何年も前から人々に反論し続けてきました。プレヴォルタさん、
なぜあなたは人々に反論<em>する</em>のですか? 
<p> ノーマン: してないですよ。 <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> インタビュアー: あなたは私にしたって言ったじゃないですか!
...
<section>
 <p id="fn1"><a href="#r1">[1]</a> 当然これは嘘ですが、
 逆説的には、もしそれが本当だったなら、インタビューアーに反論せずに、
 そして、その結果として嘘をついて、したと言ったかもしれません。</p>
</section>

傍注とは、特定の単語や文だけというのではなく、セクションのテキスト全体に当てはまる長い注釈を指しますが、それには aside 要素を使うべきです。

この例では、会話の後に補足がありますが、その中に、その会話の背景が描かれています。

<p> <span class="speaker">お客</span>: このレコードは買わないよ。傷が付いているからね。
<p> <span class="speaker">店主</span>: なんですって?
<p> <span class="speaker">お客</span>: このレコードは買わないよ。傷が付いているからね。
<p> <span class="speaker">店主</span>: いえいえいえ、これはタバコ屋ので'ず'よ。
<aside>
 <p>1970 年に、大英帝国は廃墟と化し、外国の民族主義者たちが
 町に集まるようになった。彼らのほとんどはハンガリー人
 (街のことでなくて、外国人という意味)でした。不幸なことに、
 アレクサンダー・ヤルトは、ヘンテコな会話表現集を出版しました。
</aside>

図や表では、その関連の figcaptioncaption 要素、または、その前後の本文に脚注を入れることができます。

この例では、表の中に、本文に書かれた脚注を伴うセルがあります。その表と脚注の組み合わせに対して、ひとつの説明文を与えるために、figure 要素が使われています。

<figure>
 <figcaption>表 1. ナイトの代替活動</figcaption>
 <table>
  <tr>
   <th> 活動
   <th> 場所
   <th> コスト
  <tr>
   <td> ダンス
   <td> 可能な限り
   <td> £0<sup><a href="#fn1">1</a></sup>
  <tr>
   <td> 日課, コーラス<sup><a href="#fn2">2</a></sup>
   <td> 未公表
   <td> 未公表
  <tr>
   <td> 食事<sup><a href="#fn3">3</a></sup>
   <td> キャメロット
   <td> ハムとジャムとスパムにかかるコスト<sup><a href="#fn4">4</a></sup>
 </table>
 <p id="fn1">1. 当然そのはず。</p>
 <p id="fn2">2. フットワークは申し分ない。</p>
 <p id="fn3">3. 品質が "良" と書かれたもの。</p>
 <p id="fn4">4. たっぷりと。</p>
</figure>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/common-idioms.html#common-idioms