HTML 语义化
理解 HTML 语义化的概念、作用和优势
问题
什么是 HTML 语义化，为什么要使用语义化标签？
解答
什么是 HTML 语义化
HTML 语义化是指用合适的标签来标记内容的结构和含义，而不是仅仅通过样式来展示结构。
HTML 本身是用来结构化信息的标记语言，例如用 <h1> 表示标题、<p> 表示段落、<strong> 表示强调等。这些标签本身就带有语义，能够清晰地表达内容的含义。
浏览器会为这些标签提供默认样式，但这只是为了在没有 CSS 的情况下友好地展示页面。语义化的核心是让代码本身就能表达内容的结构和含义。
语义化 vs 非语义化
<!-- 非语义化：全用 div -->
<div class="header">
<div class="title">文章标题</div>
</div>
<div class="content">
<div class="paragraph">这是一段文字</div>
</div>
<!-- 语义化：使用合适的标签 -->
<header>
<h1>文章标题</h1>
</header>
<article>
<p>这是一段文字</p>
</article>虽然通过 CSS 可以让两者看起来一样，但语义化的代码能让人和机器都更容易理解页面结构。
为什么要使用语义化标签
对搜索引擎友好：搜索引擎爬虫能更好地理解页面内容，有利于 SEO 优化和内容索引。
对无障碍设备友好：屏幕阅读器等辅助设备能够正确解析页面结构，帮助视障用户理解内容。
提高代码可读性：团队成员能够快速理解页面结构，降低维护成本。
样式丢失时的降级体验：当 CSS 文件加载失败时，语义化的页面仍然能保持清晰的结构，比全是 div 的页面更易读。
关键点
- 语义化是用合适的标签标记内容，让代码本身表达结构和含义
- 使用
<header>、<nav>、<article>、<section>等语义化标签，而不是全用<div> - 有利于 SEO、无障碍访问和团队协作
- 样式丢失时仍能保持良好的可读性
目录