语义化HTML的重要性

时间 2020-02-27

标签语义 html 重要性栏目 HTML 繁體版

原文原文链接

牛客的专向题刷完了，系统的总结一下考点，争取搞清楚各类知识点的前因后果。前端精进之路，新的一年，冲鸭！另，这是HTML&CSS重点知识点合集第一篇。其他文章见文末。html

1、HTML

不论是不是作前端的，相信你们都据说过HTML而且本身随随便便就能看着几个现成的网站样式写出几行代码。可是，你有考虑过你真的把HTML用好了嘛？相信你也知道HTML控制的是整个网页的结构，而且它是语义化的。那你在写代码的时候真的把结构语义化考虑进去了嘛？如今写前端代码都流行一个div走遍天下，实现一个导航栏是一个div走到底，实现一个表单也是一个div走到底，你也是这样的嘛？前端

2、HTML语义化真的有说的那么重要嘛？

首先须要说明的是，其实HTML自己是没有表现的。咱们看到的，好比 <h1> 是粗体，字体大小为2em；<strong> 加粗，这实际上是HTML默认的CSS样式在起做用。因此咱们首先要知道，HTML和页面的表现是没有关系的，这些是CSS的事情。HTML在页面中的做用就是结构和含义。浏览器

如今咱们来讨论一下，语义化的HTML结构到底有什么好处：网络

在样式丢失时也能让页面呈现清晰的结构；
更好的支持各类终端，屏幕阅读器会彻底根据你的标记来“读取”网页的内容。例如无障碍阅读和有声小说等；
利于搜索引擎的抓取。搜索引擎的爬虫也依赖于标记来肯定上下文和各个关键字的权重。
便于团队开发和维护。

对于以上这四点，在平常用到的软件或网站中许多都有体现。当你进入谷歌邮箱时，假设这时你的网络很差，你能够直接加载进入“基本HTML”的简略版本。再好比，咱们平常开发中，不少人都喜欢用div去实现一个button，认为这样不只添加样式方便还能够不用管浏览器的兼容性问题。可是咱们很容易忽视的一点是，像div、span这样的标签在默认状况下是没有办法自动得到焦点的（当咱们按tab键时会自动跳过），这对特殊人群无疑是没有任何帮助的。ide

咱们再来看一个例子，假如咱们写了一个表单，提交表单时没有用到 input type="submit"，取而代之的是使用 a 标签的 click 事件作提交。通常状况下是能够正常工做的，可是若是这时候Javascript被禁用了怎么办？回过头来，若是咱们是用的以下文档结构，即使在Javascript被禁用的状况下，表单仍然能够提交。布局

<form>
  <input type="text"> <input type="submit"> </form> 复制代码

代码实现优雅降级也须要正确的体现HTML标签的语义，这样符合浏览器的预期。让咱们网页在各类状况下，如Javascript被禁用，CSS传输失败等等，均可以运做良好。post

同时，语义化的HTML结构不只仅给咱们开发人员看的，更是给搜索引擎看的。字体

好比咱们一个页面能够这样写：网站

<div class="body">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">My Articles</div>
  </div>
  <div class="sidemenu">
    <div class="sidemenu-item">Like</div>
    <div class="sidemenu-item">Share</div>
    <div class="sidemenu-item">Add to favorite</div>
  </div>
  <div class="container">
    <div class="heading">This is the heading</div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, consequuntur!
    </div>
    <div class="button">Next Page</div>
  </div>
  <div class="footer">
    copyright@2020
  </div>
</div>
复制代码

也能够这样写：ui

<body>
  <nav>
    <ul>
      <li>Home</li>
      <li>My Articles</li>
    </ul>
  </nav>
  <aside>
    <ul>
      <li>Like</li>
      <li>Share</li>
      <li>Add to favorite</li>
    </ul>
  </aside>
  <section>
    <h3>This is the heading</h3>
    <article>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, assumenda?
    </article>
    <button>Next Page</button>
  </section>
  <footer>
    copyright@2018
  </footer>
</body>
复制代码

这是HTML&CSS重点知识点合集的其中一篇，合集其它文章：
2.传说中的BFC
3.CSS布局神器——伸缩盒（语法篇）
4.网格布局 ——（语法篇）

参考文章：
1.语义化的HTML结构到底有什么好处？-2009-07-10
2.为何有些前端一直用 div 当按钮，而不是用 button？-2018-10-30
3.理解HTML语义化-2014-03-21

延展阅读：
1.前端不止：Web内容的无障碍性