HTML语义化｜ 青训营

知识星球
73 阅读6分钟

我们可以知道以前的HTML结构基本上就是div+css，然而div并没有什么实际的意义，只能依靠css来渲染页面样式，随着科技，互联网的发展，开发者提出了HTML结构的语义化，并且w3c也进一步制定了语义化标签。本文分享一些对语义化的分析思考

语义化的定义

语义化就是构成HTML结构的标签要有意义。 比如就像<head> 标签用来表示头部。<footer>标签用来表示页面底部。如果将表示头部的<head>标签和表示底部的<footer>标签都换成<div>标签，则不是HTML的语义化标签了。

语义化的作用

  • 对于开发者来说，起到重要作用，可以更加容易阅读，进行进一步的开发和维护，降低成本代价。
  • 对于用户来说，能够提供更好的体验(即使css加载失败，页面也能呈现出良好的结构)

如何做到语义化

  • 一般网站分为头部、导航、文章（或其他模块）、侧边栏、底部，根据不同部位，使用不同的标签进行书写。

  • 表示页面不同位置的标签：header、nav、article、section、aside、footer

  • 表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、detail、ol、ul、img、input、p等

  • 尽可能少的使用无语义的标签<div>等

  • 在语义不明显时，既可以使用div标签又可以使用p标签时，尽量使用p标签，因为p标签默认情况下有上下间距，对兼容特殊终端有利；

  • 不要使用纯样式标签，如：b、font、u等，使用css进行设置

  • 需要强调的文本，可以包含在strong或者em标签中

  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

如何判断页面结构是否语义化？

可以将css去掉，查看html代码的结构是否清晰，在查看页面内容是不是便于阅读

HTML语义化实例分析

经过查找与选择，我们选用csdn为例

     <div class="operating">
                    <a class="href-article-edit slide-toggle">版权</a>
                </div>
            </div>
        </div>
    </div>
    <div id="blogHuaweiyunAdvert"></div>
        <div id="blogColumnPayAdvert">
            <div class="column-group">
                <div class="column-group-item column-group0 column-group-item-one">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.csdn.net/m0_65335111/category_12039558.html" target="_blank" title="HTML"
                        data-report-view='{"spm":"1001.2101.3001.6332"}'
                        data-report-click='{"spm":"1001.2101.3001.6332"}'>
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
                            <span class="title item-target">
                                <span>
                                <span class="tit">HTML</span>
                                    <span class="dec">专栏收录该内容</span>
                                </span>
                            </span>
                        </a>

<从页面源码节选>

代码中运用了很多的<div>以及<span>标签，如果要对这段代码进行维护，首先将再理解代码上耗费时间，给人感觉结构并不清晰.

接下来让我们再看一下某呼首页的代码

<head>  
  <!-- 省略了一些元数据和样式 -->  
</head>  
<body>  
  <div id="root">  
    <div class="App">  
      <div class="Sticky AppHeader">  
        <header class="AppHeader-inner">  
          <!-- 网站logo -->  
          <a href="/" class="AppHeader-logo">  
            <img src="..." alt="x乎" />  
          </a>  
          <!-- 搜索框 -->  
          <form class="SearchBar" action="/search" method="get">  
            <input type="text" name="q" placeholder="搜索你感兴趣的内容…" />  
            <button type="submit">搜索</button>  
          </form>  
          <!-- 导航栏 -->  
          <nav class="AppHeader-nav">  
            <ul>  
              <li><a href="/home">首页</a></li>  
              <li><a href="/explore">发现</a></li>  
              <li><a href="/follow">关注</a></li>  
              <li><a href="/notifications">消息</a></li>  
            </ul>  
          </nav>  
          <!-- 用户菜单 -->  
          <div class="AppHeader-userMenu">  
             <!-- 省略一些内容 -->  
          </div>  
        </header>  
      </div>  
      <!-- 主要内容 -->  
      <main class="App-main">  
        <!-- 左侧边栏 -->  
        <aside class="LeftSideBar">  
          <!-- 推荐话题 -->  
          <section class="LeftSideBar-section">  
            <h2>推荐话题</h2>  
            <ul>  
              <li><a href="/topic/19550517">程序员</a></li>  
              <li><a href="/topic/19552832">电影</a></li>  
              <li><a href="/topic/19551147">旅行</a></li>  
              <!-- 省略了一些话题 -->  
            </ul>  
          </section>  
          <!-- 推荐专栏 -->  
          <section class="LeftSideBar-section">  
            <h2>推荐专栏</h2>  
            <ul>  
              <li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />前端早读课</a></li>  
              <li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎数据中心</a></li>  
              <li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎日报</a></li>  
              <!-- 省略了一些专栏 -->  
            </ul>  
          </section>  
        </aside>  
        <!-- 中间内容 -->  
        <div class="Content">  
          <!-- 推荐内容 -->  
          <section class="Content-section">  
            <h2>推荐内容</h2>  
            <!-- 省略一些内容 -->  
          </section>  
        </div>  
        <!-- 右侧边栏 -->  
        <aside class="RightSideBar">  
          <!-- 广告 -->  
          <section class="RightSideBar-section">  
            <h2>广告</h2>  
            <!-- 省略一些内容 -->  
          </section>  
          <!-- 热门内容部分 -->  
          <section class="RightSideBar-section">  
            <h2>热门内容</h2>  
            <!-- 省略一些内容 -->  
          </section>  
        </aside>  
      </main>  
      <!-- 页脚 -->  
      <footer class="App-footer">  
        <!-- 网站信息 -->  
        <div class="App-footer-info">  
          <p>![]() 2023 x乎 · 关于x乎 · 加入我们 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · x乎协议 · 隐私政策 · x乎侵权举报 · x乎标志使用规范 · x乎社区管理细则 · 工作机会</p>  
        </div>  
        <!-- 友情链接 -->  
        <div class="App-footer-links">  
          <p>友情链接：</p>  
           <!-- 省略一些内容 -->  
        </div>  
      </footer>  
    </div>  
  </div>  
</body>  
</html>

某呼实现了HTML的语义化，我们只需要看代码就能在脑海里形成网页的大致样子，进行语义化与非语义化的对比，相信可以非常直观的感受到使用了语义化标签之后，html的整体结构变得更清晰明了。对页面的维护非常非常的友好，而没有实现html的语义化的页面的可读性很低，结构很不明朗，还得借助div标签属性class名来进行区分辨别，这对我们的结构分析会造成很大麻烦。此外，身处在科技发展的时代，机器对非语义化的分析效率也会大大降低，影响数据分析。

我们可以使用以下语义化标签来进行前端开发，尽量减少使用div和span标签

内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体佈局宽度	wrapper
左右中	left right center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu
搜索	search
友情链接	friendlink
页脚	footer
版权	copyright
滚动	scroll
内容	content
文章列表	list
提示信息	msg
栏目标题	title
服务	service
状态	status
合作伙伴	partner
导航	nav
主导航	mainnav
子导航	subnav
顶导航	topnav
边导航	sidebar
右导航	rightsidebar
左导航	leftsidebar
标签	tags
小技巧	tips
加入	joinus
指南	guide
注册	regsiter
投票	vote
菜单	menu
子菜单	submenu
标题	title
摘要	summary

扩展知识SEO

SEO百度百科

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

语义化对于SEO的作用

语义化标签可以提升网站的SEO排名是因为他们可以让搜索引擎更好的理解网站的内容和结构，搜索引擎目的是为用户提供最相关和最有价值的信息，为了达到这个目标，搜索引擎需要对网站进行抓取，索引，分析，和排序等一系列过程。在这些过程中语义化标签可以起到以下几个作用

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