HTML 标签的名称都带有语义(semantic
),使用时应该尽量符合标签的语义,不要用错误语义的标签。语义良好的网页,天然具有良好的结构,对于开发者易读易写,容易维护,也能帮助计算机更好地处理网页内容。
1. 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>
2. footer
表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。
<body>
<footer>
<p>© 2018 xxx 公司</p>
</footer>
</body>
3. main
表示网页的主体内容,一个页面只能有一个main
标签
<body>
<header>页眉</header>
<main>
<article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>
5. article
标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(<h1>到<h6>)
。
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
6. aside
用来放置与网页或文章主要内容间接相关的部分
<body>
<main>主体内容</main>
<aside>侧边栏</aside>
</body>
<!--文章评注-->
<p>第一段</p>
<aside>
<p>本段是文章的重点。</p>
</aside>
7. section
标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节,比如<article>
可以包含多个<section>
。<section>
总是多个一起使用,一个页面不能只有一个<section>
。
<article>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>...</p>
</section>
<section>
<h2>第二章</h2>
<p>...</p>
</section>
</article>
8. nav
用于放置页面或文档的导航信息。
<nav>
<ol>
<li><a href="item-a">商品 A</a></li>
<li><a href="item-b">商品 B</a></li>
<li>商品 C</li>
</ol>
</nav>
9. h1 ~ h6
文章标题
10. hgroup
多级标题组合,如果主标题包含多级标题(比如带有副标题),那么可以使用<hgroup>
标签,将多级标题放在其中。
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>