寫好 HTML 不僅有標籤語義化

前言

隨着近兩年組件化 JS 框架的流行，你們對於 HTML 自己的關注度些許有些下降。HTML 容易被人忽視但並不表明它不重要。一個網頁，能夠沒有 JS 也能夠沒有 CSS 可是必定不能沒有 HTML（固然可能還有其它的標記語言）。

在我看來寫好 HTML 遠遠不止標籤語義化這麼簡單。想要知道一個網站的 HTML 寫的好很差，你只須要用 chrome 瀏覽器將其 CSS 和 JS 都刪除掉，留下的部分若是依然邏輯清晰，主次分明，那就算寫的不錯的HTML了。

這邊總結了幾個寫 HTML 的思路提供給你們參考。

1. 寫 HTML 以前必定要理清楚網頁的大綱，分清楚主次；
2. 寫好 HTML 應該暫時摒棄設計稿；
3. 寫好 HTML 應該暫時摒棄技術的實現難度；
4. 寫好 HTML 應該考慮更多無障礙的細節；
5. 寫好 HTML 不是一步登天的，不斷調整和迭代的過程；
6. HTML 容易被人忽視，但並不表明它不重要；

這是示例網頁，爲了展現切成了左右兩塊。爲了減小篇幅，省略了 Trailers 下的模塊。

1、大綱

其實寫 HTML 和寫做文是同樣同樣的。老師告訴咱們，拿到做文的第一步不是立刻就開始寫，而是先審題。

拿到設計稿的第一步，咱們也不要着急開始寫 HTML。應該先搞清楚網頁的中心思想，分析一下整個網頁的大綱。

能夠看到，該網頁主要的中心思想就是 what‘s next，而後緊接着是一個四級的主次層級。也就說咱們這個網頁的大綱層級達到了五級。而五級能夠反應出這個網頁的層級實際是偏深的。

一般來講，一個移動頁面的層級，不建議超過 3 層。頁面的層級越複雜，用戶理解成本就會越高，體驗就會相應的越差。對於開發來講，層級越複雜表明着業務邏輯越複雜，也就是你會寫更多複雜的代碼。

此時，這個大綱會是一個你能夠反駁設計和產品的有力證據。

這裏特別須要提到的點是。一開始我認爲 Readers’ choice last week 下面是一個書籍列表。當我梳理大綱以後，我發現 Readers’ choice last week 和 Stories in Queue 其實都有 Female lead 和 Male lead 這個二級的關係。

只是在這裏設計同窗用了兩種設計方式，一個把這個標題放到了外面，一個把這個標題放到了模塊內部。比較容易讓人忽略掉這層邏輯關係。

因此梳理大綱還能幫助咱們理清楚網頁的結構和層級，看到設計背後更深層的東西。

2、標籤的隱藏

基本上梳理完大綱，咱們 HTML 的大致結構也就出來了。驚喜的是，咱們甚至能直接經過瀏覽器默認的樣式識別出文檔內容的層級。

在這裏並無使用 h1 做爲大綱的第一個層級，由於一般 h1 是咱們網站 LOGO 和 HOME 連接的保留標籤。

能夠看到 h2 和 h3 這個層級的標籤在咱們的視覺上是沒有呈現的，那咱們要怎麼辦呢？視覺上沒有呈現，就用視覺上的方式將其隱藏就好。

.hidden{
    position:absolute;
    clip:rect(0,0,0,0);
}
複製代碼

這裏不太建議使用 display：none； 來隱藏咱們的元素。由於有可能標題須要被錨點捕捉到（好比這裏的nav導航能夠錨點到咱們的 h3 的標題）。若是採用display:none; 的話這個邏輯就失效了。

3、標籤語義化

標籤語義化，個人思路是，它是什麼就用什麼標籤。而不是它長得像什麼就用什麼標籤。簡單的說，不是看到加粗你就要用 strong，而是由於它語氣更強須要被強調才使用strong。

strong: 把文本定義爲語氣更強的強調的內容 --w3school。

通常來講，一個網頁元素的優先級是按照 F 陣型排列的。也就是說，左邊比右邊的重要，上面的比下面的優先級高（不過設計同窗每每會用一些設計手法略微打破這個規則，但大致是這樣）。

在這個模塊裏面，基於以前但大綱，咱們能夠知道 female lead 的權重是比書名的權重高的，雖然它看起來比書名的字體小。因此這裏我選擇的是 h5 和 h6。

基於位置咱們能夠認爲分類 fatasy 是比後面兩個數字的權重要高的，因此這裏我依次選用了 <strong> 和 <em>。一開始後面兩個數字我是想用 <small> 標籤的，由於它倆看起來是在是太像 <small>了。可是去看了一下定義發現 <tt> <i> <b> <big> <small> 這幾個標籤都只是爲了文字樣式定義的，並不具備權重的定義。這就再一次論證了，以前提到的不要由於它看起來像某個標籤而去選擇對應的標籤。而應該脫離設計稿，基於文檔的權重去考慮。

哪些狀況咱們能夠用這幾個服務於文字樣式的標籤呢？好比一些裝飾性的小圖標，或這不具備權重的文本...這裏能夠看到我用 <i> 做爲了數字前小圖標的標籤。固然若是你的圖標選擇的是 svg 的方案，那這裏用 <svg> 則更適合。

4、無障礙訪問

由於咱們本身開發網頁，本身也使用網頁。因此每每會有一種全部人都和咱們同樣的錯覺。其實無障礙的範疇是很是的廣的。遠遠不僅是閱讀網頁有障礙的弱勢羣體。他們有多是網絡環境差的人，也有多是暫時找不到鼠標，或者鍵盤失靈的朋友，也有多是掃描你網頁的網絡爬蟲...

對於無障礙訪問，足以開一個新的文章來說。本身經驗也尚欠火候，這裏只提一下幾個本身知道的細節。

能夠我在閃電圖標內部放了一個實際看不見的文案 total votes 用於表示這個數字的意義。固然你能夠用超高的 line-height，或者負的 text-indent 加上 overflow:hidden 來隱藏元素。

這樣作的好處是，可讓屏幕閱讀器讀到這裏的時候，告知用戶這個數字的含義。也能夠利於搜索引擎知道這個數字的意義，也能夠在 css 文件加載失敗的時候讓用戶看到這段文字。

固然若是你這裏使用的是 svg 圖標，沒法添加文字，那這邊建議是在<em> 上添加 aria-label="total votes" 來實現相似的邏輯。

還看到我在這個元素的最後添加了隱藏的 <a> 連接做爲元素的跳轉邏輯。而不是用一個 <a> 包裹着整個模塊。

首先用一個<a> 包裹着整個模塊，是實現這個模塊整個點擊最簡單的方式。可是這裏我想說的是，和以前不能束縛於設計稿同樣，想要寫好 HTML 也儘可能不要束縛於技術實現。它是什麼就用什麼標籤，而不是咱們怎麼實現簡單就用什麼。

不過這裏舉的例子裏面恰好有一個操做 vote 按鈕。這個最簡單的方案直接會產生 <a><button/></a> 這種不符合 W3C 規範的嵌套結構。因此再次證實這種看似簡單的結構的拓展性也是比較差的。

因此這裏我推薦使用這種在最後建立 幽靈遮罩 連接的方式來解決以上全部的問題。更多技術實現能夠查看這片文章 從掘金首頁列表一個小 Bug 提及。

結尾

這裏再放一下文中反覆提到但幾個我的觀點。

1. 寫 HTML 以前必定要理清楚網頁的大綱，分清楚主次；
2. 寫好 HTML 應該暫時摒棄設計稿；
3. 寫好 HTML 應該暫時摒棄技術的實現難度；
4. 寫好 HTML 應該考慮更多無障礙的細節；
5. 寫好 HTML 不是一步登天的，不斷調整和迭代的過程；
6. HTML 容易被人忽視，但並不表明它不重要；

和全部技術同樣，想要寫好 HTML 就要花更多的時間，去考慮更多細緻上的問題。 可是我也不得不認可咱們老是會把時間分配給那些看起來對於項目上更重要的事情。因此這裏只是提供一些本身總結的寫好 HTML 的幾個思路，具體實際的時候仍是須要本身去斟酌。

這邊再安利一個能夠幫助你們，寫好 HTML 的純 CSS 即插即用的工具 @_nu/html-validator

本文純屬我的觀點，有任何不足和疑問能夠給我留言