使用语义化标签如<header>、<nav>、<main>等替代<div>，合理嵌套、控制层级，配合BEM命名和统一代码格式，提升HTML可读性与维护性。
提升HTML布局的可读性，关键在于语义化标签的合理使用和结构清晰的代码组织。语义化不仅让开发者更容易理解页面结构，也提升了可维护性和对搜索引擎及辅助技术的友好度。
使用语义化标签代替div
避免过度依赖<div>和<span>这类无意义的容器标签。用更具含义的HTML5元素来表达内容角色：
- <header> 表示页面或区块的头部
- <nav> 用于导航链接区域
- <main> 包含页面核心内容
- <article> 独立的内容块，如博客文章
- <section> 文档中的章节或功能区
- <aside> 侧边栏或附加信息
- <footer> 页面或区块的底部信息
这些标签让代码“自解释”，别人一看就知道这块区域的作用。
合理嵌套与层级控制
保持DOM结构扁平且逻辑清晰。避免多层嵌套的<div>包裹：
立即学习“前端免费学习笔记（深入）”；
- 每个语义标签内部不宜嵌套过深，建议不超过3层
- 确保父子关系符合内容逻辑，比如<nav>里放<ul>是合理的
- 不要为了样式滥用标签，样式问题应由CSS解决
结构越干净，后期调整和调试就越轻松。
添加有意义的class命名
class名称应反映内容或功能，而不是样式。推荐使用语义化命名规范如BEM：
- 用header__logo而不是blue-text-left
- 模块名+元素的方式增强可读性，如card__title、card__image
- 避免缩写或拼音命名，如box1、nr
好的命名让人无需看样式表也能猜出元素用途。
保持代码格式统一
良好的格式习惯极大提升可读性：
- 使用一致的缩进（推荐2或4个空格）
- 适当换行分隔功能区块
- 为复杂组件添加注释，如<!-- 用户信息卡片 -->
- 闭合标签不省略，即使某些标签允许省略
团队协作时，可配合Prettier等工具统一格式标准。
基本上就这些。语义化不是炫技，而是为了让HTML真正“表达内容”。写的时候多想一步“这块是什么”，而不是“它长什么样”，代码自然更清晰。
