原文：What is the Best Way to Mark up the Title of a Document?
说明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号：ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
原作者：Dan Cederholm
翻译：阿宏
一个文档标题，最好的定义方法是什么？要回答这个问题，先设想我们要在一个页面上定义文章的标题，通常我们有三个方法来实现这个简单目的：
方法一： 有意义吗？
文章标题
虽然在某些情况下会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个CSS规则，分配其一个heading class，使其文字象标题一样显示。
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok，现在所有的标题都用heading class标记成了大号的粗体字体，并且为蓝色。太棒了！但是这样做对吗？如果有人用一个不支持CSS的浏览器来观看，会怎样呢？
举个例子，如果我们设置的这个外部样式表的规则不被老版本的浏览器支持，会怎样？又或者有视觉障碍的人用屏幕阅读器来阅读这个页面，又会怎样？一个访问者通过这些途径所看到（或听到）的应该和这个页面上正常的文本没有任何区别。
尽管class="heading"为这个标签增加了一点意义，但仍然只是一个普通的标签，可以被大多数浏览器的缺省样式所修改掉。
搜索引擎检索这个页面时会略过标签，就好象它不存在一样，不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。
最后，由于标签是一个内嵌元素，我们可能需要把它嵌套在一个额外的块级元素中，比如标签或 标签，为的是使它能够形成单独的行，这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的，这样才能使不支持CSS的浏览器显示出没有差别的文本。 方法二: 和组合
文章标题 使用一个段落标签，将会给我们带来块级的显示， 会把文本变成粗体。但是用这个方法标记一个重要的标题时，我们面对的是同样无意义的结果。
不象方法A，标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和标签一样，搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。
难以设计样式
用普通的和的组合，也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题，来使页面内容更清晰更具结构，但是用这个方法只能使其显示成粗体。
方法三:样式加实质
文章标题
恩，多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们， 就能为页面内容提供灵活的、可索引的、以及可样式化的结构。
这也是聪明的定义方法，你会发现它很简单。不再需要额外的标签，你可以说，这仅仅比另外两个方法节省了一点点的字节，可以忽略不计，但节省一点是一点。
一直到，代表了标题的六个级别，从最重要的（）到最次要的（）。他们本身就是块级的，不需要增加其它元素来使其单独成行。简单，有效——就是好工具。
轻松定制样式
因为我们使用标签是唯一的，而或标签更适合使用在整个页面，所以我们可以用各种各样的CSS方法来样式化。
更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把 显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。
屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白，碰到一个标题标签时该做的事情，正确的处理，比页面上的普通文本更重视的来对待。而使用标签，那些不支持CSS的浏览器就不会特别的对待它。
讨厌的默认样式
以往，由于浏览器默认的缺省值非常的丑陋，设计者们也许会避免完全的使用标题标签。或者，因为缺省值的巨大尺寸而避免使用或，取而代之的是用更高数值的标题标签来实现更小的尺寸。
然而，需要重点强调的是，我们可以很简单的用CSS来改变这些标题标签——举个例子，一个< ;h1>并非一定是占满大半屏幕的巨大标版。在后面，我将证明用CSS来样式化标题标签是多么的简单，希望可以帮助你减轻巨大的恐惧。
对搜索引擎友好的
这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面，一个标签或者普通的加粗的段落标签却在意味着次要一点。适当的用到标记你的标题，只需要你的一点点努力，然而却让搜索引擎更容易的检索到你的页面，让人们最终能找到它们。
搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 和<meta>，它们会顺着标题标签往页面下面查找。如果你不使用这些标签，那么包含在里面的关键词将不会被认为是有价值的，从而被忽略掉。<br>所以只要付出一点点的努力，你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错，不是吗？<br>关于标题的次序<br>在范例中，这个特别的标题是页面中最重要的，因为它是文档的标题。因此，我们使用最重要的标题标签，<h1>。顺应W3C的规范，一些人认为跳过数个标题级是个不好的使用。举个例子，想象我们在下面的页面：<br><h1>文章标题</h1> <br>我们接下去的标题（如果不是用另一个<h1>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h1>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。<br>前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。<br></td></tr></table>
<!--[diy=diycontentbottom]--><div id="diycontentbottom" class="area"></div><!--[/diy]-->
<script src="data/cache/home.js?R1y" type="text/javascript"></script>
<div id="click_div"><table cellpadding="0" cellspacing="0" class="atd">
<tr></tr>
</table>
<script type="text/javascript">
function errorhandle_clickhandle(message, values) {
if(values['id']) {
showCreditPrompt();
show_click(values['idtype'], values['id'], values['clickid']);
}
}
</script>
</div>
<!--[diy=diycontentclickbottom]--><div id="diycontentclickbottom" class="area"></div><!--[/diy]-->
</div>
<div class="o cl ptm pbm">
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=favorite&type=article&id=20079&handlekey=favoritearticlehk_20079" id="a_favorite" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr ofav">收藏</a>
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=share&type=article&id=20079&handlekey=sharearticlehk_20079" id="a_share" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr">分享</a>
<a href="misc.php?mod=invite&action=article&id=20079" id="a_invite" onclick="showWindow('invite', this.href, 'get', 0);" class="oshr oivt">邀请</a>
</div>
</div>
<!--[diy=diycontentrelatetop]--><div id="diycontentrelatetop" class="area"></div><!--[/diy]-->
<!--[diy=diycontentrelate]--><div id="diycontentrelate" class="area"></div><!--[/diy]-->
<div id="comment" class="bm">
<div class="bm_h cl">
<h3>最新评论</h3>
</div>
<div id="comment_ul" class="bm_c"><form id="cform" name="cform" action="portal.php?mod=portalcp&ac=comment" method="post" autocomplete="off">
<div class="tedt">
<div class="area">
<textarea name="message" rows="3" class="pt" id="message" onkeydown="ctrlEnter(event, 'commentsubmit_btn');"></textarea>
</div>
</div>
<input type="hidden" name="portal_referer" value="portal.php?mod=view&aid=20079#comment">
<input type="hidden" name="referer" value="portal.php?mod=view&aid=20079#comment" />
<input type="hidden" name="id" value="0" />
<input type="hidden" name="idtype" value="" />
<input type="hidden" name="aid" value="20079">
<input type="hidden" name="formhash" value="cfbb8071">
<input type="hidden" name="replysubmit" value="true">
<input type="hidden" name="commentsubmit" value="true" />
<p class="ptn"><button type="submit" name="commentsubmit_btn" id="commentsubmit_btn" value="true" class="pn"><strong>评论</strong></button></p>
</form>
</div>
</div>
<!--[diy=diycontentcomment]--><div id="diycontentcomment" class="area"></div><!--[/diy]-->
</div>
<div class="sd pph">
<div class="drag">
<!--[diy=diyrighttop]--><div id="diyrighttop" class="area"></div><!--[/diy]-->
</div>
<div class="bm">
<div class="bm_h cl">
<h2>相关分类</h2>
</div>
<div class="bm_c">
<ul class="xl xl2 cl"><li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=21">设计资讯</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=22">平面设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=23">标志设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=24">空间设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=25">工业设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=26">网页设计</a></li>
</ul>
</div>
</div>
<div class="drag">
<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
</div>
</div>
</div>
<div class="wp mtn">
<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
</div>
<input type="hidden" id="portalview" value="1"> </div>
<div id="ft" class="wp cl">
<div id="flk" class="y">
<p>
<a href="//wpa.qq.com/msgrd?v=3&uin=8828254&site=微赢网络技术论坛&menu=yes&from=discuz" target="_blank" title="QQ"><img src="static/image/common/site_qq.jpg" alt="QQ" /></a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?mod=misc&action=showdarkroom" >小黑屋</a><span class="pipe">|</span><a href="topic-sitemap.html" target="_blank" >最新主题</a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><strong><a href="http://bbs.weiying.cn" target="_blank">微赢网络技术论坛</a></strong>
( <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备08020429号</a> )<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a66c064273122db3a05de72f6cd924eb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
<p class="xs0">
GMT+8, 2024-9-30 13:20<span id="debuginfo">
, Processed in 0.219599 second(s), 12 queries
, Gzip On, MemCache On.
</span>
</p>
</div>
<div id="frt">
<p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> <em>X3.5</em></p>
<p class="xs0">© 2001-2023 <a href="https://code.dismall.com/" target="_blank">Discuz! Team</a>.</p>
</div></div>
<script src="home.php?mod=misc&ac=sendmail&rand=1727673651" type="text/javascript"></script>
<div id="scrolltop">
<span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span>
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
</body>
</html>
|
