HTML标签名称都带有语义(semantic),使用时尽量符合标签语义,不用错误语义的标签。语义良好的网页,天然具有良好的结构,开发者易读易写易维护,也能帮助计算机更好地处理网页内容。
1、含义
HTML标签声明网页元素的性质,使用户只看标签就能了解此元素的意义,阅读源码也能了解网页的大致结构,这被称为HTML的语义原则。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
2、常用标签
2.1 header
header标签既可表示整个网页的头部,也可以表示一篇文章或者一个区块的头部,通常网站导航和搜索栏会放在header里面。 一个页面可能包含多个header,但是一个具体场景只能包含一个header,header里面不能包含另一个header或footer。
2.2 footer
footer标签表示网页、文章或章节的尾部。通常包含版权信息或者其他相关信息。 footer不能嵌套。
2.3 main
main标签表示页面的主体内容,一个页面一个main。 main是顶层标签,不能放置在header和footer中。
2.4 article
article标签通常用来表示一篇文章或一个论坛帖子,它有自己的标题。
2.5 aside
aside标签用来放置与网页或文章主要内容间接相关的东西,比如侧边栏、补充信息、评论或注释。
2.6 section
section标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节。 section标签被包含在article里面,section标签总是多个一起使用,一个页面不能只有一个section。 适合幻灯片展示的页面。 section标签一般包含标题。
2.7 nav
nav标签用于放置页面或文档的导航信息。 一个页面可以有多个nav标签,nav标签里面通常是列表。
2.8 hgroup
如果主标题包含多级标题(副标题),可以使用hgroup标签,将多级标题放在其中,hgroup标签只能包含标题标签。
2.9 h1~h6
六个级别的标题。h1最高级别,h6最低级别。