教程 html tutorial

语义化简介

语义化是指在 HTML 中使用具有明确含义的标签来描述页面结构和内容,使代码更具可读性和可维护性。

为什么要语义化?

  • 提升可读性:开发者和浏览器更容易理解页面内容。
  • 利于 SEO:搜索引擎更好地抓取和索引网页内容。
  • 增强无障碍访问:辅助设备(如屏幕阅读器)能准确识别页面结构,帮助残障用户浏览。

常用语义标签

  • <header>:定义页面或区块的头部。
  • <nav>:导航菜单区域。
  • <main>:页面主要内容。
  • <article>:独立的内容块,如文章、博客。
  • <section>:内容的章节或分区。
  • <aside>:侧边栏或补充内容。
  • <footer>:页面或区块的底部。

示例

html
<body>
  <header>网站头部</header>
  <nav>导航菜单</nav>
  <main>
    <article>文章内容</article>
    <aside>相关信息</aside>
  </main>
  <footer>版权信息</footer>
</body>

采用语义化标签,构建结构清晰、易于维护且对搜索引擎友好的网页。