每日 30 秒⏱ H1 の 小秘密

簡介

heading 標籤、SEO、無障礙閱讀

ps： 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。

在學習 HTML 標籤的時候，很多教程只告訴你

怎麼用

而沒有講清楚

是什麼

，讓我們一起從

h1

到

h6

開始重新認識 HTML 標籤完善知識體系。

觀其形

Heading 標籤

指的就是網頁中的

h1

到

h6

標籤，很多同學最基本的認知就是

h1

到

h6

標籤字型從大到小。那你有想過既然只是從大到小，那為什麼不直接使用

這樣的表現形式呢？

愛思考的同學會說：“可能是為了方便使用吧？”

乍一聽好像挺有道理的，但是翻閱超多網站都使用的

bootstrap

原始碼 scss/_type。scss 會看到在

3到26 行

對標題重新定義了樣式：

//

// Headings

//

h1

，

h2

，

h3

，

h4

，

h5

，

h6

，

。h1

，

。h2

，

。h3

，

。h4

，

。h5

，

。h6

{

margin-bottom

：

$

headings-margin-bottom

；

font-family

：

$

headings-font-family

；

font-weight

：

$

headings-font-weight

；

line-height

：

$

headings-line-height

；

color

：

$

headings-color

；

}

h1

，

。h1

{

@include

font-size

（

$h1-font-size

）；

}

h2

，

。h2

{

@include

font-size

（

$h2-font-size

）；

}

h3

，

。h3

{

@include

font-size

（

$h3-font-size

）；

}

h4

，

。h4

{

@include

font-size

（

$h4-font-size

）；

}

h5

，

。h5

{

@include

font-size

（

$h5-font-size

）；

}

h6

，

。h6

{

@include

font-size

（

$h6-font-size

）；

}

。lead

{

@include

font-size

（

$lead-font-size

）；

font-weight

：

$

lead-font-weight

；

}

在這段 scss 程式碼中，可以看到除了對

h1

到

h6

被重新定義外，還定義了對應的

。h1

到

。h6

類樣式。這下帶來了新的問題：

開發中經常會重置

Heading 標籤

樣式，那瀏覽器定義的預設樣式豈不是多此一舉？

只是為了方便使用，那

boostrap

還要再定義對應的

。h1

到

。h6

類樣式？

知其意

在 1991 年，蒂姆·伯納斯·李首次提出

HTML

的時候，並沒有給頁面新增樣式的方法。如何顯示頁面是由瀏覽器決定的，使用者也可以透過偏好設定來修改。這就好比現在最經常使用的

markdown

一樣，使用一樣的語法但是根據不同的設定，可以展示不一樣的字型。

在報紙排版中往往會把

頭條內容

加大字號表示重點，並透過其他

小字號

和

頁面排版

來組織內容結構。

那面對密密麻麻沒

樣式

的網頁時該怎麼區分頁面結構呢？參考報紙可以利用

Heading 標籤

來組裝頁面形式，透過

Heading 標籤

可以很方便的知道整個頁面的結構：

h1 用來修飾網頁的主標題，一般是網頁的標題，文章標題。

h2 表示一個段落的標題，或者說副標題。

h3 表示段落的小節標題。

h4 到 h6 表示一些不重要的內容，用來做結構區分。

另外一個形象的例子就是

markdown

中的

#

~

表示標題，我們甚至可以只看

markdown

不需要頁面渲染就能讀懂文章。這也是

markdown

設計的初衷：

方便書寫和閱讀

。

透過

Heading 標籤

瀏覽器可以很容易的讀出整個頁面的主題結構，甚至可以生成目錄方便使用者閱讀，在沒有樣式的時候還是相當有用的，當然隨著

CSS

的誕生頁面樣式可以更好的組織，很多同學也就忘記了它的本意。

小練習：遍歷 dom 節點透過 Heading 標籤來生成一個網頁目錄。

小蜘蛛

廉頗老矣，尚能飯否。

現在很多同學都是使用