网页的语义结构

179 阅读2分钟

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最低级别。