2014年4月27日 星期日

Tagged under: ,

HTML5 sectioning 元素, 標題 及文件大綱（Outline ）

Huzi 凌晨2:05  No comment
Share
開發 HTML5 網站時，有時只注重視覺的呈現或寫 code 的技巧，而忘了 HTML5 很重要的 Outline (大綱)。

 Outline 是什麼？
以 yahoo 為例，Outline 為右邊的形式


為什麼開發網頁時要注重 Outline 呢？
除了讓瀏覽器快速解析網頁的主要架構，有助於 SEO 之外，讀取的速度還可以加快，所以開發 HTNL5 網頁時，了解並製作正確的 Outline 為首要且重要的一個課題。

如何得到解某網站的 Outliner ？
實用的小工具網站（HTML 5 Outliner）http://gsnedders.html5.org/outliner/

如何編寫正確的Outline？（以下正文開始）

Sectioning

使用新的 sectioning 元素時（article,section,nav,aside），更需要小心 outline 的結構算法
為了方便理解，先看html4的結構

uThe HTML 4.01 outline

<body>
    <header>Site title etc.</header>
    <nav>
        <ul>
            <li><a href="/">Nav item</a></li>
        </ul>
    </nav>
    <article id="main">
        <h1>Article title</h1>
        <p>Article content.</p>
        <h2>Article sub-heading</h2>
        <p>More content.</p>
        <h3>Article sub-sub-heading</h3>
        <p>More content.</p>
    </article>
    <aside>
        <h2>Sidebar heading</h2>
        <h3>Sidebar sub-heading</h3>
    </aside>
    <footer>
        <h2>Footer heading</h2>
        <p>Footer content.</p>
    </footer>
</body>

會得到這樣的 outline
  1. Article title
    1. Article sub-heading
      1. Article sub-sub-heading
    2. Sidebar heading
      1. Sidebar sub-heading
    3. Footer heading
再來用相同架構（只是換了 tag 寫法）來看看 html5 出現的 outline 結果

The HTML5 outline

<body>
    <header>Site title etc.</header>
    <nav>
        <ul>
            <li><a href="/">Nav item</a></li>
        </ul>
    </nav>
    <article id="main">
        <h1>Article title</h1>
        <p>Article content.</p>
        <h2>Article sub-heading</h2>
        <p>More content.</p>
        <h3>Article sub-sub-heading</h3>
        <p>More content.</p>
    </article>
    <aside>
        <h2>Sidebar heading</h2>
        <h3>Sidebar sub-heading</h3>
    </aside>
    <footer>
        <h2>Footer heading</h2>
        <p>Footer content.</p>
    </footer>
</body>

得到以下 Outline
  1. Footer heading
    1. Untitled NAV
    2. Article title
      1. Article sub-heading
        1. Article sub-sub-heading
    3. Sidebar heading
      1. Sidebar sub-heading
此時會發現原本應該在底下的 Footering header 跑到 top-level ?!  而且顯示 “Untited NAV” （未命名）?!!

為何現在 footer 變成了 header？

原因如下：

首先，footer 元素不是 sectioning ccontent ，所以 footer 沒有辦法創造新的 section，而以層級來說，<h2> Footer heading </h2>是唯一在 body 以下的 heading，所以瀏覽器直接讀取 heading 來當 top-level 。

如何避免 footer headering 變成 page heading ?

我們可以把 footer 元素內容包在 section 元素內，如下：

<footer>
     <section>
          <h2>Footer heading</h2>
          <p>Footer content.</p>
     </section>
</footer>

演算結果 ( Outline )：

  1. Untitled BODY
    1. Untitled NAV
    2. Article title
      1. Article sub-heading
        1. Article sub-sub-heading
    3. Sidebar heading
      1. Sidebar sub-heading
    4. Footer heading

雖然感覺有點投機取巧，但輸出的結果的確把 footer heading 放置該有的位置，但現在的問題是 body 沒有 heading 了 ?!

NAV sectioning

現在我們有兩個未命名的 sections，先說明一下，為何 nav 有 “未命名” 的問題？
因為nav 是一個 sections 元素 ，所以依照 outlines 演算法來說，sections 會創造出自己新的 section 區塊。而依照 sections 元素預設應有 heading　的規則來說，nav 沒有輸入 heading 內容 )，所以這裡即顯示 “Untitled NAV” (未命名的標題）。

題外話：
不確定為什麼 nav 被歸列為 sectioning 元素。
導航列中的每個選單 li 都可以有一個標題來標簽他們，但因為這裡是一個 sectioning 元素，所以必須有一個 heading 放置在 nav 元素中去避免 “Untitled NAV” 的問題。

所以我們這麼做：
<nav>
     <h2>Main navigation</h2>
     <ul>
          <li><a href="/">Nav item</a></li>
     </ul>
</nav>

演算結果 ( Outline )：

  1. Untitled Section
    1. Main navigation
    2. Article title
      1. Article sub-heading
        1. Article sub-sub-heading
    3. Sidebar heading
      1. Sidebar sub-heading
    4. Footer heading


避免未命名的 BODY

為了避免 body 元素也成為 “未命名” 區塊，必須放置 heading 在其他 section 區塊外。
但這樣做的問題是，他阻止你放置的實際文件內容在 article 元素裡，而同時他也必須成為此文件階層最高的 heading。

解釋一下：
這裡的意思應該是希望 article title 成為 body heading ，但該如何做才能不影響實際顯示的內容而又成為 body heading，使 outline 演算後變成以下結構：

  1. Article title
    1. Main navigation
    2. Article sub-heading
      1. Article sub-sub-heading
    3. Sidebar heading
      1. Sidebar sub-heading
    4. Footer heading

但因為 article 只有在當你有多個 article 在同一頁面共享一個 heading 才有作用，而以這個例子來說，它可以是一個主頁或 blog 的頁面，所以一個頁面只放一個 article 是不合理的。

這裡想到幾種不同的解決方式：

a)  避免使用 sectioning 元素。

忘掉 section 元素移除的問題， 因為這樣 outlines 會變成跟原本的一樣，最明顯的缺點就是將會錯過任何使用 html5 元素的優勢，不理想。

b)  在任何 sectioning 元素外去重複的 article 標題。

重複的 article 標題，你有可能必須撰寫 css 去隱藏他們，只是為了它擺在 outline 正確的地方，可能不是一個好主意，無論視覺上或 SEO 優化上。

c)  把網站標題（site title）放置在階層最高的 heading。

有些人認為，網站名稱／Logo／組織 名稱的 heading 應該放在最高階層，但我不同意這個看法，我覺得這是文件標題是最重要的，當你拜訪這個網站的時候。

d)  避免使用 article 元素在單一個 article 頁面上。

要如何使用 sectioning 元素，但不換行的把單一文章頁的 article 元素

操作如下：
<body>
    <header>
        Site title etc.
        <nav>
            <h2>Main navigation</h2>
            <ul>
                <li><a href="/">Nav item</a></li>
            </ul>
        </nav>
    </header>
    <div id="main">
        <h1>Article title</h1>
        <p>Article content.</p>
        <h2>Article sub-heading</h2>
        <p>More content.</p>
        <h3>Article sub-sub-heading</h3>
        <p>More content.</p>
    </div>
    <aside>
        <h2>Sidebar heading</h2>
        <h3>Sidebar sub-heading</h3>
    </aside>
    <footer>
        <h2>Footer heading</h2>
        <p>Footer content.</p>
    </footer>
</body>

演算結果 ( Outline )：

  1. Article title
    1. Main navigation
    2. Article sub-heading
      1. Article sub-sub-heading
    3. Sidebar heading
      1. Sidebar sub-heading
    4. Footer heading

到這裡，已經越來越完整了，現在唯一的問題是到這裡， nav 沒有他適合的欄位區域（因為他並不屬於 Article title ) ，這裡很有可能會讓一些使用者感到困惑，解決辦法如下：

<header>
    <h1>Site title etc.</h1>
    <nav>
        <h2>Main navigation</h2>
        <ul>
            <li><a href="/">Nav item</a></li>
        </ul>
    </nav>
</header>

演算結果 ( Outline )：
  1. Site title etc.
    1. Main navigation
  2. Article title
    1. Article sub-heading
      1. Article sub-sub-heading
    2. Sidebar heading
      1. Sidebar sub-heading
    3. Footer heading

大概就這樣了，但我還是覺得 outline 沒有 site title 在裡面將無法更明白地表示出這是什麼網站，噗


via HTML5 sectioning elements, headings, and document outlines

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)