语义化 HTML 使用有意义的元素来描述结构和意图。与其到处使用通用容器，不如使用诸如 <header>、<nav>、<main> 和 <footer> 等标签，向浏览器、搜索引擎和辅助技术传达文档角色。
<header>...</header>
<main>...</main>
<footer>...</footer> > 语义化结构是产品质量的倍增器：带来更好的可用性、更好的搜索可见性和更低的维护成本。
屏幕阅读器和键盘用户依赖地标和标题层级。语义标签改善了导航和上下文理解。
搜索引擎能更好地理解内容层次结构和页面目的，从而提高索引质量和相关性。
清晰的结构减少了大型代码库中的上手时间、审查摩擦和意外回归。
这些标签涵盖了大多数生产布局。在求助于通用容器之前，请有意识地使用它们。
页面或区块介绍的首部区域：徽标、标题、摘要、实用操作。
仅用于主要的导航链接。避免用 nav 包裹每一个小型链接列表。
页面的主要内容。每个文档使用一个 main 元素。
具有共同主题的分组内容，通常由标题引入。
自包含的内容，可以独立重用或联合发布。
相关但次要的内容：侧边栏、相关链接、标注。
页面或区块的元数据和实用链接。
与 figcaption 配对的插图、图表、代码截图。
通过三个可靠的步骤，从杂乱的 div 包装器迁移到语义化结构。
原样粘贴您的 Vue/React/HTML 标记。
将结构容器映射到语义标签，同时保持代码完整性。
验证地标和标题，然后合并到您的代码库中。