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

Jim8
123 阅读7分钟

什么是HTML语义化：

  1. 使用合适的标签： 使用语义化标签，如<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>等来明确网页的结构和内容。例如，使用<nav>标签来表示导航菜单，<header>表示网页的头部，<footer>表示网页的底部等。
  2. 正确嵌套标签： 使用正确的标签嵌套，确保标签的层次结构清晰，不出现嵌套混乱的情况。这样能够帮助浏览器和搜索引擎更好地解析网页结构。
  3. 提高可访问性： 语义化标签有助于屏幕阅读器和其他辅助技术更好地理解页面内容，提高网站的可访问性，使得所有用户都能获得更好的用户体验。
  4. 增强SEO： 搜索引擎更倾向于识别和索引使用语义化标签的页面，因为这些标签提供了更多关于页面内容的信息，从而有助于提高网页在搜索结果中的排名。
  5. 方便代码维护： 使用语义化标签能够让代码更易读、易懂，便于团队协作和代码维护。

分析语义化案例：

新浪博客

pic1.png

……………………
  <ul id="more" class="sina15-nav-others">
      <li>
          <a href="http://auto.sina.com.cn/" target="_blank">汽车</a>
          <a href="http://edu.sina.com.cn/" target="_blank">教育</a>
……………………
<div class="sina15-client">
   <div class="sina15-client-tl">
       <a class="sina15-more" href="#" data-action="dropdown" data-target="mobileclient">移动客户端<i class="sina15-icon sina15-icon-arrows-a"></i></a>
   </div>
   <ul id="mobileclient" class="sina15-dropdown" style="display: none;">
    <li data-sudaclick="nav_app_weibo_p"><a href="http://m.sina.com.cn/m/weibo.shtml" target="_blank"><i class="sina15-ico-client sina15-ico-weibo"></i>新浪微博</a></li>
      <li data-sudaclick="nav_app_news_p"><a href="http://news.sina.com.cn/m/sinanews.html" target="_blank"><i class="sina15-ico-client sina15-ico-news"></i>新浪新闻</a></li>  
……………………
  1. 导航菜单部分： 这部分使用了无序列表<ul>和列表项<li>来创建导航菜单。每个导航链接都是用<a>标签来定义，其href属性指向相应的页面。这样的结构是比较语义化的，可以清晰地表示页面的导航功能。
  2. 更多菜单部分： 该部分使用了一个具有ID属性的无序列表<ul id="more">，并使用多个<a>标签来创建更多的导航链接。这样的结构也是比较语义化的，用于表示更多的导航选项。
  3. 通行证组件部分： 这部分用于显示移动客户端的下载链接。它使用了<div>标签来组织，其中的<ul>和多个<li>标签包含了下载链接的列表。虽然没有使用特定的语义化标签，但可以认为这个部分的功能是展示移动客户端下载选项，从功能上来说也是比较符合语义化的。

总的来说，该HTML代码使用了合适的标签来表示导航菜单和更多菜单，并且整体结构相对清晰，这样的语义化标记有助于增强页面的可读性、可访问性和SEO效果，也方便代码维护和团队协作。在实际开发中，保持这样的语义化标记是一个良好的实践。

知乎

pic2.png

<div class="col_c">
  <div class="cm_news_main">
      <ul class="cm_ul_round">
        <li class="cm_fb" >
              <a href="https://www.163.com/dy/article/IB44O0M40529AQIE.html?clickfrom=w_zhongchao">马内断崖式下滑！克洛普：搞不懂，他离队时还是状态极佳的世界级</a>
          </li>
……………………
          <li ><a href="https://www.163.com/dy/article/IB48JR9B0529TPTB.html?clickfrom=w_zhongchao">再见传奇！45岁“小将”布冯决定退役，结束近30年辉煌生涯</a></li>
          <li ><a href="https://www.163.com/dy/article/IB3857MJ0529BBRD.html?clickfrom=w_zhongchao">女足赛后众生相：张琳艳抱着队友哭泣 水庆霞失望</a> </li>
      </ul>
  </div>
</div> 
………………
<div class="ns_area_foot" ne-class="{{myState.isReadypage ? 'cm_area_show' : ''}}">
    <div class="N-nav-bottom">
        <div class="N-nav-bottom-main">
        <div class="ntes_foot_link">
          <span class="N-nav-bottom-copyright"><span class="N-nav-bottom-copyright-icon">&copy;</span> 1997-2023 网易公司版权所有</span>
……………………………
          <a href="http://emarketing.163.com/">广告服务</a> |

语义化分析：

  1. 列表部分： 在代码中，使用了一个无序列表<ul class="cm_ul_round">，其中包含多个列表项<li>，每个列表项都是一个新闻链接。每个新闻链接都用<a>标签定义，href属性指向相应的新闻页面。这样的结构在逻辑上比较清晰，表示了一个新闻列表。
  2. 版权信息部分： 该部分使用了<div class="ntes_foot_link">来表示版权信息，其中的内容包含网易公司的版权声明和其他链接。虽然没有使用特定的语义化标签，但是这样的结构在逻辑上也是比较合理的，表示了底部的版权信息。

总的来说，该HTML代码在列表部分使用了适当的无序列表和列表项标签来表示新闻列表，这样的标记在逻辑上是符合语义化的。而在版权信息部分虽然没有使用特定的语义化标签，但其结构也是合理的。需要注意的是，语义化并不一定要求使用特定的标签，更重要的是要使用恰当的标签来表示页面的结构和内容。在这个例子中，虽然没有使用语义化标签如<nav>、<article>等，但整体结构相对清晰，表达了相应的信息，因此可以认为在某种程度上是进行了HTML语义化的处理。

非语义化标签的差异

非语义化标签主要体现在如下方面：

  1. 可读性： 非语义化标签的结构通常较为混乱，难以直观地理解页面的结构和内容。相比之下，语义化标签更清晰易读，使得代码更易于理解和维护。

  2. 可访问性： 语义化标签有助于提高网页的可访问性，使得屏幕阅读器等辅助技术能够更好地理解页面内容，从而提供更好的用户体验。而非语义化标签缺乏明确的结构，可能会影响可访问性。

  3. 搜索引擎优化（SEO）： 搜索引擎更喜欢解析和索引使用语义化标签的页面，因为这些标签提供了更多关于页面内容的信息，有助于提高网页在搜索结果中的排名。而非语义化标签在SEO方面可能表现较差。

  4. 可维护性： 使用语义化标签的代码结构更清晰，使得代码更易于维护。开发者可以更快地理解代码的结构和目的，从而更容易进行修改和更新。

  5. 浏览器解析： 虽然浏览器能够解析和显示非语义化标签，但语义化标签更容易被浏览器正确解析，并保持一致的展现效果。

个人思考：

对我来说，HTML语义化就是在写网页代码的时候，用更符合日常口语的标签来表达页面的结构和内容，就像是给网页“贴上标签”“画道标记”，让浏览器和开发者都能更轻松地理解页面是什么样子，有什么内容。 要说HTML语义化的好处嘛：
​ ​ ​ ​ ​ ​ ​ 首先当然是可读性和维护性咯。使用有语义的标签，代码就像是在讲故事一样，让别人一看就知道这部分是什么，怎么用。这样写出来的代码结构清晰，以后维护起来也会轻松很多。
​ ​ ​ ​ ​ ​ ​ 其次，对可访问性也有影响。用语义化标签，对屏幕阅读器和其他辅助技术更友好，这样即使是一些特殊的用户，比如盲人或者弱视的朋友，也能方便地获取网页内容。
当然了，我们也不能忽略HTML非语义化的弊端：
​ ​ ​ ​ ​ ​ ​ 首先，就是可读性和维护性比较差。如果用一堆<div>和<span>来搭页面，就像是在搭积木一样，让人摸不着头脑，自己看着都费劲，更别说别人接手维护了。
​ ​ ​ ​ ​ ​ ​ 其次，可访问性也会受到影响。没有明确的语义，辅助技术可能无法正确解析页面内容，这就让一些用户面临了障碍。
​ ​ ​ ​ ​ ​ ​ 最后，SEO方面也比较弱。搜索引擎会更难理解和索引非语义化的页面，这样就可能导致网站在搜索结果中的排名下滑。
综上所述，我个人觉得HTML语义化是个非常有意义的做法。用有意义的标签来表达页面结构和内容，不仅让代码看起来顺眼，还提高了网页的可访问性和搜索引擎优化。

avatar
文章
阅读
粉丝