原文:http://docs.webplatform.org/wiki/tutorials/Lesser_-_known_semantic_elements
HTML5中比较常用的语义元素有header,nav,footer,这篇文章主要讲了一些不知名的语义元素。第一次翻译英文原文,措辞难免不准确,不清楚的地方,可参考原文。
简介:
今天我们通过这篇文章,来了解一下HTML中一些意义模糊和不知名的语义元素。我们将探讨标记程序代码、计算机交互、引用和缩写词和文本的更新等的元素。
高亮显示联系人信息
<address>或许是命名最不合理且最容易让人误解的HTML标签了。因为命名为“address”,第一眼看到它,似乎就只是用于标记地址,邮件地址,邮编或者类似信息。但是,这仅仅只是部分情况。
<address>实际上用于表示页面的作者,或者页面内的主要部分。表现形式可以是名字,邮件地址,通讯地址或者包含更多联系信息的另一个页面的链接地址。例如:
<address>
<span>Mark Norman Francis</span>,
<span class="tel">1-800-555-4865</span>
</address>
在下面的示例中,地址信息包含在<footer>中,并且是另一页面的链接地址。链接地址的目标页面包含更加详细的联系地址,来避免在整个网站中不断重复地址信息。
<footer>
<p>© Copyright 2011</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>
</footer>
当然,如果一个网站包含多个作者,也可以采用相同的方式,链接到不同作者的联系信息页面。
使用<address>来表示任何其他类型的地址,都是错误的,例如:
<p> Our company address: </p>
<address>
Opera Software ASA,
Waldemar Thranes gate 98,
NO-0175 OSLO,
NORWAY
</address>
(当然,如果Opera对本文承担责任,这样写也是正确的,即时Opera不是本文的作者)——呵呵,开玩笑的
对于任何通用地址,可以使用“microformat”来表示一个段落中包含一个地址。详细请参考more information on Microformats on dev.opera.com。
编程语言和代码
<code>元素表示程序代码或者编程语言,例如PHP,JavaScript,CSS和XML等。对于包含在一个句子中简短的编程语言,可以仅仅将元素包含在<code>标记中,如下所示:
<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>
对于包含缩进的多行代码,可以使用 up textual content in HTML文章中采用的格式化的块。
虽然没有定义<code>中包含的编程语言或代码的方法,但是可以使用class属性。一般采用“<language->+编程语言名”的格式,如下所示:
<p>It is bad form to use event handlers like
<code class="language-javascript">onclick</code>
directly in the HTML.</p>
一些编程语言的名字不易用class表示,如C#,表示形式为 “<class='language-c\#'>
”,但是容易误解。我建议class只包含字母和连字符,可以采用编程语言的英文读法 。因此,可以采用 “<class='language-csharp'>
”来代替。
显示计算机交互
<samp>和<kbd>可以用于表示与计算机的输入和输出交互。例如:
<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p> <pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
<samp>PING google.com (64.233.187.99): 56 data bytes
64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms --- google.com ping statistics ---
1 packets transmitted, 1 packets received, 0% packet loss
round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
</samp></pre>
<samp>表示计算机程序的输出示例,如上所示,不同的输出类型,采用不同的class属性。然而,针对class的取值,还没有广泛被接受的约定规则。
<kbd>表示用户和计算机的输入交互。虽然习惯上是指键盘输入,但是也可以用于表示其他类型的输入,如声音。
变量
<var>表示文本内容中的变量。包括代数表达式或者程序代码,例如:
<p>The value of <var>x</var> in
3<var>x</var>+2=14 is 4.</p> <pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>
引用
<cite>用于表示附近内容的来源——当引用一个人,一本书或其他类型的出版物,或者提示人们另一来源时,该来源必须采用<cite>包含,例如:
<p>The saying <q>Everything should be made as simple as possible,
but not simpler</q> is often attributed to <cite>Albert
Einstein</cite>, but it is actually a paraphrasing of a quote which
is much less easy to understand.</p>
缩写词
<abbr>用于表示出现的缩写词,并提供了一种不中断文本流,并扩展它们的方法。
缩写词包含在<abbr>中,全称采用title属性表示,例如:
<p>Styling is added to
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
注意:HTML4中有一个标签<acronym>,和<abbr>功能相同,只是<acronym>用于首字母缩略词。HTML5中去除了<acronym>,因为这两个标签功能的差别并不足以需要两个不同的标签来表示。
问题在于IE的支持,IE(IE7以下,包括IE7不提供其他浏览器已实现的采用下划线强调缩写的功能)不识别<abbr>标签,但是识别<acronym>。为了保证IE识别<abbr>,需要采用javascript新建<abbr>标签,将下面的代码放在页面的<head>标签中:
<script type="text/javascript">document.createElement('abbr');</script>
想了解为什么这样可行,可以阅读HTML structural elements#HTML5_element_support。当然,你也可以采用<acronym>,直到你想使用HTML5时。
定义实例
<dfn>的使用有些模糊,HTML规格中对它的定义是”定义封闭的实例“,这非常接近<dt>标签(定义术语)用于定义列表的思想。
区别在于<dfn>并不需要作为列表的一部分,并且可以用于普通文本内容,甚至是会话风格的散文。我们现在来看一下<dfn>的使用示例:
<p><dfn>HTML</dfn>: HTML stands for "HyperText Markup Language". This is
the language used to describe the contents of web documents.</p>
术语HTML后面,紧接着的是HTML的定义,因此,这是一个使用<dfn>的理想位置。在一个页面上,你应该只在第一次定义术语的时候使用,但是术语在一个页面,也只需要定义一次,所以不会很麻烦。
建议当一个缩写词在一个页面多次出现时,使用<dfn>,例如,在 文章The basics of HTML 中,HTML出现了40多次。每次都采用 “<abbr title="HyperText Markup Language">HTML</abbr>
”表示,将浪费带宽,产生视觉疲劳,而且对于使用屏幕阅读器的用户,将对每次重复的扩展HTML感觉十分厌烦,即使他们已经被告知它代表什么。相反,将以下代码插入HTML第一次定义的地方:
<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is
a language to describe the contents of web documents.</p>
接下来,无论什么时候使用HTML,都仅仅被标记为 “<abbr>HTML</abbr>
”。一个用户代理可以通过某种方法来获取HTML缩写的定义。
不幸的是,目前还没有任何用户代理可以实现这个,包括屏幕阅读器。采用title属性来提供这些信息会更好:
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> ("HyperText Markup Language") is a language to describe the contents of web documents.</p>
但是这样做,HTML的定义重复了,将对屏幕阅读器用户带来问题。而且,保留可见的HTML扩展将不利于视觉可见的用户,而视觉可见的用户才是最广大的用户群。
我建议当只有一个到两个术语需要定义时,可以接受这种方式(当一个页面需要定义大量的术语时,最好创建一个词汇或页面,以便于采用更加严格的定义)。如果你很注重这个,可以采用以下代码:
<p><abbr title="HyperText Markup Language">HTML</abbr>
(<dfn>HyperText Markup Language</dfn>) is a language to
describe the contents of web documents.</p>
用户代理仍然需要一些方法来将术语和术语定义联系起来。目前没有浏览器针对<dfn>进行处理,尽管它对CSS很有用。
这是一个不幸的例子,已经创建了规范却没有明确的对一个元素应该如何使用的指导方针,并且可能不是基于任何实际使用的场景——然而,这是一个联系术语和它的完整定义的方法。HTML5规格中有详细描述,[detail about how dfn is to be used],但是现在还只是草案,且没有任何浏览器采用它。
上标和下标
标记一个文本的上标和下标部分,可以使用<sup>和<sub>。
一些语言需要使用这两个元素,来正确的表示缩写。少量的数学表达式也可以采用<sub>和<sup>元素标记,而不用MathML(一个特定的,相当重要的数学标记语言,为标记重要的数学公式而创建)。如下所示:
<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=mc<sup>2</sup> — energy
is equal to the mass multiplied by the speed of light
squared.</p>
换行符
因为HTML定义空格的方式,无法通过回车符来控制一行本文在哪里换行(例如将一个通讯地址标记为一个段落,希望每个小的部分在单独的一行显示)。
换行符可以用<br>标记。但是,它只能在需要的时候强制换行,不能用于增加两个段落间的间隔——间隔一般用CSS实现。
有时候采用格式化文本块可能比插入<br>更简单。如果一段文本中,有某一部分需要单独一行显示,可以采用<span>标记,然后将<span>定义为块元素。
可以采用以下方式来标记Opera的通讯地址:
<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>
当然,如果你编写的是XHTML而非HTML,则需要写为<br/>。
水平线
HTML中的水平线采用<hr>标记。它将在文档中插入一行,代表文档中不同部分的边界。
有人认为,这种非语义的,纯粹视觉的显示效果,文学中也存在先例。在一个段落内,水平线将出现不同的次数和在不同的位置。同样,诗歌也可以使用装饰性的分隔符来分开不同的小节。
水平线不能用于证明一个新标题元素的存在,一般用于标记文档不同部分的边界。
<hr>没有特有的属性,当默认样式无法满足需求时,需要采用CSS定义样式。
和<br>一样,当你编写XHTML时,需要采用<hr/>。
文档的更改(插入,删除和过期)
当文档在它的原始版本上进行了更改,你需要在文档上标记出相对于原始版本更新的部分内容。
新增部分采用<ins>标记。已被删除的部分采用<del>标记。如果某一个部分同时进行新增和删除,一般建议先删除,再新增。
<ins>和<del>都包含两个属性,来赋予编辑更丰富的意义。
如果网页上声明了更新的原因,需要采用<cite>标记更新内容,表示“因为这个原因而更新文档”。
可以采用datetime属性,声明更新的时间。datetime的值必须是ISO标准时间戳,采用“YYYY-MM-DD HH:MM:SS ±HH:MM” (more information is available on wikipedia)。
如下所示:
<p>We should only solve problems that actually arise. As
<cite><del datetime="2008-03-25 18:26:55 Z"
cite="/changes.html#revision-4">Donald Knuth</del><ins
datetime="2008-03-25 18:26:55 Z"
cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
said: <q>premature optimization is the root of all
evil</q>.</p>
此外,我们可以采用<s>标记过期的内容,如果你想表示该内容已经更新或删除,例如:
<p><s>The president of the USA is currently George W. Bush</s>.</p>
总结
在这篇文章中,我们探讨了HTML中一些不知名,使用频率低的语义化标签。
注:原文最早发布作为Opera Web Standards Curriculum的一部分,作者是Mark Norman Francis。