什麼是HTML標籤與HTML元素？

這兩個術語之間有區別

像任何行業或職業一樣，網頁設計都有自己的語言。 當你進入這個行業並開始向同行講話時，你無疑會遇到一些對你而言是新鮮的詞彙和短語，但是你的同行網絡專業人員的舌頭流動。 你會聽到兩個術語是HTML“標籤”和“元素”。

當你聽到這兩個術語時，你可能會意識到它們在某種程度上可以互換使用。 因此，許多新的Web專業人員開始使用HTML代碼時遇到的一個問題是“HTML標記和HTML元素之間有什麼區別？”

雖然這兩個術語的含義相似，但它們並不是真正的同義詞。 那麼這兩個術語有什麼相似之處呢？ 簡而言之，標籤和元素都是指用於編寫HTML的標記。 例如，您可能會說您正在使用

標記定義段落或元素來創建鏈接。 許多人可以互換地使用術語標籤和元素，任何與您交談的網頁設計師或開發人員都會理解您的意思，但事實是這兩個術語之間存在細微差別。

HTML是一種標記語言 ，這意味著它是用可以被一個人讀取而不需要首先編譯的代碼編寫的。 換句話說，網頁上的文字是用這些代碼“標記”的，以便為網頁瀏覽器指示如何顯示文本。 這些標記標記本身就是HTML標記。

當你編寫HTML時，你正在編寫HTML標籤。 所有的HTML標籤都由許多特定的部分組成，包括：

• 小於號<
• 確定正在寫入哪個標籤的單詞或字符
• 任何數量的可選HTML屬性 ，其形式為name =“value”對
• 最後一個大於號>

例如，這裡有一些HTML標籤：

這些都是HTML開放標籤，沒有添加任何可選屬性。 這些標籤代表：

• - 定義一個段落。

• - 將頁面定義為HTML
• - 定義一個分區。

以下內容也是HTML標籤：

• 這些示例都包含已添加到開始HTML標記的屬性。

  • 是一個包含ID屬性的無序列表
    • 該部門有一個班級屬性
    • 錨點或鏈接元素包含“href”屬性
    • 帶有“src”屬性的圖片標籤

    對於錨點和圖片標籤，屬性實際上不是可選的，它們對於這些標籤正確顯示是必需的。 您需要告訴鏈接要去哪裡（這是“href”所做的）和圖像顯示內容（這是“src”屬性提供的內容）。

    什麼是HTML元素

    根據W3C HTML規範， 元素是HTML的基本構建塊，通常由兩個標籤組成 ：開始標籤和結束標籤。 到目前為止，我們只看到了開始標籤，它啟動了這些元素。 要結束該元素，請編寫相應的結束標籤。

    例如，對於您編寫的段落元素：

    這是由我們剛才看到的開始標籤以及結束標籤組成的。 關閉標籤實際上只是重複的開始標籤，但在“小於符號”之後直接添加了“正斜杠”。

    幾乎所有的HTML元素都有一個開始標籤和一個結束標籤。 這些標籤圍繞著將顯示在網頁上的文字。 例如，要編寫一段文字，您需要編寫要在頁面上顯示的文字，然後用以下標記圍繞它：

    這是您要編寫想要在網頁上顯示的段落文本的地方。

    一些HTML元素沒有結束標記。 這些被稱為“空元素”。 有時候，他們也被稱為“ 單身 ”或“空白”元素。 空元素很容易使用，因為您只需在網頁中包含一個標籤，瀏覽器就知道該怎麼做。 例如，要為您的頁面添加一個換行符，您可以使用b
    標記。

    僅包含開始標籤的另一個常見元素是“圖像”元素。 例如：

    我們之前看過這個例子，但是這個圖片元素沒有結束標籤。 瀏覽器將簡單地將此代碼替換為“href”屬性中引用的圖像。 在這種情況下，這將是“logo.png”。

    一般來說，當我引用HTML元素或標記時，我將使用術語“元素”來表示我指的是元素的所有部分（開始和結束標記）。 我使用“標籤”是我真的只指一個或另一個。 這是對這兩個術語的恰當使用，我鼓勵你正確地使用它們 - 但只要知道，如果你滑落並交換它們，你仍然可以被新的Web開發同行所理解！

    Jennifer Krynin的原創文章。 17/17/17由Jeremy Girard編輯