必须优先替换、、、、等语义化标签，其中全局唯一且不可嵌套于内；仅包裹导航链接；表示相关补充信息而非视觉侧边栏；须含标题并可独立分发。
直接用语义化标签替换无意义的 <div>，可读性提升最明显——不是靠注释或类名补救，而是让标签自己说话。<h3>哪些标签必须优先替换，且结构不能错</h3>
<p>替换不是换汤不换药，关键看内容角色是否匹配：</p>
<ul>
<li>
<code><header></header> 和 <footer></footer> 可多次出现，但每个都必须服务于其直接父容器（比如一个 <article></article> 自带的 <header></header>）
<main></main> 全局只能有一个，且不能嵌套在 <section></section>、<header></header>、<footer></footer> 或 <nav></nav> 内部
<nav></nav> 只能包裹真正起导航作用的链接集合；面包屑、分类菜单可以各自用一个 <nav></nav>，但登录按钮组不属于导航，别硬塞
<aside></aside> 不是“右边那块div”，而是指与主内容相关但可独立分发的补充信息（如作者简介、同类推荐），广告位放这里反而违反语义
<section></section> 必须有明确主题，且建议配 <h2></h2> 或更高级别标题；如果只是视觉分组而无逻辑主题，用 <div> 更诚实<h3>缩进和换行怎么配合语义标签才不翻车</h3>
<p>HTML 不依赖换行渲染，但人依赖缩进来识别父子关系。缩进错位比语法错误更难 debug —— 浏览器不报错，你却要花三分钟找漏掉的 <code>
：
- 统一用 2 个空格缩进（非 Tab），避免不同编辑器显示不一致
- 每个块级语义标签（如
<header></header>、<main></main>、<section></section>）独占一行
- 子元素缩进一层，闭合标签与开始标签垂直对齐（不是紧贴内容后）
- 反例：
<p>欢迎<strong>登录</strong>我们的网站</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 没问题；但长段落里混着超长链接，建议前后换行，避免视觉缠绕
类名命名和注释怎么配合语义结构
语义标签本身就在减少对 class 的依赖，所以类名该聚焦业务含义，而不是布局或样式：
- 用
class="search-submit" 而不是 class="red-btn" —— 前者表达“是什么”，后者只说“长什么样”
- 避免模糊名称如
div1、content；优先用 kebab-case，比如 product-card、user-avatar
- 注释只加在必要处：大型容器结束处标明对应开始标签（如
<!-- .comments-section -->），或说明特殊交互逻辑
- 不要注释显而易见的内容，比如
<!-- header --><header></header> 是冗余的
为什么用了语义标签，别人还是看不懂结构
常见原因是“形似神不似”：标签用了，但嵌套破坏了语义链，或隐藏/屏蔽了机器可读性：
-
<main></main> 被 display: none 隐藏，或被 aria-hidden="true" 错误包裹，屏幕阅读器就跳过了
-
<nav></nav> 里混了 <button></button> 却没加 role="link" 或对应 ARIA 标签，读屏软件无法识别为导航项
- 在
<aside></aside> 里塞评论列表，其实该用 <section><h3>评论</h3></section> —— 否则爬虫会误判为“附属内容”而非“独立模块”
- DevTools 的 Accessibility 面板里检查
<nav></nav> 是否被识别为 navigation role，比看源码更直接
最容易被忽略的是嵌套边界：比如 <main></main> 里再套 <header></header> 合法，但若这个 <header></header> 实际只是某张卡片的标题栏，就该用 <h3></h3> + <div>，而非强行语义化。</div>
