HTML: The Living Standard

サイトがすべてのページに一貫性のあるナビゲーションツールバーを使用する場合、通常ページ自身へリンクするリンクは、a要素を使ってマークアップできる：

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

a要素は、全体のセクションであっても、インタラクティブコンテンツ内（たとえばボタンや他のリンク）に存在しない限り、全体の段落、リスト、テーブルなどの周りを包むことができる。この例は、これがリンクに全体の広告ブロックを作るために使用できる様子を示す：

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

次の例は、少しのスクリプトを使用して、求人一覧表の行全体を効果的にハイパーリンクにする方法を示している：

<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

以下の例は、強調を変更することで意味がどのように変化するかを示す。まず、強調のない、事実である一般文：

<p>Cats are cute animals.</p>

最初の単語を強調することによって、発言は、議論される動物の種類（おそらく誰かが犬はかわいいと主張している）が問題であることを意味する：

<p><em>Cats</em> are cute animals.</p>

動詞に強調を移動することで、文全体の真偽が問題である（おそらく誰かが猫はかわいくないと言っている）ことを強調する：

<p>Cats <em>are</em> cute animals.</p>

形容詞に移動することで、猫の的確な性質を断言する（おそらく誰かが猫は平均な動物だとほのめかした）：

<p>Cats are <em>cute</em> animals.</p>

同様に、誰かが猫は野菜であったと主張した場合も、誰かが最後の単語を強調することでこれを修正する：

<p>Cats are cute <em>animals</em>.</p>

文全体を強調することによって、話者が言いたいことを伝えるために懸命に戦っていることが明らかになる。この種の強調はまた、ここでは感嘆符に、典型的には句読点に影響を与える。

<p><em>Cats are cute animals!</em></p>

かわいらしさを強調するともに怒りが、次のようなマークアップにつながるかもしれない：

<p><em>Cats are <em>cute</em> animals!</em></p>

ここでは、単語"chapter"および実際の章番号は、単なる定型文であり、かつ章の実際の名前は、strongでマークアップされている：

<h1>Chapter 1: <strong>The Praxis</strong></h1>

次の例において、キャプションにおける図の名前は、定型句（前）と描写（後）とを区別するために、strongでマークアップされている：

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

次の例において、実際の見出しは"Flowers, Bees, and Honey"であるが、著者は見出しに陽気な付け足しを追加している。したがって、strong要素は、後半から見出しを区別しようとして前半をマークアップするために使用される。

<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>

これは、どの程度重要であるかによってマークアップした様々な部分をもつ、ゲーム内の警告通知の例である：

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

この例において、strong要素は、ユーザーが最初に読むことを意図するテキストの一部を示すために使用される。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

この例において、small要素は、付加価値税がホテルの部屋の料金に含まれないことを示すために使用される：

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

この2番目の例において、small要素は記事で付随するコメントに対して使用される。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

次は、長く複数の段落かもしれず、かつ主要なテキストフローから削除される、サイドバーとは別個のものである。次の例において、同じ記事由来のサイドバーが見られる。このサイドバーはまた、サイドバーの中に情報のソースを示す、小さな活字体を持つ。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

この最後の例において、small要素は、重要な小さな活字体であるものとしてマークされる。

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

この例において、新たな販売価格を持つ問題の製品がもはや関連しないものとして、推奨小売価格がマークされている。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

次の例は、cite要素の典型的な使用例を示す：

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

これは正しい使い方である：

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

しかし、ここでcite要素が作品のタイトルよりもより多くを含むので、次は誤った使用方法である：

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

cite要素は参考文献の任意の引用の重要な部分であるが、それはタイトルをマークするためのみに使用される：

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

citeは引用文のためのものでないので、これは間違った使い方である：

<p><cite>This is wrong!</cite>, said Ian.</p>

人は作品ではないので、これも誤った使い方である：

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

正しい使用法は、cite要素を使用しない。

<p><q>This is correct</q>, said Ian.</p>

前述したように、b要素は、文書の特定の種類においてのキーワードであるような名前をマークに対して関連するかもしれない：

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

ここで、q要素の用法の簡単な例を示す：

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

これは、q要素で明示的な引用リンクと、外部への明示的な引用の両方を持つ例である：

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

次の例は、引用文自身が引用文を含む：

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

次の例において、引用符はq要素の代わりに使用される：

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

次の例では、引用文が存在しない―引用符は、単語を明示するために使用される。この場合のq要素の使用は不適切であろう。

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

次の断片において、用語"Garage Door Opener"が第1段落で最初に定義され、第2段落で使用される。どちらの場合も、その略語は、実際に表示されるものである。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

a要素を追加することで、参照は明示的にできる：

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

下記の段落はabbr要素でマークアップされた略語を含む。この段落は、"Web Hypertext Application Technology Working Group"という用語を定義する。

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

これを記述する別の方法は、次のようになる：

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

この段落は、2つの略語を持つ。一方がどのように定義されるかのみに注目する。他方は、それに関連付けられている完全表記を持たず、abbr要素を使用しない。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

この段落は、その定義に略語をリンクする。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

この段落は、おそらく略語のスタイル（たとえば、スモールキャップ）を適用するためのフックとして、完全表記を与えずに略語をマークアップする。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

ここでは、複数形は要素の外にあるので、完全表記は単数形である：

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

ここでは、複数形は要素の内にあるので、完全表記は複数形である：

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

この例において、日本語テキスト漢字での各表意文字は、そのひらがなでの読みに結びつけられる。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

これはこのようにレンダリングされるだろう：

この例において、繁体字テキスト漢字での各表意文字は、その注音符号での読みに結びつけられる。

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

これはこのようにレンダリングされるだろう：

この例において、簡体字テキスト汉字での各表意文字は、そのピンインでの読みに結びつけられる。

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

これはこのようにレンダリングされるだろう：

このより計画的な例において、頭字語"HTML"は4つの注釈を持つ。1つは頭字語全体に対するもので、これが何であるかを簡単に説明し、1つは文字"HT"を展開した"Hypertext"、1つは文字Mを展開した"Markup"、1つは文字"L"を展開した"Language"である。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

テキスト漢字での各表意文字はその読みふりがなの注釈をもつ上記の例は、レガシーユーザーエージェントでの読みは括弧内にあるので、rpを使用するように拡張できる：

...
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>
...

適合ユーザーエージェントでのレンダリングは前述のようになるが、ルビがサポートされないユーザーエージェントにおいて、レンダリングは次のようになるだろう：

... 漢（かん）字（じ）...

セグメントに複数の注釈がある場合、rp要素はまた注釈の間に配置できる。これは英語とフランス語で与えられた名前を持つ一部のシンボルを示す以前の不自然な例の別のコピーだが、今回は同様にrp要素をもつ：

<ruby>
♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
</ruby>

これは、たとえばレンダリングが非ルビ対応のユーザーエージェントでは次のようになるだろう：

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

ここでは、短いテーブルが、1列のテキスト形式でかつ別に分解された形式で提示された数字にもかかわらず、テーブルソートJavaScriptライブラリーは各列のソートメカニズムを提供することができるようにdataを用いてエンコードされた数値を持つ。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

time要素は、たとえばマイクロフォーマットの中で、日付をエンコードするために使用できる。以下は、time要素を使用するhCalendarの変種を使ったイベントをエンコードするための仮想的方法を示す：

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

ここでは、Atom語彙に基づく架空のマイクロデータ語彙が、ブログ記事の発行日をマークアップするtime要素で使用される。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

この例において、もう1つの記事の出版日は、schema.orgのマイクロデータ語彙を使用して、timeを使ってマークアップされる。

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

次の断片において、time要素は、後でスクリプトによって処理するために、ISO8601形式で日付をエンコードして使用される：

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

この2つ目の断片では、値は時刻を含む：

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

ページ（およびtime要素を使用して日付と時刻をマークアップするのページの内部規則に関係するもの）によってロードされたスクリプトは、ページをスキャンして、その中に日付と時刻のインデックスを作成するためにすべてのtime要素を見るかもしれない。

たとえば、この要素は2011年11月18日が"金曜日"に相当する意味であることを追加のセマンティックを持つ文字列"Friday"に伝える：

Today is <time datetime="2011-11-18">Friday</time>.

この例では、太平洋標準時で特定の時刻を指定する：

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

次の例は、句読点を含む、要素名とコンピューターコードをマークアップするために段落で要素が使用できる様子を示す。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

次の例は、コードのブロックがpreおよびcode要素を用いてマークアップする方法を示す。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

クラスは、使用される言語を示すためにこの例で使用されている。

次の段落で、文字"n"が文で変数として使用される：

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

この例において、式の中で変数を参照する説明とともに、式が示される。式そのものはMathMLでマークアップされるが、変数はvarを使用してfigureの凡例に記載される。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

ここで、質量とエネルギーの等価性を記述する方程式は文中で使用され、そしてvar要素は、その式の変数と定数をマークするために使用される：

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

この例はインラインで使用されているsamp要素を示す：

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

この2番目の例は、コンソールプログラム由来のサンプル出力のブロックを示す。ネストされたsampとkbd要素は、スタイルシートを使用するサンプル出力の特定要素のスタイリングを可能にする。非常に正確なスタイリングを可能にするために、さらに詳細なマークアップ注釈を付けるsampの部分もある。これを達成するために、span要素が使用される。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

この3番目の例は、入力およびそのそれぞれの出力のブロックを示す。この例では、codeとsamp要素の両方を使用する。

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

ここで、kbd要素は押すべきキーを示すために使用される：

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

この2番目の例において、ユーザーは特定のメニュー項目を選択するように告げられる。外側のkbd要素は、入力のそれぞれ個別の手順を表す内側のkbd要素とともに、入力のブロックをマークアップし、それらの内側のsamp要素は、メニューラベルの場合では、手順がシステムによって表示されているものに基づいて入力されることを示す：

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

このような精密さは必要ない。以下で十分である。

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

ここで、sub要素は変数群で変数を識別する添え字を表すために使用される：

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

以下の例は、i要素の用法を示す：

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

次の例において、夢の場面はi要素を用いてマークアップされる。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

次の例は、重要なものとしてマークせずにキーワードを強調するためのb要素の使用方法を示す：

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

次の例において、テキストアドベンチャー内のオブジェクトは、b要素を使用することにより、特別なものとして強調される。

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

b要素が適切であるもう1つのケースは、リード文または段落をマークアップである。次の例は、ウサギを養子にする子猫に関するBBCの記事をマークアップする様子を示す：

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

以下は、間違った使用法になる：

<p><b>WARNING!</b> Do not frob the barbinator!</p>

上の例において、使用すべき適切な要素はbではなく、strongだろう。

この例において、u要素は綴り間違いとして単語をマークするために使用される：

<p>The <u>see</u> is full of fish.</p>

この例は、mark要素が引用の特定の部分に注意を喚起するために使用する様子を示す：

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

（しかし、対象がスペルミスとして要素をマークしていた場合、おそらくclassをもつu要素がより適切だろう。）

mark要素のもう1つの例は、検索文字列に一致している文書の部分を強調することである。誰かが文書を見て、ユーザーが単語"kitten"を探していたことをサーバーが知っていた場合、サーバーは以下のような段落の変更とともに文書を返すかもしれない。

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

次の断片において、テキストの段落はコード断片の特定部分に言及する。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

spanがより適切なため、これは構文の強調表示と区別される。両方組み合わせることで、次のようになるだろう：

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

これは、オリジナルでは強調されない引用テキストの一部を強調するためにmarkの用途を示すもう1つの例である。この例において共通の表記規則は、イタリック体でレンダリングする引用文で明示的にmark要素で著者にスタイル付けをもたらす。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

ちなみに、この例においてem要素との区別は、引用されている元のテキストの一部であり、かつコメント部分を強調しているmark要素であることに注意する。

次の例は、テキストの範囲（mark）の関連性を示すことと対照的に、テキストの範囲（strong）の重要性を示すこととの違いを示す。これは、抽出物が試験の強調に関連する部分を持っていた教科書からの抜粋である。安全上の警告は重要であるかもしれないが、明らかに試験に関連しない。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

未知の方向とともにユーザー生成コンテンツを組み込む場合、この要素は特に便利である。

この例において、ユーザー名はユーザーが送信したポストの数とともに表示される。bdi要素が使用されなかった場合、アラビア語ユーザーのユーザー名は、テキストの区別がつかないことになるだろう（双方向アルゴリズムは、コロンと数字"3"の次に単語"posts"よりむしろ単語"User"を置くだろう）。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

この例において、コード断片は、そのキーワードと識別子がCSSで色分けできるように、span要素とclass属性を使ってマークアップされる：

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

次の例は、br要素の正しい使い方である：

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

これらはbr要素を濫用するので、次の例は不適合である：

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

これは、上記の代わりに正しいものである：

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

次の例において、効果があるように1つの長い単語として書かれる発言としてある人が引用される。しかし、テキストが読める形に改行されることを保証するために、引用内の個別の単語はwbr要素を使用して分離される。

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

Visit my <a href="drinks.html">drinks</a> page.

I must say I <em>adore</em> lemonade.

This tea is <strong>very hot</strong>.

These grapes are made into wine. <small>Alcohol is addictive.</small>

Price: <s>£4.50</s> £2.00!

The case <cite>Hugo v. Danielle</cite> is relevant here.

The judge said <q>You can drink water from the fish tank</q> but advised against it.

The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.

Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.

<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>

Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>