[HTML] 理解標籤(tag) 及語意化標籤（SEMANTIC HTML）
Published in
Jul 22, 2021
在初次認識HTML的時候，被滿滿的＜＞符號給搞暈了。所以究竟這些神秘的符號代表了什麼意思呢？所以來寫篇文章來記錄一下這幾天切版的心得～
HTML的結構是如何組成？
一份HTML文件是由許多 tag 標籤結構所組成的
使用者所使用的畫面背後，是由一連串的程式語言所組成的，而HTML就像是網頁的骨頭，將所需要的資料給架構起來。
什麼是HTML標籤(tag) ?
而最常使用到的<div> 標籤，在 div 標籤內所包起來的區塊可以視為獨立的區塊。就像我們建立了一個HTML的架構，但我希望每個區塊是不同的功能、樣式。
以模擬遊戲來說好了，我希望每棟房子的風格不一樣，所以我用<div>劃分每個房子的區塊，接著再按照每棟房子希望的樣式去佈置（加入class來區分每個區塊)。
語意化 HTML (SEMANTIC HTML)
從HTML5開始新增了語意化標籤(Semantic Elements)，為了讓標籤能夠更一目了然這個區塊的位置，讓標籤更有意義，也讓爬蟲能夠抓到位置。
使用語意化 與 使用<div> 的差異？
<div>本身並無意義，就算加了class 依然還是標籤只是我們提供給瀏覽器的指令。
為什麼使用語意化，搜尋引擎的爬蟲能夠更容易抓到位置？
讓搜尋引擎的爬蟲也是非常重要的角色，當能夠被搜尋引擎找到，使用者也就更容易找到我們的網頁。（是說辛苦做出來的網頁也很希望被找到），有助於增強網頁 SEO 的效果。
所以像是<header> 、<nav> 、<main>、<footer>等，都是語意化標籤。如下圖所示，如果使用語意化標籤會讓結構更加完整。
