例如，用语义化方式构建一个博客文章页面：

合理组织标题层级

标题标签（

• 每个页面只使用一个
  ，代表页面主标题
• 后续标题按逻辑递进，避免跳级（如从
  直接到
  ）
• 在
  或 内部可以重新开始层级（即嵌套结构）

示例：

增强可访问性的语义细节

语义化不仅服务于开发者，更重要的是服务所有用户，包括使用辅助技术的人群。

• 为图片添加有意义的 alt 属性，说明图像内容或功能
• 使用 而不是 实现按钮功能，确保键盘可操作
• 表单元素应关联 ，提高输入可识别性
• 通过 aria- 属性补充复杂组件的语义（如菜单、模态框）

例如：

邮箱地址：
red>

避免错误的语义滥用

某些标签虽然方便，但容易被误用导致语义混乱：

• 不要用
  到
  控制字号，应由 CSS 处理样式
• 不要用 或 替代 或 仅为了加粗/斜体效果；语义优先
• 避免在非列表结构中使用
  /
  ，即使想借用默认样式
• 不应包裹多个独立内容块，除非它们共同构成主体

基本上就这些。坚持语义化原则，写出清晰、健壮、对所有人友好的 HTML 结构，是前端开发的基本功。不复杂但容易忽略。