HTML语义化
为什么要 HTML 语义化
不进行 HTML 语义化，我们可能就是 div 一把梭，一屏幕的 div，也不知道哪个 div 是什么意思。
<div>
<div>
<div></div>
</div>
<div></div>
</div>
为了解决这个问题
我们可能就是会加上一些 class 类名来标注这个 div 的用途，
<div class="header"></div>
加上类似以下的注释来表示这个部分的结束。
<!-- start header -->
<div>xxx</div>
<!-- start header -->
但是上面这些做法对于辅助技术来说都是没有作用的。
元素或“角色”的语义对于辅助技术很重要，在某些情况下，对于搜索引擎也很重要。辅助技术用户依靠语义来浏览和理解内容的含义。
使元素语义化
该属性描述元素在文档上下文具有的角色
该属性使得元素的非语义版本语义化
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
使用语义化的标签
更好的方法就是正确的使用语义化的元素。
使用语义元素时，浏览器能够创建有意义的辅助功能树，使屏幕阅读器用户能够更轻松地导航。
也能让我们自己和他人在阅读代码时，能更清晰地看出代码的层级结构。
<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
语义化标签
main
有一个地标元素。该元素标识文档的主要内容。每页只能有一个。
该元素并不总是地标。它具有不同的语义，具体取决于其嵌套位置。
header
nav
aside
适用于与文档主要内容间接或切线相关的内容。例如，这篇文章是关于 HTML 的。对于三个站点标头示例（div、role 和语义）的 CSS 选择器特异性部分，切向相关的旁方可以包含在 ;而且，像大多数一样，可能会显示在侧边栏或标注框中。这也是一个地标，具有隐含的作用。
article
嵌套在 我们添加了两个元素。在第一个示例中，当主要内容只是一个单词时，或者在现实世界中，当内容的单个部分时，这不是必需的。
section
当没有更具体的语义元素可供使用时，该元素用于包含文档的通用独立部分。各节应有标题，极少数例外。
footer
与 类似，页脚是否为地标取决于页脚的嵌套位置。当它是网站页脚时，它是一个地标，并且应该包含您想要在每个页面上的网站页脚信息，例如版权声明、联系信息以及指向您的隐私和 cookie 政策的链接。站点页脚的隐式内容是 。否则，页脚没有隐式角色，也不是地标。
h1-h6
有六个节标题元素，每个级别代表章节标题的六个级别之一，分别是最高或最重要的章节级别和最低级别。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现