语义化是HTML可维护性的底线，而非加分项；滥用<div>导致结构不可读、协作困难、JS查询不稳定，而<header><nav><main>等标签提供标准DOM接口与明确语义，保障可访问性、SEO及长期维护效率。
语义化不是“加分项”，而是HTML可维护性的底线。不改结构，只调样式或加JS，迟早会掉进“改一处崩三处”的坑。
为什么 <div> 套 <div> 是可维护性杀手
当整个页面由几十个 class="container"、class="wrap"、class="box" 构成时，没人能靠扫一眼 HTML 就判断出哪个区块负责导航、哪个是独立文章、哪个该被 SEO 抓取。开发者必须来回切 CSS 文件、查 JS 绑定逻辑、翻设计稿才能确认作用域——这已经不是写代码，是在考古。
更麻烦的是，这类结构一旦进入多人协作或交接环节，class="header-v2-fix" 和 class="header-new-2024" 同时存在就成常态，没人敢删，也不敢动。
-
<div>不带任何语义，浏览器、屏幕阅读器、搜索引擎、新同事都得靠猜 - 类名易冲突、易过时、易被误删；而
<header>、<nav>、<main>是标准 DOM 接口，JS 里直接document.querySelector('main')就能稳稳拿到主体内容 - W3C 明确要求每页最多一个
<main>，违反这条，无障碍检测工具（如 axe）会直接报错
<section>、<article>、<aside> 到底怎么选
选错标签比不用还糟——比如把商品列表塞进 <aside>，等于告诉辅助技术“这段内容不重要”，SEO 也会降权。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
<article>包裹**可独立分发、有明确作者和时间的内容单元**，如博客正文、新闻条目、用户评论 - 用
<section>表达**主题相关的一组内容**，必须带标题（<h2>或更高），比如“热门推荐”“用户反馈”“配置说明” - 用
<aside>放**与主内容相关但可剥离的补充信息**，如侧边栏广告、作者简介、术语解释框；它不该是布局容器 - 避免把
<section>当<div>用：没有标题的<section>是无效语义，部分读屏软件会忽略
data- 属性比 class 更适合模块锚点
靠 class="header" 定位模块，在大型项目里极易失效：CSS 可能覆盖、JS 可能误删、设计师改稿时顺手删了 class 却没通知前端。
真正稳定的锚点是 data- 属性，它不参与样式、不触发渲染，只对 JS 和构建流程可见。
- 给每个模块根元素加
data-module="header"、data-module="product-list" - 配合
data-version="1.3"，CI 流程可自动校验 HTML 片段是否匹配文档版本 - JS 查询时用
document.querySelectorAll('[data-module="header"]')，比靠 class 名更可靠 - 别用
id做模块标识——同一页面多次渲染同个组件（如商品卡片循环）会导致 id 重复，document.getElementById()只返回第一个
嵌套超过三层就该警觉
DOM 树过深不仅拖慢渲染，更让维护成本指数上升。一个 <div><div><div><div><p> 结构，连审查元素都要点四下才能定位到目标文本节点。
- 检查现有结构：Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications” 能快速暴露冗余包裹层
- 合并相邻的语义一致容器：两个连续的
<section>若主题相同，考虑合并并用<h2>分隔子区块 - 单个父容器下子元素超 50 个（如长列表）时，用
DocumentFragment分批插入，避免强制同步重排 -
<template>比display: none的<div>更干净：它不参与渲染、不计算样式、JS 克隆后才激活
最常被忽略的点：语义化不是贴标签比赛。一个 <nav> 里塞满非导航链接，或给广告位套 <main>，反而破坏结构可信度。可维护性的核心，是让 HTML 自己说话，而且说得准。
