DOJO004

Dashool 創辦人
喜歡調酒
Rails、Nextjs、TypeScript

為什麼你應該在每個頁面的開頭都使用 h1 標籤?

HTML

這是我在做前端效能優化的時候發現的事情。

大意是說，HTML headings 要按照層級的使用。
h1 後面要接 h2 ，而不是直接用 h3 。
例如:

<h1>Setting the Exposure Manually on a Camera</h1>
      <p>Put text here...</p>
   <h2>Set the ISO</h2>
      <p>Put text here...</p>
   <h2>Choose an aperture</h2>
      <p>Put text here...</p>
   <h2>Choose a shutter speed</h2>
      <p>Put text here...</p>

並且，最好在每個頁面上都加上 h1 的標題。(並非適用所頁面)

為什麼這很重要?

標題的目的是傳達頁面的結構。
這對於視力正常的使用者來說，可以透過字體的大小來達到相同的目的，但是對於使用閱讀器的用戶，字體大小一點意義都沒有。

正確的設置標題，可以幫助使用閱讀器的用戶，快速的理解頁面的結構，而不會浪費時間閱讀頁面上所有的資訊。

總結

雖然這並不是強制使用，但正確的設置 h1 標籤，不僅讓視力正常的用戶快速理解頁面結構，也讓使用閱讀器的用戶，可以快速的導覽頁面。

參考資料: Heading levels should only increase by one