语义标记的重要性
语义化标记在构建 HTML 结构中非常重要。本节课中，我们将学习在设计有意义的网页时为何要使用它。 开始吧！
什么是网页设计中的语义标记？
语义标记是一种编写和格式化 HTML（超文本标记语言）的方法，其重点在于强调内容的语义意义或用途，而非其外观表现。
语义性和可访问性是 HTML 架构中固有的特性，但只有在正确实现时才真正有用。“语义标记”意味着理解网页内容的层级结构，以及内容将如何被用户和机器读取。这听起来可能像是良好的判断力：当你写标题时，使用标题标签（如 <h1>、<h2> 等），当你写段落时，使用段落标签（<p>）。
语义标记意味着选择 HTML 标签不是基于它们在浏览器中的显示效果，而是基于内容的重要性和结构。
虽然从一开始 HTML 就包含语义标记，但 HTML5 的出现带来了更多语义化标签，例如 <section>、<article>、<footer>、<nav> 和 <aside>。
使用语义标记的目标是让浏览器、开发者和爬虫更容易区分不同的数据类型。这些语义标签使网页上的信息及其重要性更加清晰明确。
过去，网站可能仅使用 div 来组织结构，这无法向搜索引擎、爬虫或其他开发者传达该部分页面的具体含义。
开发者不仅可以用语义标记更清楚地表达网页的整体内容，还能以计算机能够理解的方式编写代码。
为什么它很重要
搜索引擎优化（SEO）
理解和使用语义标记有助于确保我们的内容精准触达目标受众。搜索引擎会根据关键词在 HTML 层级中的位置来评估其价值。例如，被包裹在 <h1> 标签中的关键词比在 <p> 标签中的关键词具有更高的权重。
通过将最重要的关键词置于层级靠前的位置，我们实际上是在告诉搜索引擎：我们的网站是关于什么的，以及为何对特定关键词感兴趣的人应该关注我们的内容。
可访问性
由于语义 HTML 使用元素来表达明确的目的，因此无论是人类还是计算机都能更轻松地阅读和解析内容。
使应用程序具备可访问性，不仅能为残障人士提供平等的访问机会，也能让健全用户受益，因为他们可以自定义和个性化自己的使用体验。
保持网站结构的一致性，有助于其他资源和软件正确地呈现内容。
维护性
语义标记意味着代码更简洁。清晰的代码易于维护。这也确保了任何后续开发者都能轻松理解并参与开发，因为代码结构清晰有序。
另一个节省时间的优势是：使用语义 HTML 后，网页的样式修改和编辑变得更加容易。
由于内容与表现完全分离，无需更改数据即可调整样式，或为多种数据类型应用统一的样式。
总结
选择合适的 HTML 标签不仅仅是一次智力上的考量，始终值得思考是否有合适的 HTML 特性可用于表达内容的某一部分，并为其赋予更深层的意义。
例如，在设计横幅和标志等组件时，应考虑使用 <header> 而非 <div> 包裹。如果样式依赖于类名，那么 <header class="header"> 与 <div class="header"> 的效果相同。
语义 HTML 不仅能提升其他用户的可访问性，使你的工作更具前瞻性，理论上还能改善搜索引擎排名，并帮助残障人士顺利访问你网站上的内容。