HTML 其實相當簡單又好學。
awoo的團隊在與客戶合作時，常常會需要跟許許多多的行銷朋友們討論 SEO 相關的網頁技術，而有許多 SEO 的觀念，都需要一些關於 HTML 的知識來輔助。正在閱讀文章的你也許平常並沒有什麼機會接觸到 HTML 語言，這讓 HTML 不僅聽起來陌生又難懂，可能也不知道該從何學起。想跟大家說的是， HTML 不僅相當的簡單且容易學，如果在 SEO 的路上有了 HTML 的觀念會相當有幫助。
我們想透過這樣的文章來為沒有接觸過 HTML 的大家介紹：
HTML 語言到底是什麼？
HTML （英語：HyperText Markup Language，簡稱：HTML），是一種用來建立網頁的基礎語言，人跟人之間對話需要透過語言，而我們與瀏覽器之間溝通的方式，就是HTML 語言。瀏覽器 ( Chrome 或者是蘋果手機的 Safari … 等等 ) 透過讀取與翻譯 HTML 語言將網頁內容呈現 *( 見註解 ) 出來後，就成了我們在瀏覽器上看到的網頁外觀。
* Render – 彩現，又稱為繪製，當瀏覽器理解了 HTML 的內容後，透過 HTML 提供給瀏覽器的資訊轉換成圖像與文字呈現出來，變成我們所看到的網頁內容，這樣的過程我們稱為彩現。
上方從原始碼到網頁外觀的過程，就被稱為彩現
那 HTML 又是怎麼組成的呢 ? HTML 是由許多的標籤組成的。HTML 語言的標籤，必須在「<」與「>」之間，起始標籤只需要以「<」與「>」包括，但結束的標籤必須要加上左斜線做區分。
例如：<element> 網頁元素內容 </element>
範例：<title> 全台最大的 SEO Blog 上線囉! </title>
HTML 的結構
HTML 的結構分為三大部分，宣告、Head、Body，而這三個區塊分別有不同的功能。接下來我們會簡單介紹這三個區塊到底是負責什麼功能，讓你不再看見原始碼就發抖!
第一部分 – 宣告
<!DOCTYPE html> ，透過這一個標籤，指出我們接下來會使用的的語言是 HTML 。這是要通知瀏覽器，接下來我們要使用 HTML 囉，因為瀏覽器在我們對他宣告要使用 HTML 之後，才能理解我們接著要用哪一種語言跟他對話。雖然宣告只有一個標籤，卻是一定要有的。
第二部分 – 網頁表頭 ( 頭：Head )
網頁表頭，網頁表頭中會有網頁名稱、網頁的 STYLE 樣式、與網頁相關的資訊。
網頁表頭的是由 <head> 標籤起始~到 </head> 標籤結束，上面說的各種資料會放在這兩個標籤裡面。
第三部分 – 網頁主體 ( 身體：Body )
網頁主體，網頁的身體，包含著各種在網頁上看到的內容，不論是文章、圖片或者充滿特色的介面，這些內容都是包含在網頁主體中的。由 <body> 標籤起始，到 </body> 標籤結束，文章、連結、圖片、表格等，各種資訊類的內容，都會放在 <body> 與 </body> 之間。
網頁內容這個區塊會包含相當多的資訊，且這些資訊中有許多的內容會呈現在使用者的面前。需要注意的是，HTML 並不只是一個個標籤分別排列，像 <div> 這樣的標籤是由更多的小標籤組合而成，變成一個有著許多綜合內容的區塊。下圖的 div 中就有著 APPLE特別活動、於美國芝加哥…等等以及連結，組合成一個 div。
複習一下
我們剛剛說到的內容整理有三個重點：
- 第一部份 <!DOCTYPE html> 負責向瀏覽器宣告網頁用的編碼是 HTML*註解 語法使瀏覽器了解接下來該怎麼翻譯。( HTML 5 版本，方便記憶我們簡稱為 HTML )
- 第二部分提供網頁的資訊，包含網頁的資訊、名稱以及網頁的樣式等網頁相關的訊息。( Head 之中包含了各類網頁的資訊，名稱、樣式等等 )
- 第三部分則包含了網頁上的主體內容，包括了文章、圖片、連結等等許多需要被呈現在使用者面前的內容。( Body 之中幾乎都是呈現在網頁上的內容 )
範例：img標籤變成圖片，h4與h2標籤變成標題內容等等
範例：img標籤變成圖片，h4與h2標籤變成標題內容等等HTML 中的各種標記，提供了瀏覽器需要知道的格式、資訊與內容，而瀏覽器在接受到資訊之後將得到的資訊化為我們可以看到的圖像內容，也就是平常大家看到的網頁外觀。所以學習 HTML 的時候大部分的時間都再學習標籤怎麼使用，只有比較少的時間段學習架構與基礎，希望讀完文章之後的大家可以更完整更清楚的理解 HTML 到底是什麼！
延伸閱讀：
寫給程式麻瓜的Javascript介紹，跟工程師溝通零障礙
