Day2 HTML语义化 | 青训营

Kimhi
99 阅读2分钟

前言

又经过了两天天青训营学习，今天先写一下关于HTML语义化的实践记录。

HTML语义化

定义

  HTML语义化是指使用合适的、具有语义的HTML标签来描述网页的结构和内容，使得页面具备更好的可读性、可维护性、可访问性和搜索引擎优化。通过选择正确的标签，可以更准确地表达各个元素的含义，提高代码的可理解性，并有助于辅助技术（如屏幕阅读器）解析和渲染网页内容。

我们怎么知道页面结构是否语义化？

  1. 标签使用：查看页面中所使用的HTML标签，是否符合其本身的含义和语义。例如，使用header标签表示页面头部，使用nav标签表示导航栏等。
  2. 文档结构：观察页面的整体结构，是否有明确的区块划分和层次关系。语义化的HTML应该能够通过标签和嵌套关系来准确地描述网页的结构。
  3. 内容表达：验证页面的内容是否能够以清晰、准确的方式进行表达。语义化的HTML应能够使阅读者理解并正确解读网页内容，而不依赖于外部样式和脚本。
  4. 可访问性：考虑页面对于辅助技术（如屏幕阅读器）的支持程度。语义化的HTML能够提供更好的可访问性，使得各类用户都能够方便地访问和理解页面内容。

实践展示

使用了HTML语义化

<header>
  <h1>博客标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

<aside>
  <h3>侧边栏标题</h3>
  <ul>
    <li><a href="/category1">分类1</a></li>
    <li><a href="/category2">分类2</a></li>
  </ul>
</aside>

<footer>
  <p>版权信息</p>
</footer>

image.png

非语义化

<div id="header">
  <h1>博客标题</h1>
  <div id="nav">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </div>
</div>

<div id="content">
  <h2>文章标题</h2>
  <p>文章内容...</p>
</div>

<div id="sidebar">
  <h3>侧边栏标题</h3>
  <ul>
    <li><a href="/category1">分类1</a></li>
    <li><a href="/category2">分类2</a></li>
  </ul>
</div>

<div id="footer">
  <p>版权信息</p>
</div>

image.png

  通过对比这两个示例，可以看出HTML语义化标签的优势：清晰表达了网页的结构、内容和意义，增加了代码可读性和维护性，同时也提供了更好的搜索引擎优化和可访问性。因此，我们在编写网页时，建议使用语义化标签来表示页面结构和内容。

avatar
文章
阅读
粉丝