要做網頁設計，HTML 可以說是很重要的基礎，它是用來編寫網頁的內容，建構網頁骨架的語言。HTML 是用標記的方式，幫網頁的內容加上特殊的意義，例如這段原始碼<h1>This Is A Heading</h1>，就是把 This Is A Heading 的文字標記成階級一的標題，讓瀏覽器看到這段文字時，知道要把它解釋成階級一的標題，然後顯示出來。HTML 的全名叫做 HyperText Markup Language，markup 就是標記的意思啦！那麼標記到底是什麼呢？要怎麼用標記寫網頁呢？我們立刻來看看下面的範例：
HTML 元素的結構
1 |
|
這是一段 HTML 原始碼，看起來像天書一樣！這真的有辦法變成漂亮的網頁嗎？現在就打開文字編輯器，把上面的原始碼寫成文件，存成.html 的檔案，再用瀏覽器打開它，就會看到：天哪！天書竟然變成比較漂亮的畫面了！就像下面這樣：（Magic～～～）
為什麼瀏覽器可以把這份天書變成容易閱讀的網頁呢？其實是寫 HTML 有一定的格式啦！我們的網頁是用一個一個的「HTML element」組成的。現在就讓我們用 Google Chrome 當作範例瀏覽器，照著下面的步驟試試看，就會清楚地看到 HTML elements 怎麼構成一個網頁啦：
- 在這個網頁上按下滑鼠的右鍵。Mac 使用者請先按住
^ control鍵，再點擊這個頁面 - 選擇「檢查」
- 在彈出的開發人員工具上，點擊左上角的箭頭，也就是選取元素按鈕
- 把滑鼠移到這段文字上點一下
- 到這裡，就會看到開發人員工具標示出被選中的元素了！像這樣：
那要寫 HTML，到底要依照什麼格式來寫，瀏覽器才看得懂呢？答案是：<opening tag>內容</closing tag>！在原始碼裡面，我們可以看到很多有角括號的標記（tags），把一部份的內容包起來，例如 <h1>A Simple Web Page</h1>。以這段原始碼來看，它是一個HTML element，裡面包含了 opening tag、closing tag 和內容：
- 在左邊的
<h1>，我們稱它叫 opening tag（開始標記），代表一段標記的開頭 - 在右邊的
</h1>，我們稱它叫 closing tag（結束標記），代表一段標記的結束 - 在中間被 opening tag 和 closing tag 包起來的
A Simple Web Page文字，是被標記起來的內容啦！
而 opening tag 加上 closing tag 再加上被封閉起來的內容，我們稱為一個 element；在角括號中間的 h1 呢？它是標記的名稱。HTML 就是用這種方式，來幫一段內容標記上特殊的意義。
我們再來看一個 p element 的例子：<p>This is a simple web page written in HTML.</p>。<p> element 代表一個文字段落，而段落的文字，就是被<p>和</p>標記起來的內容啦！現在我們來猜猜看，這段標記的 opening tag、closing tag 和被標記起來的內容各是什麼呢？答案是：
- Opening tag：
<p> - Closing tag：
</p> - 被標記起來的內容：This is a simple web page written in HTML.
而且呀，HTML element 的內容不只可以是文字，還可以是其它的 elements 呢！
Nesting Element
Nesting element 是在一個 HTML element 裡面，再放 HTML elements，例如下面的範例：
1 | <p>We can put elements <strong>inside</strong> an element.</p> |
這段原始碼裡面有個<p> element，它的內容除了文字以外，還有一個 strong element，用來標示 inside 是一段強調文字。當瀏覽器遇到 strong element 時，預設會把標記起來的內容用粗體顯示，<p> element 裡面只有 inside 這個字被用 strong tags 標記，所以整個段落的文字只有 inside 變成了粗體呢：
很有趣吧！這種把元素放在元素裡面的寫法叫做 nesting。那麼，所有的 elements 裡面都可以再放其它的內容嗎？
Void Element
當然不是囉！不是所有的 elements 都會有 opening tag 和 closing tag。舉例來說，下面是一個 <img> element 的範例：
1 | <img src="https://picsum.photos/600/400" alt="An image" /> |
<img> element 的用途是在網頁上插入圖片。發現了嗎？<img> element 只有1個 opening tag，而沒有 closing tag 呢！這種元素沒辦法被加入任何的內容，我們稱這種只有 opening tag、沒辦法幫它加入內容的 element 叫 void element。
現在有了 opening tag、closing tag、element、nesting element 和 void element 的知識後，我們一起來看看幾個重要的元素吧！
重要的 Elements
<HTML> Element
是的，第一個重要的 element 就是「HTML element」，它長這樣：<html></html>。HTML element 是所有元素的根元素，也就是說，所有的元素都必須被放在 HTML element 裡面，成為它的內容。如果我們要寫一個新的網頁頁面，一定要寫到 HTML element，並且把所有的元素（除了 HTML element 自己以外）都放進去呢！
<Head> Element
第二個重要的元素是 head element，它長這樣：<head></head>。Head element 的目的是放一些給瀏覽器讀的資料，而不是要用來顯示在頁面上的，例如網頁的作者、網頁的簡述、搜尋網頁的關鍵字、HTML 文件的字元編碼（encoding）、分頁的標題、要引入的 CSS 連結，還有要引入的 JavaScript 等。
<Body> Element
第三個重要的元素是 body element：<body></body>。Body element 的用途是存放網頁的內容，就是要顯示在頁面上的東西啦！例如標題文字、段落文字、動人的圖片、方便的連結和按鈕等等，都是放在這裡的喔！
常用的 Elements
除了上面提到的必要元素以外，這邊再介紹兩個寫網頁幾乎都會用到的元素，分別是<img> element 和<a> element。
<img> Element
首先是<img> element，它的用途是在網頁上插入圖片，使用方式是這樣：
1 | <img src="https://picsum.photos/600/400" alt="An image" /> |
在上面的原始碼裡，我們看到除了 tag 以外，在 tag 名稱和右角括弧>之間，還有其它的描述，它們是 element 的 attributes，中文叫做屬性，它的用途是幫元素做設定，改變元素的行為。以上面的範例來看，<img> element 用了 src attribute 來設定圖片的來源，src attribute 的 value（數值）是一串用來取得圖片的網址「https://picsum.photos/600/400」；<img> element 還使用了 alt attribute，用來指定當 src 設定的圖片沒辦法取得時，要顯示什麼替代文字。下面是圖片沒辦法取得時的範例畫面：
有了<img> element 之後，就可以在網頁上插入美麗動人的圖片啦！有句話叫做「一畫勝千言（A picture is worth a thousand words）」，快好好得使用圖片，來幫網頁加分吧！
<a> Element
<a> element 的用途是在網頁裡插入超連結（hyperlink），下面是使用方式：
1 | <a href="https://picsum.photos/">Lorem Picsum</a> |
<a> element 的內容，是超連結要顯示的文字，以上面的範例來說是 Lorem Picsum，這是在瀏覽器上顯示的樣子：
而<a> element 也有一個必要的 attribute，叫做 href，它的用途是設定超連結的目標位置，換句話說就是點擊連結之後，要連到哪個網頁啦！以上面的範例來說，是把連結設定成 https://picsum.photos/，這樣當使用者點擊網頁上的 Lorem Picsum 連結之後，就會跳到 Lorem Picsum 的首頁啦！多使用和網頁內容相關的高品質連結，或是連結的網站很有權威性，都可以讓搜尋引擎更喜歡搜尋到你的網頁呢！
上面是對常用的<img>和<a> elements 的介紹。這裡是所有 HTML elements 的清單和每個 element 的說明，如果有需要，考慮把它們加到書籤裡面吧！
Global Attributes
怎麼會在這裡跳一個 global attributes 的介紹呢？因為我實在不知道要放哪裡。
我們在前面看到了很多的 attributes，它們都是特定元素才會有的。實際上，有一些 attributes 是不管任何元素都有的呢！它們叫做 global attributes，我們一起來看看幾乎是最常用的2種，它們分別是 id和class：
id Attribute
id attribute 的用途是設定一個唯一的名稱給一個元素。id attribute 的 value，也就是一個識別名稱，在一個頁面裡只能出現一次。下面是使用 id attribute 的範例：
1 | <h1 id="title">Welcome to Global Attributes Playground</h1> |
在這個範例裡，<h1> element 是被加上一個 title 的 id。為什麼要幫 HTML elements 加上 id attributes 呢？其中一個目的是讓網頁被載入後，可以直接捲動到指定的 element 呢！舉例來說，如果想把這篇文章的 id Attributes 章節分享給其他人，可以在這個網頁的網址最後面直接加上「#id-Attribute」，變成 https://john29917958.github.io/2024/05/18/HTML-Element#id-Attribute 之後，再把整串網址分享出去。當有人打開這個連結，就會直接跳到 id Attributes 章節，完全不需要捲動頁面呢！非常的方便。
被加到網址尾端的「#id-Attribute」是一個 anchor，中文叫做錨點，就像是網頁裡面的定位器一樣，可以直接把我們帶到目標的 element。在 anchor 的#後面是 fragment identifier，以這個範例來看是「id-Attribute」。那 anchor 是怎麼和要跳過去的 element 做連結呢？其實#id-Attribute 的 fragment identifier「id-Attribute」就是 id 屬性的值啦！也就是說 id Attribute 標題元素的 id 屬性值就是 id-Attribute 囉！
這就是 id attribute 的其中一個用途啦！其它的用途還有讓 CSS 或 JavaScript 透過 id 來選擇元素，然後再對選中的元素做裝飾或是加上效果。總之，id attribute 就是用來辨識出唯一的元素啦！
class Attribute
class attribute 的用途是幫 element 加上一到多個類別，下面是一個範例：
1 | <p class="red-text">A line of red text.</p> |
Class attribute 和設定唯一的識別名稱的 id attribute 不一樣，一個 class 名稱可以出現在多個 elements 裡面。例如在上面的範例裡，red-text class 就出現在3個 elements 裡面。那 class attribute 的用途又是什麼呢？它最大的用途也是讓 CSS 或 JavaScript 透過 class 來選擇 HTML elements。和 id attribute 不一樣的是，我們通常會幫一組可以重複使用的樣式，或是可以應用到多個 HTML elements 的 JavaScript 程式碼定義一個 class，讓這個 class 可以被一次套用到多個 HTML elements。這樣以後 class 的風格要改，只要改一個 CSS rule 就可以了；那如果 class 的 JavaScript 程式碼要改呢？也只要改一部分的程式碼就好，不需要把每個有套用到 class 的元素全都改一次，而且只要 CSS 或 JavaScript 一改完，所有套用這個 class 的 HTML elements 就都生效了呢！非常的有效率。
以上就是今天對 HTML element 的基本介紹啦！現在就用 HTML 來寫網頁吧！