HTML5 Outline Algorithm

What is an Algorithm?

Input => Algorithm => Output

What is HTML5 Outline Algorithm?

HTML Document => HTML5 Online Algorithm => Outline of the document

Section 及 Heading

Section 比較像是抽象的容器，會被放在對應的層級，組合出整個 Outline Tree
而 Heading 則是某個 Section 的標題

定義 Section

所有在 <body> 內的元素都可以是 Section 的一部分
Section 可以是巢狀的
顯性 (explicitly-defined) 的 Section 定義可以是 <body>, <section>, <article>, <aside>, <nav>
每一個 Section 可以有他自己的 Heading hierarchy
因此，每一個巢狀的 Section 可以有一個自己的 h1

Section 範例

<section>

  <h1>KKBOX</h1> 

  <section>
    <h1>軟體介紹</h1>
    <p>KKBOX是一個線上音樂串流服務，於2004年10月率先在臺灣推出。</p>
  </section>

  <section>
    <h1>歷史</h1>
    <li>
      <ul>2004年於台灣創立</ul>
      <ul>2006年2月開始舉辦KKBOX 線上音樂風雲榜</ul>
      <ul>2011年6月於日本開台</ul>
    </li>
  </section>

  <aside>
    <p>廣告欄位</p>
  </aside>

</section>

<footer>
  <p>(c) 2018 KKBOX Inc</p>
</footer>

以上述的例子來說

最外層的 Section 有 <section> 及 <footer>
而 <section> 內還包含了三個 subsection，分別為兩個 <section> 及一個 <aside>

所以我們得到以下 outline

1. KKBOX
   1.1 軟體介紹
   1.2 歷史

定義 headings

除了 HTML Section 用以定義文件結構之外，HTML outline 還需要 headings 讓每一個 Section 有意義。

規則如下：

第一個出現在 Section 裡頭的 heading element (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)，就是這個 Section 這 heading

heading elements 的等級，依序由最高的 h1 排到最低的 h6
HTML Outline 的結構，取決於 Section 的結構，而不是 Heading 的結構，舉例來說：

<section>
  <h1>KKBOX</h1>    
  <p>直擊每個音樂的美好瞬間。</p>
  <section>
    <h2>軟體介紹</h2>
    <p>KKBOX是一個線上音樂串流服務，於2004年10月率先在臺灣推出。</p>
  </section>
</section>
<section>
  <h3>YYBOX</h3>
  <p>YYBOX是一個線上訂餐服務，於2018年10月率先在臺灣推出。</p>
</section>

我們會得到以下的 Outline

1. KKBOX
   1.1 軟體介紹
2. YYBOX

因此，每個 Section 都只會以其 top-level 的 heading element 為主要依據。

隱性的 Section (Implicit sectioning)

為了向後支援那些已經存在的 HTML4 頁面，因此 HTML5 Sectioning Elements 並不是唯一能夠定義 Outline 的方法；所以我們另外定義了一種 sectioning 的方式，而這樣的方式稱為 implicit sectioning。

The heading elements (<h1> to <h6>) define a new, implicit section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in its parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section.

規則如下


- 如果有任一個 heading elements (<h1> to <h6>) 出現在第一個 heading element 之後，則一個隱性的 section 會被產生。
- 這個 section 會參照它上一層 heading element 的相對層級 (<h1> to <h6>)，產生至相對的位置
- 也就是說，如果它比上一個 heading element 還要低一層，則會在目前 section 底下新增一個 subsection

範例如下

<section>
  <h1>KKBOX</h1>    
  <p>直擊每個音樂的美好瞬間。</p>
  <h3 class="implicit subsection">軟體介紹</h3>
  <p>KKBOX是一個線上音樂串流服務，於2004年10月率先在臺灣推出。</p>
</section>

則會得到以下 Outline

1. KKBOX
   1.1 軟體介紹

特殊情境

情境A：如果在 section 裡頭出現的第二個 heading element，與第一個 heading element 同等級

直接跳出目前的 section，在上一個 section 的同一層等級，建立一個 implicit section
講白話就是「建立同等級的 implicit section」

範例如下

<section>
  <h1>KKBOX</h1>  
  <p>直擊每個音樂的美好瞬間。</p>
  <h1 class="implicit section">YYBOX</h1>
  <p>直擊每個餐盒的美好瞬間。</p>
</section>

則會得到以下 Outline

1. KKBOX
2. YYBOX (直接忽略目前的 section，由 h1 隱性建立新與上一層同等級的 section)

情境B：如果在 section 裡頭出現的第二個 heading element，比第一個 heading element 還要高

直接跳出目前的 section，再開一層更高一級的 implicit section
講白話就是「建立高一層級的 implicit section」

範例如下

<body>
  <h1>台灣軟體服務</h1>
  <h2>趨勢科技</h2>
  <p>雲端防毒與網路安全的全球領導者</p>
  <section>
    <h3>KKBOX</h3>  
    <p>直擊每個音樂的美好瞬間。</p>
    <h3>YYBOX</h3>
    <p>直擊每個餐盒的美好瞬間。</p>
    <h2>GGBOX</h2>
    <p>直擊每隻炸雞的美好瞬間。</p>
  </section>
</body>

則會得到以下 Outline

1. 台灣軟體服務
   1.1 趨勢科技 (由 h2 定義的 implicit section)
   1.2 KKBOX (<section> 定義的 explicit section，這是第一個 heading element)
   1.3 YYBOX (跳脫上一層 section，由 h3 定義的 implicit section)
2. GGBOX (跳脫上一層 section，由 h2 定義的 implicit section)

例外狀況

如果你有一個 section，是透過 CMS 管理的，而最後可能會被插入到任意的頁面當中，那麼最好就讓這個 section 自身從 h1 開始寫起，並且搭配 Explicit section tags 即可。

Sectioning root 區塊根元素

除了自己以外，在這些 Element 底下的所有子元素都不會產生到 outline 當中
除了既有的 <body> 之外，還包含 <blockquote>, <details>, <fieldset>, <figure> and <td>

用以下範例來說

<section>
  <h1>KKBOX</h1> 
  <section>
    <h2>軟體介紹</h2>
    <p>KKBOX是一個線上音樂串流服務，於2004年10月率先在臺灣推出。</p>
  </section>
  <section>
    <h2>歷史</h2>
    <li>
      <ul>2004年於台灣創立</ul>
      <ul>2006年2月開始舉辦KKBOX 線上音樂風雲榜</ul>
    </li>
    <blockquote>
       <h1>風雲榜</h1>
       <p>亞洲數位音樂品牌KKBOX依據其會員於站內點播歌曲紀錄，進行統計而成的年度綜合排行榜。</p>
    </blockquote>
  </section>
</section>

會得到以下 Outline

1. KKBOX
   1.1 軟體介紹
   1.2 歷史

而 <blockquote> 所產生的內部 outline 則會成為一份外部引用 (待釐清?)

那些會被排除在 Outline 之外的 Sections

<aside>
<nav>

Headers and Footers

`<header>` 元素

用來給你放頁面的 Header
不一定要放在 body 的最前面
<article>, <section>, <aside>, <nav> 可以有自己的 <header>

`<footer>` 元素

用來給你放頁面的 Footer
不一定要放在 body 的最後面
<article>, <section>, <aside>, <nav> 可以有自己的 <footer>

ajhsu / blog