上文：原文出处
在引言和前面的章节中,已经稍微提到过语义标签的概念,使用标签为文件标识意义,而不是单纯的以标签设定显示效果.设计完全使用语义标签的网页是个不错的点子.然而我觉得这个目标太理想化了.当然,没有完全达到目标并不代表努力过程毫无价值.至少朝着这个目标努力很有价值.
在现实情况下,经常有必要加上非语义标签,以便实现特定的设计目标,主要是因为现在著名的浏览器都无法百分之百支持标准的缘故.有些CSS规则在部分浏览器中无法显示正确的效果,而这不幸的让我们在达成某些设计目标的过程中必须使用额外的标签.
有个重要的概念必须放在心上:那就是尽量尝试撰写语义化结构将能带来实际的好处.同时,对标准的支持虽然没有达到百分之百,但也已经越过临界点让我们现在就能使用符合网络标准的方法撰写网页.有些时候必须做点牺牲,但是坚持撰写越多的符合标准的标签,未来的工作就会越轻松.
本章节将会讨论显示效果与结构标签的不同，更确切的说，是讨论使用<strong>替换<b>,以及使用<em>替换<i>的差异.在本章稍后,我们也会讨论几个其他短语元素以及它们在符合标准,结构化标签语法内的重要性.
你或许听说过某些人建议在需要粗体文字时要用<strong>替换<b>,但是他却没有进一步告诉你为什么需要这样的替换.在不知道"为什么"的情况下,实在很难期待其他网页设计者只因为听过需要这样做就改变他们对标签的使用习惯.
去掉<b>和<i>标签,替换成<strong>和<em>到底是有什么好处呢?其实这一切都是为了表达语义和结构,而不是为了只是显示效果,本书的所有示例也都努力遵循这个概念.
首先,来看看W3C在HTML4.01的短语元素规范里是怎么叙述<strong>和<em>的(http://www.w3.org/TR/html4/struct/text.html#h-9.2.1):
短语元素能在文字片段之内加上结构信息,常见的短语元素意义如下:
<em> 代表强调
<strong> 代表更强烈的强调
所以在此讨论的是两种不同程度的强调.举例来说,就是一个单字或者短语,念的时候应该比较大声,音调较高,念的快些,或者是...嗯,就是比一般文字内容更强调.
W3C接着还叙述了下面这段内容:
短语元素的展示效果随着浏览器的不同,一般来说可视化浏览器应该以斜体显示<em>的文字内容,以粗体显示<strong>的文字内容.语音合成软件则能配合内容改变合成参数,像是音量,音调与速度等等.
啊哈!最后一句特别有意思,语音合成软件(之前我们称之为屏幕阅读器)将会正确处理必须强调的文字,这的确是件好事.
相对之下,<b>或是<i>只是单纯的显示效果标签.如果我们的目标是将结构与显示效果分离的话,使用<strong>和<em>就是正确的选择,单纯想要显示粗体,斜体文字的时候用css就好了.本章稍后会讨论更多例子.
接着看两个标识示例,帮助我们了解它们的差异.
your order number for future reference is: <b>6474-82071</b>.
your order number for future reference is: <strong>6474-82071</strong>.
这个情况是使用<strong>比<b>更适合的完美例子,我们打算让句子内的特定文字显示的更加重要.除了粗体显示订单编号以外,我们也希望屏幕阅读器也改变它们表达这段内容的方式:提升音量,改变音调或速度.方法B能够同时达到这两个目的.
同样的,以<em>取代<i>,能够同时表达重要性,而不只单纯的以斜体显示文字内容.来看看这两个例子:
It took me not one,but <i>three</i> hours to shovel my driveway this morning.
It took me not one,but <em>three</em> hours to shovel my driveway this morning.
在前面的例子里(本书撰写时的真实情况),我的目的是使"three"这个字以强调语气表现,如同我大声念出这个字,视觉上,方法B在大多数浏览器里都会以斜体显示,而屏幕阅读器也会适当的调整音色,速度或音量.
必须注意的是,很多情况下只需要视觉上展示粗体,斜体的文字效果,换句话说,假设你的侧边栏里有一串链接列表,而你喜欢让所有链接用相同的效果显示:也就是粗体(图6-1)
图6-1.粗体链接放在侧边栏里的示例
除了视觉特色外,我们并不打算特别强调链接内容,这里就是以CSS改变链接外观显示效果的好地方,让他们不会被屏幕阅读器以及其他非可视化浏览器特别强调.
举例来说,你真的想让粗体链接被念得更快,更大声,音调更高吗?大概不会,这边的粗体完全只是显示效果.
为了达到图6-1的显示效果,让我们假设链接栏放在id设为sidebar的<div>中,这样我们就能用CSS指定#sidebar之内的链接要以粗体显示:
#sidebar a{
font-weight:bold;
}
极度简单,让我觉得一提起就有些可笑,但是这的确是个帮助分离结构与显示效果的好方法.
同样的,在思考斜体文字的时候也能应用类似的想法,在你不想强调的内容,只单纯想以斜体显示文字时,你能再度使用font-style属性通过CSS处理这些状况
让我们使用相同的#sidebar作为示例,举例来说如果你想使#sidebar里的所有链接显示成斜体,那么可以这样写:
#sidebar a{
font-style:italic;
}
又是个简单至极的概念,但是在结构化标记语法的领域里,我觉得讨论这些情况十分重要--使用CSS处理央视,代替显示效果标签的状况.有些时候最简单的解决方法也最容易被忽略.
在打算同时用粗体和斜体显示文字内容的时候,我觉得必须先思考一个问题,你打算传达什么程度的强调?根据这个问题的答案,我会选择适当的标签:<em>(强调)或<strong>(更强烈的强调),然后以选择的标签标记文字.
举例来说,以下面的例子来说,我原本打算让"fun"同时以粗体,斜体显示,最后我选择用<em>来强调这个字.
Building sites with web standards can be <em>fun</em>!
大多数浏览器只会以斜体来显示这个字,要同时使用粗体和斜体,我们有几种选择.哦,我真的希望你同意上面这句话.
方法之一,是以普通的<span>包在"fun"之外,并且指定CSS规则将所有<em>之内的<span>以粗体显示.标记语法看起来像这样:
Building sites with web standards can be <em><span>fun</span></em>!
而CSS看起来则像这样:
em span{
font-weight:bold;
}
明显的语义部分并不好,因为我们加上了额外的标签,但是这个方法人人仍然有用.
另一个方法则是为<em>标签指定一个class,并且以CSS加上粗体效果,标记语法看起来像这样:
Building sites with web standards can be <em class="bold">fun</em>!
而CSS看起来则像这样:
em.bold{
font-weight:bold;
}
使用<em>就能达成斜体效果(同时在语义上强调了文字内容),而为它加上bold class则会使<em>之内的文字以粗体显示.
类似的方法也能用来修饰<strong>.这时我们能在加重强调某段文字的时候,设计italic class加上斜体效果,再配上<strong>原来就有的粗体效果.
标记语言看起来像这样:
Building sites with web standards can be <strong class="italic">fun</strong>!
而CSS则是这样:
strong.italic{
font-style:italic;
}