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

有一个地标元素。该元素标识文档的主要内容。每页只能有一个。
该元素并不总是地标。它具有不同的语义，具体取决于其嵌套位置。

aside

适用于与文档主要内容间接或切线相关的内容。例如，这篇文章是关于 HTML 的。对于三个站点标头示例（div、role 和语义）的 CSS 选择器特异性部分，切向相关的旁方可以包含在 ;而且，像大多数一样，可能会显示在侧边栏或标注框中。这也是一个地标，具有隐含的作用。

article

嵌套在 我们添加了两个元素。在第一个示例中，当主要内容只是一个单词时，或者在现实世界中，当内容的单个部分时，这不是必需的。

section

当没有更具体的语义元素可供使用时，该元素用于包含文档的通用独立部分。各节应有标题，极少数例外。

与 类似，页脚是否为地标取决于页脚的嵌套位置。当它是网站页脚时，它是一个地标，并且应该包含您想要在每个页面上的网站页脚信息，例如版权声明、联系信息以及指向您的隐私和 cookie 政策的链接。站点页脚的隐式内容是 。否则，页脚没有隐式角色，也不是地标。

h1-h6

有六个节标题元素，每个级别代表章节标题的六个级别之一，分别是最高或最重要的章节级别和最低级别。

posted @ 2023-01-09 15:12  海浪博客  阅读(20)  评论(0)  编辑  收藏  举报