HTML语义化是通过<header><nav><article>等标签明确内容结构，决定SEO权重分配、屏幕阅读器导航逻辑及团队协作效率，而非仅靠class修饰样式。
HTML语义化不是“加点class让结构看起来整齐”
它直接决定搜索引擎能不能正确理解页面主体、屏幕阅读器能否按逻辑朗读内容、团队接手时是否要花半小时猜<div class="box-3">到底是个标题还是操作按钮。语义标签（如<header>、<nav>、<article>、<aside>）不是装饰，是浏览器和辅助技术的“接口协议”。
SEO：Google 会用<h1>到<h6>构建内容权重图谱
搜索引擎不靠CSS类名或JS渲染结果判断主次——它依赖原生语义结构。一个没<h1>、全用<div>加font-weight: bold模拟标题的页面，很可能被判定为“内容结构缺失”，影响关键词相关性评分。
-
<h1>必须且唯一，代表页面核心主题；多个<h1>（尤其在SPA中未动态更新）会被视为信号混乱 -
<main>包裹主要内容区域，能帮爬虫快速跳过页脚/侧边栏等重复模块 -
<figure>+<figcaption>明确图片与说明的关系，比<img alt="">单独存在更容易被识别为图文单元
无障碍：屏幕阅读器按语义节点跳转，不是按视觉流
视障用户用快捷键（如H键）直接跳到下一个标题，用D键跳<div>？不会——它只识别<header>、<nav>、<section>等可导航区域。一个纯<div>堆砌的导航栏，对NVDA或VoiceOver来说就是一串无法分割的文本流。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<nav>必须有aria-label或<h2>说明用途（例如<nav aria-label="主导航">），否则多个<nav>时无法区分 -
<button>和<a>不能混用：触发JS行为该用<button>，跳转URL该用<a href>；否则键盘用户按Enter可能无响应或跳错页 -
<time datetime="2024-05-20">5月20日</time>比纯文本“5月20日”更能被辅助工具识别为日期并朗读成“2024年5月20日”
维护性：改一个<footer>比找二十个class="footer-wrapper"快得多
语义化不是写一次就完事——它是团队协作的契约。当新成员看到<aside class="related-posts">，他立刻知道这是附属内容；看到<div class="col-3 sidebar">，得翻CSS、查JS、甚至看Git历史才能确认它是否参与响应式逻辑或埋点统计。
立即学习“前端免费学习笔记（深入）”；
- 避免过度嵌套语义标签：比如
<section><article><section><article>这种结构会让逻辑变模糊，优先用清晰的<h2>分组 - 不要为“语义”而牺牲可访问性：比如
<ul>里只放一个<li>，不如直接用<p>；列表语义的前提是“存在多项并列关系” - SSR/静态站点中，服务端生成的语义结构比客户端JS补全的更可靠——爬虫和部分屏幕阅读器不执行JS
最常被忽略的一点：语义化失效往往发生在“动态内容注入”环节。AJAX加载的评论区如果用<div id="comments">包裹，即使外层有<main>，新插入的内容也不会自动获得上下文语义——得手动补role或重发aria-live事件。
