真正实用的HTML5语义标签是<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个，覆盖95%需求；其他如<time>属锦上添花。常见错误包括用<div class="header">替代<header>、滥用<section>嵌套、违反<main>唯一性及嵌套限制、<section>缺标题、误将页内锚点当<nav>使用；兼容处理只需一行CSS重置display为block；<main>核心价值在于自带ARIA role="main"，提升可访问性。
哪些 HTML5 标签真正在项目里有用
别被“语义化”三个字绕晕——实际开发中，<header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 这七个标签覆盖了 95% 的真实需求。其他像 <time> 或 <mark> 属于“有它挺好，没它不崩”，先保主干。
常见错误现象：<div class="header"> 还在满屏飞；或把 <section> 当 <div> 套娃用，嵌套七八层。
-
<main>页面里只能出现一次，且不能嵌套在<article>、<aside>、<nav>、<footer>里 -
<section>必须有标题（<h1>–<h6>），否则语义断裂，屏幕阅读器会跳过 -
<article>是可独立分发/复用的内容单元（比如一篇博客、一条微博），不是“一个区块”的代名词
IE 和旧版 Safari 怎么兼容 <header> 这类标签
IE8 及更早版本不认识这些标签，直接当未知元素处理，不渲染样式，也不进 DOM 树——但现代项目基本不用考虑 IE8，真正要卡的是 iOS 9.3 之前的 Safari（2016 年前）：它认识标签名，但默认 display 是 inline，不是 block。
实操建议只做两件事：
立即学习“前端免费学习笔记（深入）”；
- 加一行 CSS：
header, nav, main, article, section, aside, footer { display: block; } - 不用
document.createElement()模拟，也不用 html5shiv —— 那是给 IE8 的方案，现在纯属冗余
性能影响几乎为零；兼容性上，iOS 9.3+、Android 4.4+、所有现代桌面浏览器均原生支持。
<nav> 不是所有导航都该用它
语义关键在“主导航”——即全站级跳转入口（如顶部菜单、侧边全局菜单）。面包屑（<ol class="breadcrumb">）、分页（<nav aria-label="pagination">）、页内锚点链接，都算次要导航，用 <nav> 反而干扰辅助技术。
使用场景判断标准：
- 是否出现在多个页面？是 → 优先
<nav> - 是否提供跨内容区域的跳转？是 → 优先
<nav> - 是否只有当前页面内意义？否 → 别用
<nav>，用<div role="navigation">更准确
错误示例：<nav><a href="#contact">联系我</a></nav> —— 单页内锚点不算导航上下文。
为什么 <main> 比 <div id="main"> 更重要
不是为了“写得好看”，而是因为 <main> 自带隐式 ARIA role main，屏幕阅读器一键跳转，键盘用户按 M 键（NVDA/JAWS）或 D 键（VoiceOver）就能直达主体内容。手写 id + role="main" 容易漏、难维护，还可能重复。
容易踩的坑：
- 一个页面出现两个
<main>：浏览器不会报错，但辅助技术只识别第一个，第二个被忽略 - 把登录框、弹窗内容包进
<main>：违背“主要内容”定义，破坏上下文感知 - 服务端渲染时动态插入
<main>：需确保首屏 HTML 已包含，否则 JS 注入后部分读屏器不重新索引
复杂点在于：语义不是静态的。同一块 DOM，在不同路由下可能是 <main>，也可能是 <article> —— 别硬编码，让组件逻辑决定标签选择。
