HTML5 语义元素

"语义元素"指一看名字就知道含义的标签，如 <header> 表头、<footer> 页脚、<nav> 导航。HTML5 提供了整套语义标签，用来替代满屏无意义的 <div>，让结构更清晰、利于 SEO 与无障碍阅读。

常用语义元素

元素	含义
header	页眉：标题、logo、导航所在
nav	导航链接集合
main	页面主体内容（每页一个）
section	章节/分区，通常带标题
article	独立成文的内容：文章、评论、帖子
aside	侧边栏、补充说明
footer	页脚：版权、联系方式
figure / figcaption	插图及其说明
mark	高亮文字
time	时间，可带 datetime 属性
details / summary	可折叠的详情区

典型页面布局

把常见页面骨架用语义标签搭出来，浏览器默认样式与 div 类似，但结构语义完全不同。

<header>
    <h1>我的博客</h1>
    <nav><a href="#">首页</a> | <a href="#">关于</a></nav>
</header>
<main>
    <article>
        <h2>HTML5 语义化入门</h2>
        <p>本文讲解语义标签的用法……</p>
        <time datetime="2024-06-01">2024年6月1日</time>
    </article>
</main>
<aside>相关推荐</aside>
<footer>版权所有 © 2024</footer>

在浏览器中显示为：从上到下依次是标题栏、文章正文、侧栏和版权行（默认无边框样式，可用 CSS 美化）。

details 折叠区

details 默认收起，点 summary 展开，加 open 属性则默认展开，无需写 JS。

<details open>
    <summary>什么是语义化？</summary>
    <p>语义化是用含义明确的标签组织页面，
       让机器和人都能读懂结构。</p>
</details>

在浏览器中显示为：默认展开显示说明文字，点击标题行可收起/展开。

语义化三大价值

• 可读性：代码结构一目了然，便于团队维护。
• SEO：搜索引擎能更好地识别正文、标题层级。
• 无障碍：读屏软件可据标签跳转到 main、nav 等区域。

易错点

① section 通常应包含一个标题（h1~h6），不要拿它当普通容器；② 纯样式的包装仍用 <div>，不必强行全部语义化；③ header/footer 可在整页用，也能在 article 内用（表示文章自己的头尾）；④ 老版本 IE 不识别这些标签，如需兼容可引入 html5shiv 脚本并给标签加 display:block。

小结：用 header/nav/main/article/section/aside/footer 组织页面骨架，用 figure/time/details 丰富内容语义，结构清晰、SEO 友好、易维护。