前端進階之說一說你對HTML5語義化的理解

時間 2019-12-05

標籤前端進階一說 html5 html 語義理解欄目 HTML5 简体版

原文原文鏈接

做者：陳大魚頭

github： KRISACHAN

連接：github.com/YvetteLau/S…

背景：最近高級前端工程師 劉小夕 在 github 上開了個每一個工做日佈一個前端相關題的 repo，懷着學習的心態我也參與其中，如下爲個人回答，若是有不對的地方，很是歡迎各位指出。

標籤分類

在一個 html 文檔中，標籤大體能夠分爲如下兩個大類：

<!DOCTYPE>：聲明文檔類型；

<html></html>：限定文檔區域；

<html></html> 內又有如下幾類：html

1. head

<head>標籤用於定義文檔的頭部，它是全部頭部元素的容器。<head>描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。 head內可存放標籤有：前端

<base>：爲頁面上的全部連接規定默認地址或默認目標。
<link>：主要用於style文件引入
<style>：樣式表區域
<title>：可定義文檔的標題。<title> 標籤是 <head> 標籤中惟一要求包含的東西。
<meta>：提供了有關當前HTML元素的元信息 (meta-information)

2. body

<body>標籤內存放文檔的內容。 <body>內標籤分類有如下11類：git

內容分區
文本內容
內聯文本語義
圖片和多媒體
內嵌內容
腳本
編輯標識
表格內容
表單
交互元素
Web組件

HTML 標籤語義化

語義化到底重不重要？github

咱們知道，在HTML中，每一個標題是經過標題標籤來定義的，標題標籤一共有6個，分別是：h1~6。例子以下：瀏覽器

<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
複製代碼

若是是連續的標題，則能夠用 <hgroup> 來鏈接：微信

<hgroup>
  <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
</hgroup>
複製代碼

若是是段落內容，則用 <p>：前端工程師

<p>我是段落內容</p>
複製代碼

若是咱們要列一個列表則能夠用 <ol></ol> 或 <li></li> 。若是隻是要標記項目，咱們能夠用 <li></li> ，例子以下：組件化

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>奧特曼</li>
  <li>橙子</li>
</ul>
複製代碼

如果標記順序，則用 <ol></ol> ，例子以下：學習

<ol>
  <li>向前走300米</li>
  <li>右轉</li>
  <li>向前走300米</li>
  <li>右轉</li>
  <li>向前走300米</li>
</ol>
複製代碼

固然咱們也能夠按需嵌套。優化

<ol>
<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻，調成「醃料」，雞胸肉切成約一釐米見方的碎丁並用「醃料」攪拌均勻，醃漬半小時。</li>
  <li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成「綜合調味料」。</li>
  <li>雞丁醃好之後，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色以後，撈出來瀝乾油汁備用。</li>
  <li>在鍋裏留下約兩大匙油，燒熱後將切好的幹辣椒下鍋，用小火炒香後，再放入花椒粒和蔥段一塊兒爆香。隨後雞丁從新下鍋，用大火快炒片刻後，再倒入「綜合調味料」繼續快炒。</li>
  <ul>
    <li>若是你採用正宗川菜作法，最後只需加入花生米，炒拌幾下就能夠起鍋了。</li>
    <li>若是你在北方，可加入黃瓜丁、胡蘿蔔丁和花生米，翻炒後起鍋。</li>
  </ul>
</ol>
複製代碼

在咱們日常說話的時候，爲了突出重點，咱們每每會強調某些詞，就如以下的例子：

<p>我<em>很是</em>喜歡加班</p>
複製代碼

若是是重音強調，則：

<p>魚頭，明天<strong>別遲到</strong>了</p>
複製代碼

若是你在項目的一開始就使用HTML語義化，不只不會花更多的時間，並且又有如下的可訪問性優勢：

更便於開發 — 如上所述，你可使HTML更易於理解，而且能夠絕不費力的得到一些功能。
更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便，而且更易於響應式開發。
更便於SEO優化 — 比起使用非語義化的

標籤，搜索引擎更加劇視在「標題、連接等」裏面的關鍵字，使用語義化可以使網頁更容易被用戶搜索到。（雖然在9012年的今天，SEO並沒太大軟用）