寫在前面
我剛開始自學前端的時候，是聽的燕十八老師的8小時學會HTML網頁開發。這個對於零基礎的人來說，真的是一個入門的好選擇。當時感覺前端好簡單的啊，都是div，然後就慢慢走上了前端這條不歸路。由於是入門課程，加上視訊教程也比較老了，所以當時視訊裡面在進行網頁結構佈局的時候，運用了大量的div元素，所以在很長一段時間內，任何的網頁佈局在我的眼睛裡面都是一個個div。但是隨著學習的深入，以及見識到更多的優秀的程式碼之後，我才逐漸意識到除了div很多更加適合的標籤應該被我們在網頁中應用。
是什麼？
html語義化是什麼呢？
這個我並沒有找到官方的權威解釋，對於這個概念，只代表我自己的理解。
html語義化是指：利用適合內容含義的標籤，去構建網頁佈局，讓程式碼更加正確的被理解。
舉個例子，當我們在做一個網頁的導航區域的內容的時候應該使用<nav>標籤，而不是其他的標籤。
好處？
那麼我們為什麼要語義化呢？
可能有的人就說了，為什麼一定要多花記憶力去多記一些標籤呢？div怎麼了？羅老師都說過，又不是不能用！
答案當然是可以用的，但是能用和好用就是兩碼事情了。做為一個有追求的前端，必須要追求更好用，而不僅僅是能用。
下面是語義化幾個主要的優點：
- 可以更好的被搜尋引擎捕獲正確的資訊，有利於搜尋優化。
- 讓網頁的整體結構更加清晰，易讀。
- 有利於團隊以及後期的程式碼的維護。
舉一些例子
用特定的標籤包裹特定的元素，關於語義化可以從多個方面去分析，而我在此只是針對網頁的佈局方面的標籤去舉一些例子 。
<section>:表示文件中的一個章節<nav>:表示只包含導航連結的章節<article>:表示可以獨立於內容其餘部分的完整獨立內容塊<aside>:表示與內容關聯度較低的內容<h1><h2><h3><h4><h5><h6>:表示六層文件標題。<h1>最大，<h6>最小<header>:表示頁面或者章節的頭部，主要包括logo、頁面標題、和導航等<footer>:表示頁面或者章節的尾部，主要包括版權資訊、法律資訊、相關網址等<address>:表示聯絡資訊的一個章節<header>:表示文件中的主要內容
html的語義化，不僅僅包括網頁佈局方面，還有文字形式、嵌入內容以及互動元素等，這些在MDN上都有詳細的介紹。總之，對於頁面上的任何一個元素，都應該用最適合它的含義的標籤去表達。