作者：阿宏 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方法来样式化。
更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把
显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。
스크린 리더, PDA, 휴대폰, 시각적 및 비시각적 브라우저는 모두 제목 태그를 만났을 때 무엇을 해야 하는지 이해하고 이를 올바르게 처리하며 페이지의 일반 텍스트보다 더 심각하게 다룰 것입니다. 태그를 사용하면 CSS를 지원하지 않는 브라우저는 이를 특별히 처리하지 않습니다.
짜증나는 기본 스타일
과거에는 디자이너가 보기 흉한 브라우저 기본값으로 인해 제목 태그 사용을 완전히 피했을 수도 있습니다. 또는 기본값의 크기가 크기 때문에
또는 사용을 피하고 대신 더 작은 크기를 얻으려면 더 높은 숫자의 제목 태그를 사용하세요.
그러나 CSS를 사용하여 이러한 제목 태그를 쉽게 변경할 수 있다는 점을 강조하는 것이 중요합니다. 예를 들어
은 화면의 절반 이상을 차지하는 큰 표준일 필요는 없습니다. 나중에 CSS를 사용하여 제목 태그 스타일을 지정하는 것이 얼마나 간단한지 설명하여 압도적인 두려움을 어느 정도 완화할 수 있기를 바랍니다.
검색엔진 친화적
엄청난 혜택이네요. 검색 엔진은 제목 태그를 좋아합니다. 반면에 태그나 일반 굵은 단락 태그는 의미가 적습니다. 제목을 에서 까지 적절하게 표시하려면 약간의 노력만 필요하지만 검색 엔진이 페이지를 더 쉽게 크롤링할 수 있으므로 궁극적으로 사람들이 해당 페이지를 찾을 수 있습니다.
검색 엔진 봇은 제목 태그에 특별한 주의를 기울입니다. 여기에 키워드를 넣을 수 있습니다.
및 <meta>를 검색하는 것처럼 제목 태그를 따라 페이지를 검색합니다. 이러한 태그를 사용하지 않으면 태그에 포함된 키워드는 가치 있는 것으로 간주되지 않으며 무시됩니다. </p>
<p>따라서 약간의 노력만 하면 사람들이 페이지 콘텐츠를 기반으로 귀하의 사이트를 찾을 가능성을 높일 수 있습니다. 좋은 것 같지 않나요? </p>
<p>제목 순서에 대하여<br>예에서 이 특정 제목은 문서의 제목이기 때문에 페이지에서 가장 중요합니다. 따라서 가장 중요한 제목 태그인 <h1>을 사용합니다. W3C 사양에 따라 일부 사람들은 여러 제목 수준을 건너뛰는 것이 나쁜 습관이라고 생각합니다. 예를 들어, 다음 페이지에 있다고 가정해 보겠습니다. </p>
<p></p>
<h1>기사 제목</h1> <br>다음 제목(다른 <h1>과 반복되지 않는 경우)은 <h2>, <h3> 등이어야 합니다. <h1> 다음에 한 레벨을 건너뛰고 바로 <h3>로 이동하면 안 됩니다. 나는 위의 관점에 동의하고 레이아웃 구조를 구성하기 위해 텍스트를 따라 레벨의 연속성을 유지하는 경향이 있습니다. 이렇게 하면 기존 페이지에 제목과 스타일을 추가하기가 더 쉽고 추가 숫자를 사용하여 발생하는 오류를 줄일 수 있습니다.
</h3>
</h2>
</h1>
<p>앞서 언급했듯이 디자이너는 페이지에서 가장 중요한 제목에 레이블을 지정하기 위해 <h4>를 사용할 수 있습니다. 그 이유는 기본 글꼴 크기가 <h1>만큼 크지 않기 때문입니다. 하지만 기억하세요. 구조를 먼저 만들고 디자인은 나중에 하세요. 언제든지 CSS를 사용하여 원하는 텍스트 크기로 제목 스타일을 지정할 수 있습니다. <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="CSS는 알 수 없는 높이의 수직 중심 문제를 해결합니다_CSS/HTML" href="http://m.php.cn/ko/faq/1247.html">CSS는 알 수 없는 높이의 수직 중심 문제를 해결합니다_CSS/HTML</a></span><span>다음 기사：<a class="dBlack" title="CSS는 알 수 없는 높이의 수직 중심 문제를 해결합니다_CSS/HTML" href="http://m.php.cn/ko/faq/1250.html">CSS는 알 수 없는 높이의 수직 중심 문제를 해결합니다_CSS/HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/347776.html" title="JSDOMReady 이벤트의 6가지 구현 방법 요약" class="aBlack">JSDOMReady 이벤트의 6가지 구현 방법 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348838.html" title="페이지의 다양한 열 레이아웃에 대한 CSS 구현 예" class="aBlack">페이지의 다양한 열 레이아웃에 대한 CSS 구현 예</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349106.html" title="순수한 CSS3 전체 화면 반응형 슬라이드쇼 효과" class="aBlack">순수한 CSS3 전체 화면 반응형 슬라이드쇼 효과</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349108.html" title="순수한 CSS3의 멋지고 다채로운 3D 버튼 스타일" class="aBlack">순수한 CSS3의 멋지고 다채로운 3D 버튼 스타일</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349109.html" title="놀라운 CSS3 육각형 메뉴 애니메이션 효과" class="aBlack">놀라운 CSS3 육각형 메뉴 애니메이션 효과</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><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>
