前端进阶之说一说你对HTML5语义化的理解
- 作者：陳大魚頭
- github： KRISACHAN
- 鏈接：github.com/YvetteLau/S…
- 背景：最近高級前端工程師 劉小夕 在 github 上開了個每個工作日布一個前端相關題的 repo，懷著學習的心態我也參與其中，以下為我的回答，如果有不對的地方，非常歡迎各位指出。
標簽分類
- 在一個 html 文檔中，標簽大致可以分為以下兩個大類：
- <!DOCTYPE>：聲明文檔類型；
- <html></html>：限定文檔區域；
<html></html> 內又有以下幾類：
1. head
<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。<head>描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。 head內可存放標簽有：
2. body
<body>標簽內存放文檔的內容。 <body>內標簽分類有以下11類：
HTML 標簽語義化
語義化到底重不重要？
我們知道，在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并沒太大軟用）無障礙設計
在Web開發無障礙性意味著使盡可能多的人能夠使用Web站點,即使這些人的能力是有限的。這里我們提供關于開發易訪問的內容的信息。
“無障礙性是最常用于描述設施或設施,幫助殘疾人,如“輪椅”。這可以擴展到盲文標識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網站設計,等等。"
WAI-ARIA
WAI-ARIA 是一項技術，它可以通過瀏覽器和一些輔助技術來幫助我們進一步地識別以及實現語義化，這樣一來能幫助我們解決問題，也讓用戶可以了解發生了什么。
WAI-ARIA 是W3C編寫的規范，定義了一組可用于其他元素的HTML 特性，用于提供額外的語義化以及改善缺乏的可訪問性。以下是規范中三個主要的特性：
角色（role）：這定義了元素是干什么的；
屬性： 通過定義一些屬性給元素，讓他們具備更多的語義；
狀態：用于表達元素當前的條件的特殊屬性。
后記
HTML語義化非常地重要，雖然在組件化開發的今天，利益沒那么明顯，但是對于后期維護，用戶訪問以及用戶友好度來說都是非常重要的，在某些國家，語義化跟無障礙標準化甚至是衡量一個線上產品能否上線的標準。
如果你、喜歡探討技術，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生
總結
以上是生活随笔為你收集整理的前端进阶之说一说你对HTML5语义化的理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019-05-21 Java学习日记之
- 下一篇： java版spring cloud+sp