1. HTML 語義化

1.1 如何理解 HTML 語義化的？

• 讓根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。

1.1.1 為什麼要語義化？

• 為了在沒有 CSS 的情況下，頁面也能呈現出很好地內容結構、程式碼結構 : 為了裸奔時好看；

• 使用者體驗：例如 title、 alt 用於解釋名詞或解釋圖片資訊、 label 標籤的活用；

• 有利於 SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；

• 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；

• 便於團隊開發和維護，語義化更具可讀性，是下一步網頁的重要動向，遵循 W3C 標準的團隊都遵循這個標準，可以減少差異化。

1.1.2 常用的語義化元素

• <article></article>SM:用來在頁面中表示一套結構完整且獨立的內容部分

• <aside></aside>SM:主題的附屬資訊 ( 用途很廣，主要就是一個附屬內容 ) ，如果 article
  裡面為一篇文章的話，那麼文章的作者以及資訊內容就是這篇文章的附屬內容了

• <figure></figure>SM:媒體元素，比如一些視訊，圖片啊等等

• <datalist></datalist>SM:選項列表，與 input 元素配合使用，來定義 input 可能的值

• <details></details>SM:用於描述文件或者文件某個部分的細節,預設屬性為 open

• <header></header>

• <footer></footer>

• <nav></nav>

• <section></section>

• <time></time>

• <summary></summary>

• <main></main>

• <mark></mark>

• <figcaption></figcaption>