用语义标签、控制嵌套深度、保持标题逻辑一致是降低维护成本最直接有效的做法；语义标签明确结构含义，扁平DOM提升性能与可读性，标题层级须严格对齐内容大纲，结构化数据补全机器可读意图。
用对语义标签、控制嵌套深度、保持标题逻辑一致，是降低维护成本最直接有效的做法。结构清晰的页面，新人接手能快速定位内容区域，修改样式或交互时也不容易误伤无关模块。
用语义标签代替 div 堆砌
把 <div class="header"> 换成 <header>，<div class="nav"> 换成 <nav>，不只是写法变化，而是让结构自带含义。团队成员看到 <main> 就知道这是核心内容区，看到 <aside> 就明白这是补充信息，无需翻注释或猜 class 名。
-
<main>必须且只能出现一次，包裹真正要读的内容，不嵌套在其他语义容器里 -
<article>用于可独立存在、可被 RSS 抓取或分享的内容（如一篇博客）；<section>用于有共同主题但不强调独立性的分组，且必须配<h2>–<h6> - 避免用
<div role="navigation">代替<nav>，前者对屏幕阅读器和开发者都不友好
控制 DOM 嵌套层级
浏览器解析 DOM 是深度优先遍历，嵌套超过三层，CSS 选择器匹配效率明显下降，JS 查询元素也更慢。结构扁平不仅提升性能，也让 HTML 更易读、易改。
- 主内容区尽量用
<main> > <article> > <header>这类直链结构，少用<div> <div> <div>包裹 - 列表必须用
<ul>或<ol>，不用<div class="list">+ 自定义符号，否则后期加无障碍支持或样式重置都费劲 - 图片配
<figure><figcaption>，表单用<fieldset><legend>，这些组合天然带语义，后续调整逻辑更稳
标题层级与内容结构严格对齐
标题不是用来调字号的，而是表达内容大纲。h1–h6 的顺序错乱，会导致开发者无法一眼看出页面骨架，也增加 CSS 冲突和 JS 定位错误的风险。
立即学习“前端免费学习笔记（深入）”；
- 整个页面只设一个
<h1>，放在最外层<header>或<main>的起始位置 -
<article>内部可用自己的<h1>（表示该文独立主题），但不能脱离上下文滥用 - 禁止 h1 后直接跟 h3，中间缺 h2 会让结构断裂；视觉上需要小字号的标题，用 CSS 控制，别降级用 h3 充数
配合结构化数据补全意图
光靠 HTML 标签说明“这是什么区域”还不够，JSON-LD 等结构化数据能明确告诉机器“这具体是什么内容”，比如一篇 BlogPosting 的作者、发布时间、封面图。这对后期接入搜索富摘要、内容聚合或自动化测试都有帮助。
- 在
<main>或<article>内嵌入BlogPosting类型的 Schema - 标注
headline、datePublished、author等字段，避免后期靠正则从 HTML 中提取，出错率高还难维护 - 结构化数据与语义标签联动，比如
<time datetime="2026-09-25">和 Schema 中的datePublished应保持一致
