HTML 標籤 (Tag)

一份 HTML 文件 (HTML document) 是由一堆標籤 (tag) 結構所組成，所謂的標籤是一個個用尖括弧 <tagname>...</tagname> 包圍住的 HTML 元素 (HTML element)，不同的 HTML 標籤包圍著表示不同語意 (semantic) 內容的區塊，而瀏覽器 (web browser) 懂得如何解讀 HTML 標籤來呈現最終的網頁畫面。

HTML 標籤僅用來表達 HTML 文件的結構和區分不同的內容語意，標籤本身不會被顯示在頁面上喔。

HTML 文件本質上只是純文字檔案，一份 HTML 文件會長得像這樣子：

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
  </head>
  <body>
    <h1>這是一級標題</h1>
    <p>這是一個段落</p>
  </body>
</html>

從上面 HTML 文件可以發現，每一個 HTML 標籤包圍的內容中，可以再包含其他的 HTML 標籤，所以說 HTML 文件的結構是屬於一種階層樹狀 (巢狀) 的結構：

         +-------+
         | html  |
         +---+---+
             |
    +--------+------+
    |               |
 +--+---+        +---+--+
 | head |        | body |
 +--+---+        +---+--+
    |                |    
+---+---+       +----+----+
| title |       |         |
+-------+   +---+--+   +--+--+
            |  h1  |   |  p  |
            +---+--+   +--+--+
                |         |
              text      text

其中 DOCTYPE, <html>, <head>, <body> 是每份 HTML 文件中都會用到的標籤。

HTML 元素 (Element)

我們用不同的 HTML 標籤來描述一個網頁裡面不同的區塊中的內容及語意，例如描述一段文字、一個標題、一張圖片、一部影片或一個超連結等。

例如下面這段文字：

My cat is very cute.

如果我們想讓它自成一個段落，那麼可以在它前後分別加上段落標籤 ，它就變成一個段落元素 (HTML paragraph element) 了：

<p>My cat is very cute.</p>

我們再繼續來說明清楚「標籤」、「內容」和「元素」這幾個名詞實際上分別是指什麼？

標籤 (Tag)：

完整的標籤包含：

起始標籤 (opening tag)：也就是一對尖括弧 < > 裡面再放入元素名稱，如上面例子的名稱 p 表示段落元素 ，起始標籤代表這個 HTML 元素從這裡開始。
結束標籤 (closing tag)：與起始標籤寫法一樣，只是在元素名稱前面多了個斜線 /，結束標籤代表這個 HTML 元素的尾端，如上面例子的  表示段落元素的結尾。

內容 (Content)：

標籤中間包圍的就是這個元素的內容，以上面的例子來說，內容就是 My cat is very cute. 這一句文字。

元素 (Element)：

起始標籤 + 內容 + 結束標籤所組成的區塊我們稱之為一個 HTML 元素，My cat is very cute. 這一整串就表示一個 HTML 段落元素。

巢狀元素 (Nesting Element)

前面有提到 HTML 文件結構是一種巢狀結構，而 HTML 元素裡面可以放進其他的 HTML 元素，我們稱之為巢狀元素 (nesting element)。

例如下面這個句子：

<p>My cat is very cute.</p>

如果我們想 "強調" very cute，我們可以把 very cute 這幾個字加上強調的 strong 標籤 (在瀏覽器中會被顯示為粗體字)：

<p>My cat is <strong>very cute.</strong></p>

在瀏覽器中呈現的結果如下：

My cat is very cute.

要特別注意，巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以互相錯置。例如下面的寫法是錯誤的：

<p>My cat is <strong>very cute.</p></strong>

因為 strong 標籤是被用在 p 元素的內容中，所以整個 strong 元素包含它的起始和結束標籤，都必須「被包」在 p 標籤裡面，才能形成一個正確的巢狀關係。

空元素 (Empty Element / Void Element)

有些 HTML 元素是不允許有內容的，我們稱之為空元素。

此外，空元素是沒有結束標籤的元素，像是圖片元素 <img>，例如我們可以用 img 標籤來顯示一張圖片：

<img src="/images/myphoto.png">

我們用 img 標籤的 src 屬性來指定圖檔的所在位址，但 img 元素本身沒有結束標籤，也沒有裡面的內容，因為圖片元素是直接把圖檔嵌在 HTML 網頁上。

有時候我們也稱空元素的標籤為自閉合標籤 (Self-closing Tag)。

HTML 標籤屬性 (Attribute)

HTML 標籤中還有所謂的屬性 (Attribute)，屬性是用來提供該標籤的額外資訊，屬性出現在起始標籤中，語法如下：

<tag attribute1="value2" attribute2="value2">

一個屬性是由屬性名稱、等號以及用雙引號包住的屬性值所組成，不同的屬性則是用空格分隔開。

像是前面提到的例子 <img src="/images/myphoto.png">，其中 src 就是 img 的屬性。

其實，屬性值你可以用雙引號 (double quotes "") 也可以用單引號 (single quotes '') 來包住，單雙引號對 HTML 屬性值是沒有差別的。這特性也可以被利用在如果屬性值中有引號，例如 <option value=""abc"> 這樣寫會造成瀏覽器解讀錯誤，誤將 value 當作是空的，但你可以改成這樣 <option value='"abc'> 寫就不會錯了。

HTML 英文字大小寫有差別嗎？

HTML 的「標籤名稱」或「屬性名稱」的寫法是英文大小寫都可以 (case insensitive)，但常見且建議是固定使用小寫 (lowercase)。

推薦的標準寫法 <img src="123">

不推薦這種寫法 <IMG SRC="123">

HTML 標籤可以換行嗎？

標籤名稱、屬性名稱和屬性質之間的多餘空白或換行會被瀏覽器忽略，你可以用這個特性來做 HTML code 的編排，讓 HTML 程式碼比較容易閱讀。

例如：

<tag
  attribute1="value2"
  attribute2 = "value2"
>

和下面這樣子寫是一樣的：

<tag attribute1="value2" attribute2="value2">

但注意雙引號間的屬性值不能亂空白，標籤名稱或屬性名稱之間也不能亂空白，像下面這個就是錯誤的語法：

<t ag attribute1="val ue2" attr ibute2="value2">