HTML - 元素

HTML 元素是建立網頁的基本構建塊；它們藉助開始標籤、內容和結束標籤建立。HTML 文件由這些元素的樹組成，它們指定了如何構建 HTML 文件，以及應該將什麼型別的內容放置在 HTML 文件的各個部分。

什麼是 HTML 元素？

HTML 元素是 HTML 文件的一個基本元件，它可以包含要在網頁上顯示的資料，例如文字、影像、連結，有時甚至什麼也不包含。HTML 元素包括開始標籤、內容和結束標籤，其中開始標籤還可以包含屬性。

HTML 文件由 HTML 元素的樹組成，它們定義了網頁的內容和佈局，例如如何在網頁的不同部分顯示什麼內容。

示例

以下是一些 HTML 元素的示例：

<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>

下表顯示了上述示例中使用的 HTML 元素的不同部分（開始標籤、內容和結束標籤）：

開始標籤	內容	結束標籤
<p>	這是段落內容。	</p>
<h1>	這是標題內容。	</h1>
<div>	這是分割槽內容。	</div>

因此，這裡<p>...</p> 是一個 HTML 元素，<h1>...</h1> 是另一個 HTML 元素。

HTML 元素結構

下圖演示了元素的結構，例如如何使用開始和結束標籤編寫 HTML 元素：

HTML 元素與標籤

HTML 元素是使用 HTML 標籤建立的。HTML 元素由一對開始和結束標籤定義，它們之間包含內容，定義了網頁的內容和結構。而HTML 標籤就像關鍵字，是 HTML 元素的一部分，括在尖括號 (<>) 中。

例如，<p> 是段落的開始標籤，</p> 是同一段落的結束標籤，但<p>這是一個段落</p> 是一個段落元素。

巢狀 HTML 元素

HTML 允許巢狀元素。巢狀元素是透過將一個或多個 HTML 元素放在一個 HTML 元素內部建立的。其中容器元素可以被認為是父元素，其他元素是子元素。子元素巢狀在父元素內部。我們可以有多個巢狀級別；但是，需要遵循一些準則：

每個開始標籤都必須有相應的結束標籤。
父元素的結束標籤必須放在子元素的結束標籤之後。
巢狀元素必須是有效的 HTML 元素。

示例

在下面的示例中，我們將斜體元素 (<i>...</i>) 巢狀在 h1 元素中，並將下劃線元素 (<u>...</u>) 巢狀在段落元素中。

<!DOCTYPE html>
<html>
<head>
   <title>Nested Elements Example</title>
</head>
<body>
   <h1>This is <i>italic</i> heading</h1>
   <p>This is <u>underlined</u> paragraph</p>
</body>
</html>

執行上述示例後，我們可以看到兩句話，我們在其中將一個 HTML 巢狀在另一個 HTML 中。

注意：在上面的示例中，<html>、<head> 和 <body> 標籤也是巢狀元素，因為它們內部包含一個或多個元素。

HTML 空元素

HTML 空元素是不需要結束標籤的元素。這些標籤沒有任何內容模型，甚至不允許巢狀元素。空元素也稱為空元素或自閉合元素。

一些空元素例如 <img />、<hr /> 和 <br /> 元素。下表顯示了空元素的列表：

序號	元素及說明
1	<img /> 用於在 HTML 文件中插入影像。
2	<hr /> 它顯示一條水平線。
3	<br /> 它用於提供換行。
4	<source /> 它用於嵌入媒體資源，如音訊和影片。

示例

以下示例演示了 HTML 空元素的示例：

<!DOCTYPE html>
<html>
<body>
   <p>This line contains a line break tag, <br> hence content is visible in two separate lines.</p>
   <p>This line is <hr>separated by a horizontal rule.</p>
</body>
</html>

執行後，上述程式碼將生成兩個段落，一個帶有換行符，另一個帶有水平線。

HTML 元素中的屬性

可以使用屬性名稱和值對將屬性與開始標籤一起放置。多個屬性可以用空格隔開。

以下語句演示瞭如何在 HTML 元素 img 中使用兩個屬性 src 和 alt：

<img src="logo.jpg" alt="TutorialsPoint Logo" />

必須閉合的 HTML 元素

開啟的 HTML 元素必須閉合。只有 <img />、<hr />、<br /> 等空元素不需要結束標籤；其他元素，例如 <p> 和 <h1>，則需要在內容部分之後新增結束標籤。

如果任何 HTML 元素不包含結束標籤，則可能不會導致錯誤，並且某些內容仍可能正確顯示。但是，切勿遺漏結束標籤，因為它可能導致意外和不一致的結果。

示例

在此示例中，我們從段落標籤中刪除了結束標籤。儘管如此，它仍然會顯示正確的結果。

<!DOCTYPE html>
<html>
<body>
   <p>This line contains a line break tag, <br /> hence content is visible in two separate lines.
   <p>This line is <hr /> separated by a horizontal rule.
</body>
</html>

上述 HTML 程式碼將生成兩個段落，一個帶有換行符，另一個帶有水平線。

HTML 元素區分大小寫嗎？

不，HTML 元素不區分大小寫，這意味著我們可以用大寫或小寫編寫 HTML 元素。但是，這不是一個好習慣，因為 W3C 建議並要求使用小寫。因此，始終嘗試對標籤名稱使用小寫。

示例

在下面的示例中，我們使用大寫和小寫混合的方式（大寫和小寫）編寫 HTML 元素（標籤名稱）；請參見輸出；沒有錯誤，HTML 程式碼執行正常：

<!DOCTYPE html>
<HTml>
<BODY>
   <P>HTML is not case sensitive i.e we can use both upper or, lower case letters in the tags.</p>
</BOdy>
</html>

列印頁面