作者：阿宏 2005-4-15 20:45:18
原文：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方法来样式化。
更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把
显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。
Les lecteurs d'écran, les PDA, les téléphones portables et les navigateurs visuels et non visuels comprendront tous quoi faire lorsqu'ils rencontrent une balise de titre, la géreront correctement et la traiteront plus au sérieux que le texte ordinaire sur la page. Avec la balise , les navigateurs qui ne prennent pas en charge CSS ne le traiteront pas spécialement.
Styles par défaut ennuyeux
Dans le passé, les concepteurs auraient pu éviter entièrement d'utiliser les balises de titre en raison des paramètres par défaut du navigateur. Vous pouvez également éviter d'utiliser
ou en raison de la taille énorme des valeurs par défaut, et utiliser plutôt une balise de titre numérique plus élevée pour obtenir une taille plus petite.
Cependant, il est important de souligner que nous pouvons facilement modifier ces balises de titre en utilisant CSS - par exemple, un
Plus tard, je démontrerai à quel point il est simple de styliser les balises de titre avec CSS, ce qui, espérons-le, atténuera certaines de vos craintes accablantes.
Convivial pour les moteurs de recherche
C'est un énorme avantage. Les moteurs de recherche adorent les balises de titre. D'un autre côté, une balise ou une balise de paragraphe en gras ordinaire signifie quelque chose de moins. Marquer vos titres de manière appropriée de à ne nécessite que peu d'efforts de votre part, mais facilite l'exploration de vos pages par les moteurs de recherche, afin que les internautes puissent les trouver.
Les robots des moteurs de recherche accorderont une attention particulière aux balises de titre – c'est là que vous pourrez mettre des mots-clés. Tout comme
et <meta> sont récupérés, ils rechercheront dans la page le long de la balise de titre. Si vous n'utilisez pas ces balises, les mots-clés qu'elles contiennent ne seront pas considérés comme précieux et seront ignorés. </p>
<p>Ainsi, avec juste un petit effort, vous pouvez augmenter la probabilité que les internautes trouvent votre site en fonction du contenu de votre page. Ça a l'air bien, n'est-ce pas ? </p>
<p>À propos de l'ordre des titres<br>Dans l'exemple, ce titre particulier est le plus important de la page car c'est le titre du document. Par conséquent, nous utilisons la balise de titre la plus importante, <h1>. Suivant la spécification du W3C, certains pensent que sauter plusieurs niveaux de titre est une mauvaise pratique. Par exemple, imaginez que nous sommes sur la page suivante : </p>
<p><h1>Titre de l'article</h1> <br>Notre prochain titre (s'il n'est pas répété avec un autre <h1>) devrait être <h2>, puis <h3>, etc. Vous ne devriez probablement pas sauter un niveau après <h1> et passer directement à <h3>. J'ai tendance à être d'accord avec le point de vue ci-dessus et à maintenir la continuité des niveaux tout au long du texte pour construire une structure de mise en page. De cette façon, il est plus facile d'ajouter des titres et des styles à une page déjà existante et vous réduirez les erreurs causées par l'utilisation de numéros supplémentaires. </p>
<p>Comme mentionné précédemment, les concepteurs peuvent utiliser <h4> pour étiqueter le titre le plus important d'une page, simplement parce que sa taille de police par défaut n'est pas aussi odieuse que <h1>. Mais n’oubliez pas : structurez d’abord, concevez ensuite. Nous pouvons toujours utiliser CSS pour styliser les titres selon la taille de texte de notre choix. <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="CSS résout le problème du centrage vertical de hauteur inconnue_CSS/HTML" href="http://m.php.cn/fr/faq/1247.html">CSS résout le problème du centrage vertical de hauteur inconnue_CSS/HTML</a></span><span>Article suivant：<a class="dBlack" title="CSS résout le problème du centrage vertical de hauteur inconnue_CSS/HTML" href="http://m.php.cn/fr/faq/1250.html">CSS résout le problème du centrage vertical de hauteur inconnue_CSS/HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/347776.html" title="Résumé de six méthodes d'implémentation de l'événement JSDOMReady" class="aBlack">Résumé de six méthodes d'implémentation de l'événement JSDOMReady</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348838.html" title="Exemples d'implémentation CSS de diverses dispositions de colonnes sur la page" class="aBlack">Exemples d'implémentation CSS de diverses dispositions de colonnes sur la page</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/349106.html" title="Effets de diaporama réactifs plein écran CSS3 purs" class="aBlack">Effets de diaporama réactifs plein écran CSS3 purs</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/349108.html" title="Style de bouton 3D coloré et cool CSS3 pur" class="aBlack">Style de bouton 3D coloré et cool CSS3 pur</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/349109.html" title="Superbes effets d'animation de menu hexagonal CSS3" class="aBlack">Superbes effets d'animation de menu hexagonal CSS3</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
