html5真正语义化标签是浏览器和辅助技术可识别内容角色的原生元素，包括、、、、、、，须严格按规范使用以保障可访问性。
HTML5 新增的语义化标签不是“装饰用的别名”，而是有明确的 DOM 含义和辅助技术（如屏幕阅读器）识别逻辑的原生元素。用错或滥用反而会破坏可访问性。
哪些标签算真正语义化？
语义化标签指浏览器和辅助技术能据此推断内容角色的原生元素，不是 <div class="header"> 这类靠 CSS 或 JS 模拟的伪语义。HTML5 明确定义了以下核心结构标签：
<ul>
<li>
<code><header></header>：页面或区块的页眉（非必须在顶部，但应含引导性内容）
<nav></nav>：仅用于**主导航链接集合**，不是所有链接都该套它<main></main>：页面唯一、不可嵌套，代表主体内容（每个页面最多一个）<article></article>：能独立分发/复用的内容单元（如博客正文、新闻条目）<section></section>：有主题的分组，必须带标题（<h1></h1>–<h6></h6>），否则不如用 <div>
<li>
<code><aside></aside>：与主内容相关但可分离的旁注（如侧边栏、引用、广告），不是所有侧边栏都适用<footer></footer>：所属区块的页脚（可以是 <article></article> 的 footer，不单指页面底部）为什么 <section></section> 和 <div> 容易混用？
<p>关键区别不在视觉，而在文档大纲和 AT（辅助技术）解析逻辑：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>
<code><section></section> 会出现在浏览器生成的文档大纲中（例如 Chrome 的「大纲」开发者工具），<div> 不会
<li>没有 <code><h2></h2>–<h6></h6> 的 <section></section> 是无效语义，AT 可能忽略或报错
<div>，强行套 <code><section></section> 会污染大纲
<section class="grid-container"></section> —— 无标题、无主题，应为 <div class="grid-container"></div>
<nav></nav> 的边界在哪？
它只适用于**主要导航机制**，不是所有链接集合：
- ✅ 页面顶部主导航菜单、左侧垂直导航栏、面包屑（
<nav aria-label="Breadcrumb"></nav>） - ❌ 文章内超链接、页脚的友情链接、分页控件（
<nav aria-label="Pagination"></nav>是例外，但需加aria-label明确意图） - ❌ 多个独立导航需分别包裹，不要把页头导航 + 页脚链接塞进同一个
<nav></nav> - 兼容性注意：IE9+ 原生支持，但旧版屏幕阅读器可能需要
role="navigation"双保险（现代已非必需）
实际项目中最常被忽略的一点
语义化标签本身不保证可访问性 —— 如果你用 <main></main> 包裹了整个页面，却忘了移除其他 role="main" 或旧式 ARIA 标记，会导致重复播报；如果 <article></article> 里没写 <h2></h2>，它在大纲中就变成“无题区块”，反而比 <div> 更难定位。语义是起点，不是终点。</div>
