HTML 元素的組成：標籤、屬性、內容與巢狀元素
寫 HTML 就是在寫一個又一個的 元素。每個元素由 標籤 與 屬性 組成，理解它們的組成規則，後面所有的 HTML 標籤 都是同一套寫法的變化而已。標籤有起始與結束，屬性寫在起始標籤裡，巢狀使用時也不能交錯。
標籤
- 起始標籤（Opening tag）：先打角括弧，也就是大於、小於的符號
<、>，裡面再放入元素名稱，如下圖所示：<p>。（起始標籤代表這個元素從這裡開始） - 結束標籤（Closing tag）：與起始標籤一樣，只是在元素名稱前面多了個前置斜線
/，也就是</p>。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。（在寫 HTML 時，很容易忘了最後的結束標籤，提醒大家要多注意唷！） - 內容（Content）：這個元素的內容，以上面的例子來說，內容就是這句文字。
- 元素（Element）：由起始標籤、結束標籤、內容所組成。
空元素：沒有內容的標籤
有一類元素本身不包內容，只有一個標籤，稱為 空元素（Void element），不需要也不能寫結束標籤：
<img src="./cat.jpg" alt="一隻貓">
<br>
<input type="text" name="account">常見的空元素有 圖片 <img>、換行 <br>、表單欄位 <input> 與 <meta> 等。
屬性（Attribute）
屬性 用來補充說明這個元素的額外資訊，寫在起始標籤裡：
- 在元素名稱和屬性之間有一個空格。（如果有多個屬性，屬性之間也需要有空格）
- 屬性名稱後面接著等於符號
=。 - 等於符號後面接續一組雙引號
""。 - 在雙引號中輸入所需的屬性值。
- 屬性包在起始標籤裡面，如下圖所示。
常見的屬性像是連結的 href、圖片的 src 與 alt、給 CSS 選取用的 class 與 id：
<a href="https://docs.incode.tw" target="_blank" rel="noopener">前端文件</a>
<img src="./logo.png" alt="網站標誌" width="120" height="40">
<p id="intro" class="text lead">Hello</p>小提醒
屬性值的雙引號在某些情況下雖可省略，但建議一律加上。屬性值若含有空白、角括號或等號，少了引號就會被解析錯誤。
巢狀元素
前篇有介紹到 HTML 是一種階層式的樹狀結構。因此，我們將某個元素放進另一個元素中，這樣的呈現結果就叫做 巢狀元素。
<p>Hello <em>HTML</em>!</p>小提醒
巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以交錯包覆。
<!-- ✅ 正確：先進後出 -->
<p>Hello <em>HTML</em>!</p>
<!-- ❌ 錯誤：交錯包覆 -->
<p>Hello <em>HTML</p></em>交錯包覆時，瀏覽器會自行修正結構，最後產生的 DOM 樹往往跟你想的不一樣，CSS 選取與 JavaScript 操作也會跟著出錯。完整的文件層級可參考 HTML 文件架構。
HTML 自訂屬性
從 HTML5 開始，就開放了自訂義屬性，這麼做的目的是去綁定 DOM 與資料以及驗證資料。語法是 data-*，把 * 代換成自訂屬性名稱跟值，例如：data-name="Away"、data-num="0"。
<p data-name="Away" data-num="0">Hello</p>在 JavaScript 端可以透過 dataset 讀取，屬性名稱會自動轉成小駝峰：
const p = document.querySelector('p');
p.dataset.name; // "Away"
p.dataset.num; // "0"（永遠是字串）HTML 英文字大小寫有差別嗎？
其實都可以，但建議以全部小寫為主較容易識別，不要大、小寫參雜在一起。若自訂屬性是由兩個單字所組成，請以 - 進行區隔。如下:
<p data-num="2">Hello</p>HTML 標籤可以換行嗎？
屬性與屬性之間，多餘的空白會被瀏覽器忽略，因此，可依此特性來換行增進 HTML 的可解讀性與可維護性。
<img
src="./images/anatomy-of-an-element.png"
width="500"
height="200"
alt="HTML 的組成"
title="HTML 的組成"
class="img img-resp"
data-type="img"
>常見問題
元素與標籤有什麼不同？
標籤是 <p>、</p> 這樣的角括號記號；元素則是起始標籤、內容與結束標籤合起來的整體。也就是說，標籤只是元素的其中一部分。
所有 HTML 元素都需要結束標籤嗎？
不是。像 <img>、<br>、<input>、<meta> 這類 空元素 本身沒有內容，只有一個標籤，不需要也不能寫結束標籤。
屬性值一定要加引號嗎？
HTML 規格允許某些情況省略，但強烈建議一律加上雙引號。屬性值若含有空白、角括號或等號，沒加引號就會被解析錯誤，加引號可以避免這類難以察覺的問題。
巢狀標籤可以交錯包覆嗎？
不可以。標籤必須像括號一樣先進後出。若交錯包覆，瀏覽器會自行修正結構，產生與預期不同的 DOM 樹。
data-* 自訂屬性怎麼用？
把 * 換成自訂名稱即可，例如：data-name="Away"。名稱請全部小寫、以連字號分隔，JavaScript 端可透過 element.dataset 讀取，data-user-id 會對應到 dataset.userId。
HTML 標籤名稱要用大寫還是小寫？
HTML 不分大小寫，兩種都能運作，但慣例是一律小寫，較容易識別也比較好維護。屬性名稱同樣建議全小寫。
