HTML语义化书写需遵循五项规则：一、用<nav><main><article><aside><header><footer>替代div/span；二、h1–h6层级连续且唯一；三、img必设alt，音视频配track与aria-label；四、表单控件须用label显式关联并声明required/aria-invalid；五、ul/ol/dl严格区分类型且闭合嵌套。
如果您在编写HTML代码时发现结构混乱、可读性差或不利于搜索引擎优化，则可能是由于未遵循语义化标签的使用规范。以下是HTML语义化书写的常见规则与实践方法：
一、优先使用语义化标签替代div和span
语义化标签能准确表达内容的含义与层级关系，提升代码可维护性、无障碍访问支持及SEO效果。避免通篇使用无意义的div和span包裹内容，应根据内容类型选择对应标签。
1、导航栏区域使用<nav>标签包裹一组导航链接。
2、文章主体内容使用<main>标签明确标识页面核心内容区域。
立即学习“前端免费学习笔记（深入）”；
3、独立成块且可被单独引用的内容（如博客条目、新闻卡片）使用<article>标签。
4、与主内容相关但可独立存在的补充信息（如侧边栏、广告、作者简介）使用<aside>标签。
5、页眉和页脚分别使用<header>与<footer>标签，而非仅靠class命名模拟。
二、合理嵌套标题标签并保持层级连续
标题标签（h1–h6）不仅影响视觉样式，更构建文档大纲结构。屏幕阅读器和搜索引擎依赖其层级判断内容重要性与逻辑关系，跳级或重复使用将破坏语义完整性。
1、每个页面有且仅有一个<h1>，代表整个页面的最高级别主题。
2、子章节标题按逻辑深度依次使用<h2>、<h3>，不可跳跃使用（例如h1后直接用h4）。
3、同一层级的标题应语义等价，避免在相同h2下混用不同抽象级别的内容。
4、标题标签内不嵌套段落、列表或其他区块级元素，仅包含文本或行内元素（如strong、em、a）。
三、为图像、音频、视频添加有意义的替代信息
媒体元素本身不具备文本语义，必须通过属性提供上下文说明，确保无法加载资源或依赖辅助技术的用户仍能理解其作用。
1、所有<img>标签必须包含alt属性；若图像仅为装饰，应设为alt=""（空字符串，非省略）。
2、功能性图像（如按钮图标、链接缩略图）的alt值需描述其行为，例如“搜索按钮”、“返回首页”。
3、<audio>与<video>标签需配合<track>提供字幕，并使用aria-label或title说明媒体用途。
4、图表类图像若含复杂数据，应在附近使用<figure>与<figcaption>组合进行解释性标注。
四、表单控件必须关联标签并声明状态
表单是用户交互关键区域，语义缺失将导致输入目标模糊、焦点管理失效及自动化工具识别失败。每个可操作控件都需具备明确的身份标识与上下文说明。
1、每个<input>、<select>或<textarea>必须由<label>显式关联，推荐使用for属性匹配控件的id。
2、隐式关联（label包裹控件）仅适用于简单场景；涉及复杂布局时，必须采用显式id-for绑定。
3、必填字段需添加required属性，并在label中以文字注明“（必填）”，不可仅依赖星号或颜色提示。
4、错误状态需通过aria-invalid="true"与aria-describedby指向具体错误消息元素，而非仅修改CSS类名。
五、列表结构须严格区分类型并闭合嵌套
列表是表达项目集合的核心语义单元，ul、ol、dl三者不可混用。错误的列表类型选择会误导内容解析逻辑，影响导航效率与样式继承。
1、无序项目集合（如菜单项、功能点）必须使用<ul>与<li>组合，禁止用div模拟。
2、有序步骤或排名类内容必须使用<ol>，浏览器将自动处理编号逻辑，不得手动写入“1. 2. 3.”文本。
3、术语定义类内容（如词汇表、参数说明）必须使用<dl>，其中<dt>表示术语，<dd>表示定义，且一个dt可对应多个dd，一个dd不可跨多个dt。
4、嵌套列表必须保持类型一致或符合逻辑转换（如ol内嵌ul表示主步骤下的子选项），且每层列表均需完整闭合，不可遗漏</ul>或</ol>。
