HTML：活文档标准

如果某个站点在每个页面上都使用一致的导航工具栏，则通常链接到该页面的链接可以使用 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>

这里，“章节”一词和实际的章节编号仅仅是样板，而章节的实际名称则使用 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>

在这个示例中，标题实际上是“花、蜜蜂和蜂蜜”，但作者在标题中添加了一个轻松的补充。因此，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>

在这个第二个示例中，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>

在以下片段中，术语“车库门开启器”首先在第一段中定义，然后在第二段中使用。在这两种情况下，实际显示的是它的缩写。

<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元素标记的缩写。本段定义了术语“万维网超文本应用技术工作组”。

<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>

本段有两个缩写。请注意，只有一个被定义；另一个没有关联的扩展，不使用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”的首字母缩略词有四个注释：一个用于整个首字母缩略词，简要描述了它是什么，一个用于字母“HT”，将其扩展为“超文本”，一个用于字母“M”，将其扩展为“标记”，一个用于字母“L”，将其扩展为“语言”。

<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.

这里，一个简短的表格使用data元素对其数值进行了编码，以便表格排序JavaScript库可以为每一列提供排序机制，尽管数字在一个列中以文本形式呈现，在另一个列中以分解形式呈现。

<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>

在此示例中，另一篇文章的发布日期使用 time 进行了标记，这次使用了 schema.org 微数据词汇表。

<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>

在此第二个代码段中，值包含一个时间。

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

页面加载的脚本（因此可以访问页面使用 time 元素标记日期和时间的内部约定）可以扫描页面并查看其中的所有 time 元素以创建日期和时间的索引。

例如，此元素传达字符串“星期五”，并带有额外的语义，即 2011 年 11 月 18 日是对应于“星期五”的含义。

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>
 <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>

此第二个示例显示了控制台程序的示例输出块。嵌套的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>

此第三个示例显示了一个输入块及其相应的输出。该示例同时使用了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>

在此第二个示例中，用户被告知选择特定的菜单项。外部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> 元素的情况是标记导语（或导语）句子或段落。以下示例展示了如何标记一篇关于小猫收养兔子为己有的 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>

在前面的示例中，应使用的正确元素是 <strong>，而不是 <b>。

在此示例中，<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>

（但是，如果目标是将元素标记为拼写错误，则可能带有类的 <u> 元素会更合适。）

<mark> 元素的另一个示例是突出显示与某个搜索字符串匹配的文档部分。如果有人查看了一个文档，并且服务器知道用户正在搜索“小猫”这个词，那么服务器可能会返回一个修改后的文档，其中一段如下所示。

<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> 突出显示最初未强调的引用文本的一部分。在此示例中，常见的排版约定导致作者明确地设置了引号中 <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> 元素之间的区别，<em> 元素是正在引用的原始文本的一部分，而 <mark> 元素则突出显示了一部分以供评论。

以下示例展示了表示文本片段的重要性（strong）与表示文本片段的相关性（mark）之间的区别。这是一个教科书摘录，其中与考试相关的部分已被突出显示。安全警告虽然很重要，但显然与考试无关。

<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”放在“User”一词旁边，而不是“posts”一词旁边）。

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

在此示例中，代码片段使用span 元素和class 属性进行标记，以便其关键字和标识符可以从 CSS 中进行颜色编码。

<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>

在以下示例中，有人引用某人说的话，为了效果，将其写成一个长词。但是，为了确保文本可以以可读的方式换行，引文中的各个单词使用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>

Available starting on <time datetime="2011-11-18">November 18th</time>!

The <code>fruitdb</code> program can be used for tracking fruit production.

If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.