实现HTML语义化需使用恰当标签准确表达内容结构，如article、section、header、footer、h1-h6、p等，避免仅用于样式的div和span；通过em、strong、blockquote、code等标签体现内容语气与类型；配合alt、time、nav提升可访问性；杜绝误用标题标签、模拟列表等行为，确保结构清晰、标签各司其职。
实现HTML文章内容的语义化，核心是使用恰当的语义标签来准确表达内容的结构和含义，而不是仅仅为了样式而写标签。这不仅有助于搜索引擎理解页面结构，也提升了可访问性和代码可维护性。
使用合适的结构化标签
在撰写文章时，应避免通篇使用div和span。取而代之的是更具语义的标签：
- article：用于包裹独立成篇的内容，如一篇博客文章或新闻稿。
- section：表示文章中的一个主题区块，比如章节或内容分组。
- header 和 footer：分别定义文章的头部和尾部，可包含标题、作者信息、发布日期等。
- h1–h6：合理使用标题层级，确保结构清晰。一篇文章通常只有一个h1，其余按逻辑嵌套使用。
- p：段落内容必须用p标签包裹，不要用br换行代替。
强调内容的语义而非样式
语义化要求我们关注“这是什么”，而不是“它看起来什么样”：
- 用 em 表示强调（对应斜体），strong 表示重要（对应加粗），而不是直接使用i或b标签。
- 引用他人话语时使用 blockquote（大段引用）或 q（行内引用），并可用 cite 标注来源。
- 代码片段应使用 code，键盘输入用 kbd，变量用 var，保持技术内容的准确性。
提升可访问性的细节处理
语义化对屏幕阅读器用户至关重要，正确使用标签能显著改善阅读体验：
立即学习“前端免费学习笔记（深入）”；
- 为图片添加有意义的 alt 属性，说明图像内容，若仅为装饰则alt=""。
- 使用 time 标签标注时间信息，如发布日期：<time datetime="2024-05-20">2024年5月20日</time>。
- 长文章可配合 nav 提供目录导航，帮助用户快速跳转。
避免常见语义错误
一些习惯写法会破坏语义结构，需特别注意：
- 不要用h标签做非标题用途，比如加大文字或做分隔线。
- 避免在article内嵌套无关的section，保持内容主题一致。
- 列表内容使用ul、ol和li，不要用p+br模拟列表。
基本上就这些。语义化不是追求标签数量，而是让每个标签都“各司其职”。只要内容结构清晰，标签使用得当，就能写出真正语义明确的HTML文章。不复杂但容易忽略。
