HTML5語義化開發指南

時間 2019-12-07

標籤 html5 html 語義開發指南欄目 HTML5 简体版

原文原文鏈接

爲何要作 HTML5 語義化

HTML5的主要進步之一是引入了一組標準化的語義元素。html

」語義元素「是用於以更有意義的方式標記文檔結構的元素，這種方式能夠清楚地代表它們的用途和目的是什麼。並且重要的是，因爲它們是標準化的，定義文檔的這些元素能夠被每一個人使用並理解，包括機器人。html5

在web無障礙開發領域，給視障用戶使用的屏幕閱讀器是視障羣體訪問網絡的必備工具，合理的 HTML5 語義化元素，會讓屏幕閱讀器正確的理解網頁的內容，從而以最爲合適的方式朗讀。git

站在開發者的角度，寫出符合 HTML5 語義化的結構，也是顯示咱們職業素養的一種方式，最爲重要的是這樣的代碼自帶翻譯，好比下面的div結構，爲了讓開發者明白div的含義，咱們必須在class命名上下功夫。程序員

<div class="header">
    <h1>Super duper best blog ever</h1>
    ...
</div>
<div class="main">
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</div>
<div class="footer">
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</div>
複製代碼

而若是採用語義化元素，結構一目瞭然，不論是往後維護仍是交接給他人，都是件輕鬆的事情。github

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
複製代碼

先來回顧一下 HTML5 有哪些元素（根據 MDN 資料整理）web

HTML5 元素大全

文檔元素

元素
html	HTML 文檔中最外層的元素，也可稱爲根元素。

文檔元數據

元素		元素
head	表示文檔的頭部	title	用來定義文檔的標題
base	爲頁面上的全部的相對連接規定默認 URL 或默認目標	link	定義文檔與外部資源的關係
meta	提供了 HTML 文檔的元數據	style	用於表示文檔所使用的樣式

區塊

元素		元素
body	表示文檔的內容	article	表示文檔、頁面、應用或網站中的獨立結構
section	表示文檔中的一個區域（或節）	nav	描繪一個含有多個超連接的導航欄區域
aside	表示一個和其他頁面內容幾乎無關的部分	h1-h6	標題(Heading)元素呈現了六個不一樣的級別的標題，`<h1>` 級別最高，而 `<h6>` 級別最低
footer	表示最近一個章節內容或者根節點（sectioning root ）元素的頁腳	header	用於展現介紹性內容

內容分組

元素		元素
p	表示文本的一個段落	address	表示其中的內容提供了某我的或某個組織（等等）的聯繫信息
hr	表示段落級元素之間的主題轉換	pre	表示預約義格式文本
blockquote	表示其中的文字是引用內容	ol	表示多個元素的有序列表
ul	表示多個元素的無序列表	li	表示列表裏的條目
dl	表示一個包含術語定義以及描述的列表	dt	用於在一個定義列表中聲明一個術語
dd	用來指明一個描述列表元素中一個術語的描述	figure	表明一段獨立的內容
figcaption	與其相關聯的圖片的說明/標題	main	呈現了文檔的 `<body>` 或應用的主體部分
div	通用型的流內容容器，它應該在沒有任何其它語義元素可用時才使用

文本級語義

元素		元素
a	定義超連接，用於從一個頁面連接到另外一個頁面	em	標記出須要用戶着重閱讀的內容
strong	表示文本十分重要	small	表示邊註釋和附屬細則，包括版權和法律文本
s	表示再也不相關，或者再也不準確的事情	cite	表示一個做品的引用
q	表示一個封閉的而且是短的行內引用的文本	dfn	表示術語的一個定義
abbr	用於展現縮寫	ruby	用來展現東亞文字註音或字符註釋
rb	用於分隔`<ruby>`註釋的基本文本組件	rt	包含字符的發音
rtc	包含 `<ruby>` 元素中文字的語義註解	rp	用於爲那些不能使用 `<ruby>` 元素展現 ruby 註解的瀏覽器
data	將一個指定內容和機器可讀的翻譯聯繫在一塊兒	time	用來表示24小時制時間或者公曆日期
code	呈現一段計算機代碼	var	表示變量的名稱，或者由用戶提供的值
samp	用於標識計算機程序輸出	kbd	表示用戶輸入
sub	定義了一個下標文本區域	sup	定義了一個上標文本區域
i	用於表現因某些緣由須要區分普通文本的一系列文本	b	用於吸引讀者的注意到該元素的內容上
u	表示具備未標註的文本跨度，顯示渲染，非文本註釋	mark	用來表示上下文的關聯性的而突出顯示的文字
bdi	隔離可能以不一樣方向進行格式化的外部文本	bdo	用於覆蓋當前文本的朝向
span	短語內容的通用行內容器，並無任何特殊語義	br	在文本中生成一個換行（回車）符號
wbr	一個文本中的位置，其中瀏覽器能夠選擇來換行

修改記錄

元素		元素
ins	定義已經被插入文檔中的文本	del	表示一些被從文檔中刪除的文字內容

嵌入內容

元素		元素
picture	經過包含零或多個 `<source>` 元素和一個 `<img>` 元素來爲不一樣的顯示/設備場景提供圖像版本	source	爲 `<picture>`, `<audio>` 或者 `<video>` 元素指定多個媒體資源
img	表明文檔中的一個圖像	iframe	表示嵌套的瀏覽上下文，有效地將另外一個HTML頁面嵌入到當前頁面中
embed	將外部內容嵌入文檔中的指定位置。此內容由外部應用程序或其餘交互式內容源（如瀏覽器插件）提供	object	表示引入一個外部資源，這個資源多是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源
param	爲`<object>`元素定義參數	video	用於支持文檔內的視頻播放
audio	用於在文檔中表示音頻內容	track	指定計時字幕（或者基於時間的數據）
map	與 `<area>` 屬性一塊兒使用來定義一個圖像映射(一個可點擊的連接區域)	area	在圖片上定義一個熱點區域，能夠關聯一個超連接

表格數據

元素		元素
table	表示表格數據	caption	展現一個表格的標題
colgroup	用來定義表中的一組列表	col	定義表格中的列，並用於定義全部公共單元格上的公共語義
tbody	表示它們包含表的主體	thead	定義了一組定義表格的列頭的行
tfoot	定義了一組表格中各列的彙總行	tr	定義表格中的行
td	定義包含數據的表格的單元格	th	定義表格內的表頭單元格

表單

元素		元素
form	示了文檔中的一個區域，這個區域包含有交互控制元件	label	表示用戶界面中某個元素的說明
input	用於爲基於Web的表單建立交互式控件，以便接受來自用戶的數據	button	表示一個可點擊的按鈕
select	表示一個控件，提供一個選項菜單	datalist	包含了一組`<option>`元素，這些元素表示其它表單控件可選值
optgroup	建立包含在一個 `<select>` 元素中的一組選項	option	用於定義在`<select>`, `<optgroup>` 或`<datalist>` 元素中包含的項
textarea	表示一個多行純文本編輯控件	output	表示計算或用戶操做的結果
progress	用來顯示一項任務的完成進度	meter	用來顯示已知範圍的標量值或者分數值
fieldset	用來對錶單中的控制元素進行分組	legend	用於表示它的父元素`<fieldset>`的內容的標題

交互元素

元素		元素
details	可建立一個掛件，僅在被切換成展開狀態時，它纔會顯示內含的信息	summary	用做一個`<details>`元素的一個內容的摘要，標題或圖例
dialog	表示一個對話框或其餘交互式組件

腳本元素

元素		元素
script	用於嵌入或引用可執行腳本	noscript	定義腳本未被執行時的替代內容
template	用於保存客戶端內容機制，該內容在加載頁面時不會呈現	canvas	用來經過腳本（一般是JavaScript）繪製圖形
slot	是 Web Components 技術套件的一部分，是Web組件內的一個佔位符

基本佈局

<html>
    <head>
        <title>示例頁面</title>
    </head>
    <body>
        <div>
            <header>
                <h1>個人網站</h1>
                <nav>
                    <a href="">首頁</a>
                    <a href="">文章</a>
                    <a href="">留言</a>
                </nav>
                <aside>
                    <img src="https://via.placeholder.com/30.png/09f/fff" alt="用戶頭像">
                </aside>
            </header>
            <div>
                <main>
                    <article>
                        <section>
                            <h2>文章標題11111</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                        <section>
                            <h2>文章標題2222</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                        <section>
                            <h2>文章標題3333</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                    </article>
                    <ul>
                        <a href="" title="第1頁">1</a>
                        <a href="" title="第2頁">2</a>
                        <a href="" title="第3頁">3</a>
                    </ul>
                </main>
                <aside>
                    <section>
                        <h2>做者介紹</h2>
                        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                    </section>
                    <nav>
                        <a href="">HTML</a>
                        <a href="">JS</a>
                        <a href="">CSS</a>
                    </nav>
                </aside>
            </div>
        </div>
        <footer>
            <address>
                xxxx@xxx.com <br />
                <a href="">https://twitter.com/home</a>
            </address>
        </footer>
    </body>
</html>
複製代碼

查看示例canvas

article 、 section 、 div 的用法區別

若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section>。
若是內容中的幾個部分是互相獨立的，應該使用 <article> 嵌套，幾個部分的內容之間是關聯的應該使用 <section>。
不要把 <section> 元素做爲一個普通的容器來使用，這是本應該是<div>的用法（特別是當片斷僅僅是爲了美化樣式的時候）。

MacOs VoiceOver 讀屏軟件對3個元素的朗讀方式沒有區別，都是直接讀取內部的內容。查看示例瀏覽器

section 、 figure 的用法區別

section 和 figure 有類似的地方，均可以表示一個區域，結構上也類似，均可以有標題和內容，但兩個元素的用法是徹底不同的。ruby

section 的內容跟上下文結構存在關聯關係，figure 的內容是獨立存在的一部分，把 figure 移除不影響主體內容的表達；
section 中存在標題只能在開始的位置，figure 中的標題能夠在開頭也能夠在結尾；

MacOs VoiceOver 讀屏軟件會把 section 的標題說成「標題」，但對 figure 的標題會說成「文本」。查看示例網絡

header 、footer 不止表示頁頭頁尾

一般的用法都是把一個頁面的頁頭用header，頁尾用footer來表示，但這並非它們的惟一用法，根據元素的定義，它們表示的是章節或區塊的頭和尾，嚴格來講一個<article> 元素的頭部須要用 header 來表示，如：

<article>
    <header>
        <h2>咱們是相親相愛的一家人</h2>
    </header>
    <p>.....</p>
</article>
複製代碼

但以上這種 header 中只有一個 h2 的場景中 header 是能夠忽略的。

MacOs VoiceOver 讀屏軟件對 div 中的 header 會說「橫幅」，而對 article 、section 中的 header 會忽略，直接讀內部的內容。查看示例

不是全部的導航連接都須要 nav

只用來將一些熱門的連接放入 <nav> 導航欄，建議這些連接應該是跟當前頁面或站點有較強的關聯性。例如 <footer> 元素就經常使用來在頁面底部包含一個不經常使用到，不必加入 <nav> 的連接列表。

MacOs VoiceOver 讀屏軟件遇到 nav 時會先說「導航「，下一步讀取內部的內容，最後會說」導航的結尾「。查看示例

address 的內容不僅是地址

HTML <address> 元素表示其中的內容提供了某我的或某個組織的聯繫信息，包括真實地址、URL、電子郵箱、電話號碼、社交媒體帳號、地理座標等等，經過它會被放到 footer 裏，但這並非惟一的用法，在頁頭 header 中，article 或其它區塊中須要顯示聯繫信息的地方均可以使用 address。

MacOs VoiceOver 讀屏軟件遇到 address 只是看成普通文本朗讀。查看示例

em 、 strong 、 b 、 i 、 mark 的用法區別

這幾個元素表示的都是對文本內容的強調，但強調的含義是不同的

em 強調的是語句的重心，如「我<em>今天</em>吃薯條了」、「我今天吃<em>薯條</em>了」；
strong 強調的是一句話中重要的必定要看的部分，如"天天早上9點打卡，<strong遲到者罰款1000元</strong>"；
b 強調的是視覺上須要吸引用戶來看的內容，相似廣告語，對用戶來講並不必定很重要；
i 強調的是一段文本中，某些部分須要跟周邊的文本作一些視覺上區別，但不必定是吸引人的；
mark 強調的是上下文的關聯性，如搜索關鍵字；

MacOs VoiceOver 讀屏軟件遇到這5個元素時只是看成普通文本朗讀。查看示例

small 、 s 、 u 還能用嗎

這三個元素在 HTML5 以前，都是爲了表示明顯的排版視覺效果，HTML5 中保留下來並添加了新的語義

small 用來描述對內容的註釋，如版權和法律文本等；
s 用來表示再也不相關或再也不準確的事，如以前對某句話的解釋，不少年以後已經不適用，但要保留在內容中的時候；
u 用來標記中文文本中的專有名稱，或將文本標記爲拼寫錯誤；

建議在除了上面提到的幾個特殊用途以外，再也不使用這三個元素；

MacOs VoiceOver 讀屏軟件遇到這3個元素時只是看成普通文本朗讀。查看示例

blockquote 、 q 、 cite 都表示引用，如何區分

blockquote 引用的是長文本；
q 引用的是短文本；
cite 引用的是一個做品的名稱或連接；

MacOs VoiceOver 讀屏軟件遇到這3個元素時只是看成普通文本朗讀。查看示例

何時使用 div

根據元素的定義，只有在全部 html5 標籤都不適用於你想表達的語義時，這時候才使用終極大法 div，從這個角度來講，目前對 div 元素的濫用實際上是程序員偷懶的一種表現，反正有 div 兜底，也就懶得去思考那些語義元素的區別。

在追求開發效率和作不完的需求面前，使用 div 兜底也是不少人無奈的選擇，我以爲這個是能夠理解，某種程度上也能夠接受的，但進一步去想想，你的產品面向的用戶也有可能會是存在各類行爲障礙的視障、殘障人羣，他們沒法像正常人那樣使用你開發的功能，而須要藉助相似於屏幕閱讀器這樣的輔助工具，這時候纔是真正考驗你的產品是否合格的時候。

咱們作語義化開發，很大程度上就是在幫助更多人的人正常的使用咱們的產品，同時也會讓你離專業的程序員更進一步。

I'm Gafish 原創文章，首發於個人博客，內容若有錯誤，還望指正，謝謝您的閱讀。