HTML 5.1 日本語訳

次の例において、ウェブページのタイトルおよびサブタイトルは、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>
   

次の例において、本のサブタイトルは、コロンで区切られたタイトルと同じ行にある。タイトルとサブタイトルのサンプルCSSスタイルのレンダリングは、コード例の下方に設けられている。

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

アルバムタイトルの次の例において、タイトルの残りの部分とは異なるスタイルを設定することができるように、span要素に含まれる。br要素は新しい行にアルバムのタイトルを配置するために使用される。見出しのサンプルCSSスタイルのレンダリングは、コード例の下方に設けられている。

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

次の例において、ニュース記事のタイトルおよびサブタイトルは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>
   

この最後の例において、ニュース雑誌のタイトルとキャッチコピーはheader要素を用いてグループ化される。タイトルはh2要素を使ってマークアップされ、キャッチフレーズはp要素となる。タイトルとキャッチコピーのサンプルCSSスタイルのレンダリングは、コード例の下方に設けられている。

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

次の例において、現在のページは示された経路を経由して到達できる。パスは、右矢印記号"→"を使用して示される。テキストラベルは、ユーザーコンテキストを与えるために提供される。リンクは、アイテム数の表示をユーザーに提供しリストとして構成される。

   <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を使って水平なリストとしてスタイルを設定できる：

パスの方向を示すために使用される右山カッコ記号">"の使用は、コンテキストで、その意味として推奨されず、明確にすべてのユーザーに伝達されない。

ここで、3つのタグは短いタグクラウドに含まれる：

<style>
@media screen, print, handheld, tv {
  /* should be ignored by non-visual browsers */
  .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">apple</a> <span>(popular)</span>
 <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">kiwi</a> <span>(rare)</span>
 <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>

それぞれのタグに関する実際の頻度は、title属性を用いて説明する。CSSスタイルシートは、異なるサイズの単語のクラウドにマークアップを変換するために提供されるが、CSSをサポートしないか視覚系でないユーザーエージェントのために、頻度によって様々なタグを分類するためにマークアップは"(popular)"または"(rare)"のような注釈を含む。したがって、すべてのユーザーが情報の恩恵を受けることが可能となる。

順序は特に重要でないので、（olよりむしろ）ul要素が使用される。リストは実際にはアルファベット順である一方で、タグの長さによって並べられる場合に同じ情報を伝えるだろう。

ページ自体に適用するタグを表すものではないため、tagのrelキーワードはこれらa要素で使用されない。これらはタグ自体をリスト化するインデックスの単なる一部である。

この例は、AbbotとCostelloの有名なスケッチ、Who's on firstからの抽出物を用いてこれを示す：

<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p> Abbott: Every dollar of it.

以下の抜粋は、インスタントメッセージの会話ログが、行ごとのUnixタイムスタンプを提供するためにdata要素を使用して、マークアップする方法を示す。タイムスタンプは、time要素が対応していない形式で提供されており、よってdata要素が（すなわち、Unixのtime_tのタイムスタンプ）代わりに使用されることに注意されたい。著者は、time要素でサポートされる日付と時刻のいずれかを使用してデータをマークアップすることを望んだが、その要素は、dataの代わりに使用されていたかもしれない。データ分析ツールがページの著者と調整することなく、明確にタイムスタンプを検出することを可能にするので、これは都合がよいかもしれない。

<p> <data value="1319898155">14:22</data> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <data value="1319898192">14:23</data> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <data value="1319898200">14:23</data> <b>egof</b> it's unarguably
<p> <data value="1319898228">14:23</data> <i>* kaj blinks</i>
<p> <data value="1319898260">14:24</data> <b>kaj</b> you are not helping your case

HTMLは、グラフをマークアップするための良い方法を持たないので、ゲーム由来のインタラクティブな会話の記述をマークアップするのはより困難である。この例は、会話の各時点での可能な応答を列挙するためにdl要素を用いて1つの可能な規則を示す。考慮すべきもう一つのオプションは、DOTファイル形式で会話を記述するものであり、文書内に配置するSVG画像として結果を出力している。[DOT]

<p> Next, you meet a fisherman. You can say one of several greetings:
<dl>
 <dt> "Hello there!"
 <dd>
  <p> He responds with "Hello, how may I help you?"; you can respond with:
  <dl>
   <dt> "I would like to buy a fish."
   <dd> <p> He sells you a fish and the conversation finishes.
   <dt> "Can I borrow your boat?"
   <dd>
    <p> He is surprised and asks "What are you offering in return?".
    <dl>
     <dt> "Five gold." (if you have enough)
     <dt> "Ten gold." (if you have enough)
     <dt> "Fifteen gold." (if you have enough)
     <dd> <p> He lends you his boat. The conversation ends.
     <dt> "A fish." (if you have one)
     <dt> "A newspaper." (if you have one)
     <dt> "A pebble." (if you have one)
     <dd> <p> "No thanks", he replies. Your conversation options
     at this point are the same as they were after asking to borrow
     his boat, minus any options you've suggested before.
    </dl>
   </dd>
  </dl>
 </dd>
 <dt> "Vote for me in the next election!"
 <dd> <p> He turns away. The conversation finishes.
 <dt> "Sir, are you aware that your fish are running away?"
 <dd>
  <p> He looks at you skeptically and says "Fish cannot run, sir".
  <dl>
   <dt> "You got me!"
   <dd> <p> The fisherman sighs and the conversation ends.
   <dt> "Only kidding."
   <dd> <p> "Good one!" he retorts. Your conversation options at this
   point are the same as those following "Hello there!" above.
   <dt> "Oh, then what are they doing?"
   <dd> <p> He looks at his fish, giving you an opportunity to steal
   his boat, which you do. The conversation ends.
  </dl>
 </dd>
</dl>

一部のゲームにおいて、会話はより単純である。各文字は単に、彼らが言うことを行の固定セットを持つ。この例において、ゲームのFAQ/チュートリアルは、各文字の既知の可能な応答の一部を示す：

<section>
 <h1>Dialogue</h1>
 <p><small>Some characters repeat their lines in order each time you interact
 with them, others randomly pick from amongst their lines. Those who respond in
 order have numbered entries in the lists below.</small>
 <h2>The Shopkeeper</h2>
 <ul>
  <li>How may I help you?
  <li>Fresh apples!
  <li>A loaf of bread for madam?
 </ul>
 <h2>The pilot</h2>
 <p>Before the accident:
 <ul>
  </li>I'm about to fly out, sorry!
  </li>Sorry, I'm just waiting for flight clearance and then I'll be off!
 </ul>
 <p>After the accident:
 <ol>
  <li>I'm about to fly out, sorry!
  <li>Ok, I'm not leaving right now, my plane is being cleaned.
  <li>Ok, it's not being cleaned, it needs a minor repair first.
  <li>Ok, ok, stop bothering me!Truth is, I had a crash.
 </ol>
 <h2>Clan Leader</h2>
 <p>During the first clan meeting:
 <ul>
  <li>Hey, have you seen my daughter?I bet she's up to something nefarious again...
  <li>Nice weather we're having today, eh?
  <li>The name is Bailey, Jeff Bailey. How can I help you today?
  <li>A glass of water?Fresh from the well!
 </ul>
 <p>After the earthquake:
 <ol>
  <li>Everyone is safe in the shelter, we just have to put out the fire!
  <li>I'll go and tell the fire brigade, you keep hosing it down!
 </ol>
</section>

この例において、対話における脚注は、ダイアログの下の段落にリンクする。段落は、ユーザーが脚注の場所に戻ることができるように、対話へ相互にリンクする。

<p> Announcer: Number 16: The <i>hand</i>.
<p> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <em>do</em> you
contradict people?
<p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
...
<section>
 <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.</p>
</section>

この例では、サイドバーはそれにいくつかの文脈を与えて、対話の後に与えられる。

<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: I'm sorry?
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
<aside role="note">
 <p>In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
</aside>

asideの使用を許可される、上記の例で、ARIA role="note"は、このコンテキストで要素の用途として、noteロールにより密接にマッチするaside要素のデフォルトセマンティックを上書きするために追加される。

In this example, a table has cells with footnotes that are given in prose. figure要素は、表とその脚注の組み合わせを単一の凡例に与えるために使用される。

<figure>
 <figcaption>Table 1. Alternative activities for knights.</figcaption>
 <table>
  <tr>
   <th> Activity
   <th> Location
   <th> Cost
  <tr>
   <td> Dance
   <td> Wherever possible
   <td> £0<sup><a href="#fn1">1</a></sup>
  <tr>
   <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
   <td> Undisclosed
   <td> Undisclosed
  <tr>
   <td> Dining<sup><a href="#fn3">3</a></sup>
   <td> Camelot
   <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
 </table>
 <p id="fn1">1. Assumed.</p>
 <p id="fn2">2. Footwork impeccable.</p>
 <p id="fn3">3. Quality described as "well".</p>
 <p id="fn4">4. A lot.</p>
</figure>