html5 语义化标签实用指南

HTML5 引入了一些语义化的标签，这些标签被赋予特定的含义，有助于搜索引擎理解网页内容，同时也方便开发者和维护者阅读和编写代码。以下是一些常用的HTML5语义化标签及其使用示例：

1. <header> - 表示页面或区段的头部。

<header>
  <h1>网站标题</h1>
  <p>网站副标题</p>
</header>

2. <nav> - 表示导航链接。

<nav>
  <ul>
    <li><a href="/home">主页</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

3. <section> - 表示文档中的一个区段或应用中的一个区域。

<section>
  <h2>文章标题</h2>
  <p>这是一个文章段落。</p>
</section>

4. <article> - 表示一个独立的、完整的内容。

<article>
  <h1>文章标题</h1>
  <p>这是一篇文章的摘要。</p>
  <footer>
    <p>这是文章的脚注。</p>
  </footer>
</article>

5. <aside> - 表示与页面主内容略微关联的内容。

<aside>
  <h2>侧边栏标题</h2>
  <p>这是侧边栏内容。</p>
</aside>

6. <footer> - 表示页面或区段的底部。

<footer>
  <p>版权信息和联系方式</p>
</footer>

在使用这些标签时，应确保它们的语义表示符合内容结构，并且不要滥用标签，例如，不要仅为了实现样式效果而使用语义化标签。