网页的语义结构
HTML 标签的名称都带有语义(semantic),使用时应该尽量符合标签的语义,不要用错误语义的标签。语义良好的网页,天然具有良好的结构,对于开发者易读易写,容易维护,也能帮助计算机更好地处理网页内容。
含义
HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
只看上面的代码,就可以知道,页面分成页眉(<header>
)、主体(<main>
)、页尾(<footer>
)三个部分。
编写 HTML 网页,第一步就是写出语义结构的网页骨架。
常用标签
<header>
<header>
标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部,就称为“页眉”。网站导航和搜索栏通常会放在<header>
里面。
<header>
<h1>公司名称</h1>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
如果<header>
用在文章的头部,则可以把文章标题、作者等 信息放进去。
<article>
<header>
<h2>文章标题</h2>
<p>张三,发表于2010年1月1日</p>
</header>
</article>
由于<header>
可以用在多种场景,所以一个页面可能包含多个<header>
,但是一个具体的场景里面只能包含一个,比如网页的页眉只能有一个。另外,<header>
里面不能包含另一个<header>
或<footer>
。
<footer>
<footer>
标签表 示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。
<body>
<footer>
<p>© 2018 xxx 公司</p>
</footer>
</body>
上面代码中,版权信息放在<footer>
里面。
<footer>
也可以放在文章里面。
<article>
<header>
<h1>文章标题</h1>
</header>
<footer>
<p>© 禁止转贴</p>
</footer>
</article>
<footer>
不能嵌套,即内部不能放置另一个<footer>
,也不能放置<header>
。
<main>
<main>
标签表示页面的主体内容,一个页面只能有一个<main>
。
<body>
<header>页眉</header>
<main>
<article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>
上面代码就是最典型的页面结构。
注意,<main>
是顶层标签,不能放置在<header>
、<footer>
、<article>
、<aside>
、<nav>
等标签之中。
另外,功能性区块(比如搜索栏)不适合放入<main>
,除非当前页面就是搜索页面。
<article>
<article>
标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(<h1>
到<h6>
)。
<article>
<h2>