<h1> ~ <h6> 與 HTML5 語意標籤

HTML5 導入了數個重要的語意標籤,其中與建構文件架構有關的關鍵標籤,包含 <section>  <article> 、 <aside>  與 <nav> ,這幾組標籤代表網頁中某個特定的條目內容,就好像一本書中的章、節等內容區塊,而當你在其中配置了 <h1> 之類的標籤,這個標籤的內容就變成了此區塊中的標題,就如同章或節的標題,也就是大綱。

通常針對網頁上的每個特定的區塊,會指定其專屬的標題,整個網頁有自己的大標題,而標題的配置,則由 <h1> ~ <h6> 總共六個標籤負責,數字愈小,表示標題愈重要,反之則是比較不重要的副標題,考慮以下的配置:

<body>
     <h1>康廷數位學院</h1>
HTML5 教育訓練課程與圖書出版
</body>



其中配置了一個 <h1> ,表示網頁的標題,當你在瀏覽器中檢視這個網頁,會發現代表網頁大標題 <h1> 標籤配置中的字體大很多,如下圖:



這個網頁很簡單,只有一個 <h1> 標籤,因此其輸出大綱為「康廷數位學院」,緊接著進一步擴充其內容,調整如下:


<body>
<h1>康廷數位學院</h1>
HTML5 教育訓練課程與圖書出版
<section>
    <section>
        <h1>
           各種程式設計主題教育訓練課程
        </h1>
        <p>
            HTML5:入門與特定領域進階課程 …
            C#/LINQ:從 C# 入門 …
            ASP.NET:入門 ASP.NET 網站設計 …
        </p>
    </section>
    <section>
        <h1>
           各種程式設計技術圖書出版
        </h1>
        <p>
            HTML5:入門與進階 …
            C#/LINQC# 入門 …
            ASP.NET:入門 ASP …
        </p>
    </section>
</section>
</body>

這段設計已經在稍早討論語意標籤時作過說明,重點放在其中配置的三組
<h1> ,除了表示整個網頁標題的 <body> 內部的 <h1> ,在 <body> 標籤內部的巢狀 <section> 中,另外配置了其專屬的 <h1> ,建立所需的區塊標題,而這些標題輸出的畫面如下:




這裏有兩個重點:
1.    首先是當你未在 <section> 中配置標題時,理論上內容架構中會有一個隱含未定義的標題。
2.    每一個 <h1> 配置的內容都將輸出一個對應其區塊的標題,並根據其在巢狀結構的位置,以不同大小粗細的字體呈現,形成結構化的層次關係,當然,這不是所有的瀏覽器都支援,因此請明確的套用樣式以顯示層次關係。
好了,瞭解標題之後,我們要進一步來看看 <h1> ~ <h6> 這一組標籤與大綱輸出的關聯,它的意義很簡單,基本上就是當你在大綱類型的語意標籤中,以 <h> 級別元素配置了標題,則這個標題就會成為其大綱條目進行輸出,否則的話,這個區塊所屬的大綱其輸出條目就會變成未定義。
考慮上述說明中所舉的例子,我們可以對這個網頁的內容組織大網條目輸出如下:

除了 <body> 所屬的標題是最外層的大綱,接下來其子標籤 <section> 並未配置 <h1> ,因此有一個未定義標題的大綱條目,然後是 <section> 的子標籤,同樣是 <section> 標籤,其內部各配置一個 <h1> 形成兩個相同層級的大綱條目。
在網頁中,大綱是一種特殊的元素,就如同一本書的目錄,可以讓讀者更有效的理解書內容的組織架構,同樣的,大綱條目可以讓程式更容易理解網頁的內容組織架構,而當你配置相關的標籤,就可以輸出所要建立的大綱條目,除了 <body> 內的 <h1> ,就只有稍早曾經提及的 <section><article><aside> 以及 <nav> 中配置 <h1> 會輸出大綱條目,因此這幾個標籤代表一個網頁的區塊架構,就如同書的章、節等內容架構元素。
設計人員通常不會直接配置 <h1> ~ <h6> 標籤進行標題的輸出,而是將其配置於 <header> 標籤成為主標籤,我們下一篇見。


沒有留言: