正确使用HTML语义化标签能提升可访问性、SEO和维护性，应根据内容类型选用header、nav、main等标签，避免用div或span替代；标题需保持h1到h6的逻辑层级，h1唯一且不跳级；strong和em用于表达重要性与语气强调，样式需求应由CSS实现；表格仅用于二维数据，布局用Flexbox或Grid，列表内容使用ul或ol。
HTML语义化错误会影响网页的可访问性、SEO效果以及代码维护性。识别并避免这些错误，关键在于理解标签的真实含义，而不是仅根据视觉表现选择标签。
误用 div 和 span 替代语义化标签
很多开发者习惯用 <div> 或 <span> 搭建页面结构，忽视了 HTML 提供的语义化元素。
- 错误示例： 使用多个 <div class="header"> 而不是 <header>
- 正确做法： 用 <nav> 表示导航栏，<main> 包裹主内容，<article> 包含独立文章内容
- 建议： 在写结构前先思考内容类型：是导航？侧边栏？页脚？对应使用 <nav>、<aside>、<footer>
标题层级混乱
标题标签应体现内容的逻辑结构，而非仅仅调整字体大小。
- 常见错误： 跳过 h2 直接从 h1 到 h3，或一个页面多个 h1
- 解决方法： 保证标题层级连续，h1 代表页面主标题，通常只出现一次
- 辅助工具： 使用浏览器插件（如 HeadingsMap）检查标题结构是否合理
滥用 strong 和 em 标签
<strong> 和 <em> 表达语气强调，不应当作加粗或斜体样式使用。
立即学习“前端免费学习笔记（深入）”；
- 语义区别： <strong> 表示重要内容，<em> 表示强调语气
- 错误用法： 为所有价格数字加 <strong> 只因要加粗显示
- 替代方案： 样式问题交给 CSS 处理，用类名控制外观，保留语义标签原本用途
表格和列表使用不当
用表格布局页面结构或用 div 模拟列表都是典型语义错误。
- 错误示例： 用 <table> 排列表单字段或产品卡片
- 正确方式： 表格仅用于展示二维数据，布局使用 Flexbox 或 Grid
- 列表场景： 导航菜单、文章目录等成组内容应使用 <ul> 或 <ol>
基本上就这些。坚持“内容决定标签”，结合辅助工具审查结构，就能有效避免大多数语义化错误。不复杂但容易忽略。
