前端Wiki/HTML5/基础/新语义标签

页面结构标签

HTML5 新增的结构标签各有明确分工：<header> 区块的头部；<nav> 主要导航组；<main> 页面主内容，全页只能出现一次，且不能嵌套在 article/aside 等元素里；<article> 独立完整的内容块；<section> 有标题的主题分块；<aside> 侧边辅助内容；<footer> 收尾信息。

这些标签本质上都是块级元素，样式行为和 div 一样，可以正常套 class、写 CSS。特别注意两个旧浏览器的坑：IE9 以下不认识这些标签（需要 html5shiv 垫片），如今基本无需考虑；所有新标签在 IE8 及以下默认 display:inline，老项目里要显式设置 display:block。

替换的是这类写法：<div class="header"> → <header>。结构一变自解释，读屏器的"地标导航"也随之上岗。

本节要点header/nav/article/section/aside/footer 各司其职；main 全页唯一；它们是带语义的块级 div；旧 IE 需垫片，现代项目可直接用。

HTML

<body>
  <header>              <!-- 页头：Logo、站名、搜索 -->
    <h1>前端Wiki</h1>
  </header>
  <nav>                 <!-- 主要导航组 -->
    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
  </nav>
  <main>                <!-- 主内容：全页唯一 -->
    <article>
      <h2>文章标题</h2>
      <p>正文……</p>
    </article>
    <aside>侧栏：相关链接</aside>
  </main>
  <footer>              <!-- 页脚：版权、备案 -->
    <p>© 2026 前端Wiki</p>
  </footer>
</body>

🔗 相关词条HTML5 CSS 浏览器 div 标签元素

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读