❏ 什麼是 HTML

當你在搜尋網站並打開網頁畫面的同時，你有想過為什麼你會看到圖文並茂的畫面嗎？這樣的結果是透過什麼樣的方式執行才呈現在你眼前呢？其實工程師在做網頁畫面的時候，其實透過是一堆密密麻麻看起來又很醜的程式碼所執行出來的，瀏覽器會接收來自工程師的程式碼，而這些程式碼需要被瀏覽器解析和執行，才能將它們轉換為我們能夠理解和看到的網頁內容。

瀏覽器首先會解析的是 HTML 程式碼，根據 HTML標記、元素和屬性，理解這個網頁的架構，接下來就會解析 CSS ，確定網頁的外觀和佈局，最後才是 JavaScript，解析這個網頁有什麼動態效果，最終瀏覽器根據解析後的 HTML、CSS 和 JavaScript 資訊，將它們結合在一起，生成一個使用者看到的網頁畫面！

而上面提到那麼多的技術名詞，有 HTML, CSS 和 JavaScript，這些陌生的名詞，往往會讓新手望之卻步，所以這系列的文章將透過我的角度帶你認識網頁開發的架構和應用，那麼就從我們一開始講到的 HTML 開始認識起吧！

HTML 的全名為超文本標記語言，英文原名為** HyperText Markup Language**，HTML 則是取原名的四個字首所拼成的，記得要用大寫表示。而英文 HyperText Markup Language 中的 Markup 在中文是「標記」的意思，因此我們可以簡單將 HTML 理解成：「透過標記把內容轉化成瀏覽器要讀的格式」。

看起來貌似很抽象，那就用一段文字來向大家說明：

網頁菜菜子的一天
打開電腦，先是滑了臉書，再看一些 Youtube 影片，隨著中午時間的逼近，點個 Ubereat 來替今天上午畫下了一個完美的中分號：）
下午時間，網頁菜菜子打算到健身房運動擊敗體脂肪，結束後再吃些蛋白質增加肌肉量。
今天真是完美的一天呢！

如果這段內容放到網頁上，大家有辦法分辨出哪個是標題，哪個是文字嗎？或許在這段短文中，根據大家的閱讀習慣可以猜出何者為標題或是文字段落，但如果今天放上的文章是好幾段的長文字，大家還能輕易辨別出來嗎？

這時，為了讓放上的文字可以輕鬆被瀏覽器解析並顯示在使用者的觀賞畫面時，就會使用 HTML 的標記方式，也就是我們所稱的 標籤，來將內容轉換成瀏覽器能夠理解的格式，讓瀏覽器可以在畫面上做出一些變化，讓使用者能夠一眼辨別出網頁的架構。

❏ HTML 標籤

要將內容標記為瀏覽器能夠理解的格式，我們需要使用標籤（Tags），透過這些標籤將資訊進行標記，使其成為結構化的內容，透過這樣的標籤結構，我們可以對文字進行標記，指示瀏覽器該如何顯示和解釋這些內容。大多數 HTML 標籤都有起始標籤和結束標籤。起始標籤用於標記內容的開始，結束標籤用於標記內容的結束。例如，<h1>是段落的起始標籤，</h1>是段落的結束標籤，裡面的 hello 則是內容，而整個語法我們稱之為元素。

這裡的標籤 中的 h 原文來自 heading，中文是標題的意思，意指要標記這裡面的內容為標題，而結尾標籤要特別注意 "/ "，沒有正確寫出，則無法順利標記，而網頁也就無法做出變化讓使用者判別。

當然，在 HTML 中，多數的標籤都是成對的狀況，但總會有些例外，這個就等到後面真的碰到再提出來和大家聊聊。