HTML语义化的案例分析 | 青训营

用户6530860536137
57 阅读4分钟

HTML 语义化是什么？

按照 W3C 规范正确地使用标签元素和其属性

HTML非语义化标签

标签没有独特的含义

非语义化的标签其实主要只有 div 和 span和a

div: 分区，结合css页面布局 双标签、独占一行

span: 文本标签,双标签、再一行展示

a:标签, 用于控制页面之间跳转,标签并不算是语义标签：他没有意义，只是一个链接。

网站结构分析

我们选择了一个在线商城作为分析对象。该网站的HTML结构如下所示：

xml
复制代码

<header>
  <h1>在线商城</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">购物车</a></li>
      <li><a href="#">登录</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>热门产品</h2>
    <article>
      <h3>产品标题</h3>
      <p>产品描述</p>
    </article>
    <article>
      <h3>产品标题</h3>
      <p>产品描述</p>
    </article>
  </section>
  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="#">帮助中心</a></li>
      <li><a href="#">联系我们</a></li>
      <li><a href="#">退货政策</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>版权信息 © 2023 在线商城</p>
</footer>

在上述代码中，我们可以发现一些语义化标签的使用，如<header>、<nav>、<article>和<footer>。以及一些非语义化标签的使用，如<div>和<ul>。接下来，我们将分析这些标签。

  • <article>：定义独立的、自包含的内容，例如博客文章或新闻报道。
  • <aside>：定义与主要内容相关但可独立于主要内容的部分，例如侧边栏或拉出式广告。
  • <details>：定义用户可以查看或隐藏的额外细节。
  • <figcaption>：定义<figure>元素的标题。
  • <figure>：定义独立的流内容，例如图像、图表或代码片段。
  • <footer>：定义文档或节的页脚。
  • <header>：定义文档或节的页头。
  • <main>：定义文档的主要内容。
  • <mark>：定义需要突出显示的文本。
  • <nav>：定义导航链接。
  • <section>：定义文档中的节。
  • <summary>：定义<details>元素的标题。
  • <time>：定义日期或时间。

在这个HTML结构中，使用了诸如<main>、<header>、<section>、<aside>、<article>等语义化标签，这有助于构建清晰的内容层次结构，让整篇文章更加易读，更加知道那部分的内容属于哪里，是什么。

每个章节也都有使用<h>标签来标记标题，这有助于搜索引擎正确解读网页内容，有助于读者更快地找到对应的内容。

语义化好处

在上面的案例中，我们可以看到语义化标签的使用相对于非语义化标签有以下好处：

  • 可读性更强：使用语义化标签的HTML结构更加具有可读性，可以清晰地传达文档的结构和内容层次。
  • 可访问性更好：语义化标签能够提供更多的可访问性支持，使得使用辅助技术的用户（例如屏幕阅读器用户）能够更好地理解网页内容。
  • 容易维护和修改：语义化标签使得HTML结构更加清晰和易于理解，这样在进行修改或者后续维护时更容易定位和操作相关部分。
  • 对SEO友好：语义化标签可以帮助搜索引擎更好地理解页面内容，从而提高网站的搜索引擎优化效果。

搜索引擎的目的是为用户提供最相关和最有价值的信息。为了做到这一点，搜索引擎需要对网站进行抓取，索引，分析和排序等过程。在这些过程中，语义化标签可以起到以下几个作用：

    • 语义化标签可以让搜索引擎更快地抓取和索引网站的内容，因为它们可以减少网页的代码量，提高网页的加载速度，避免出现错误或者缺失等问题；
    • 语义化标签可以让搜索引擎更准确地分析和评价网站的内容，因为它们可以表达出网页的不同部分和主题，突出网页的重点信息，区分网页的层级和优先级等；
    • 语义化标签可以让搜索引擎更好地匹配和排序网站的内容，因为它们可以提供更多的语义和逻辑信息，帮助搜索引擎理解用户的意图和需求，提升网站的相关性和质量等。

    结论

总之，语义化标签在提高网站的可读性、可访问性、维护性和搜索引擎优化方面都起到了积极的作用。因此，在实际的网站开发中，推荐尽可能使用语义化标签来构建HTML结构。

avatar
文章
阅读
粉丝