超文本標記語言 (或稱 HTML) 是一種標準標記語言，用於描述網路上的文件結構。HTML 包含一系列元素和屬性，用於標記文件的所有元件，以有意義的方式建構文件。
HTML 文件基本上是包含 HTML 元素和文字節點的節點樹狀結構。HTML 元素提供文件的語意和格式，包括建立段落、清單和表格，以及嵌入圖片和表單控制項。每個元素都可以指定多個屬性。許多元素可包含內容，包括其他元素和文字。其他元素為空白，其中含有定義其函式的標記和屬性。
元素分為數個類別，包括中繼資料、區段、文字、內嵌語意、表單、互動式、媒體、元件和指令碼。本系列文章會介紹其中大部分的內容。首先，什麼是元素？
元素
HTML 包含一系列元素，可用來納入或包裝內容的不同部分，以顯示或以特定方式執行內容。HTML 元素會以角括號 (< 和 >) 分隔，
我們的網頁標題是標題、層級一，使用 <h1> 標記。實際標題「機器學習研討會」是我們元素的內容。內容介於開放式標記和結尾標記之間。開頭標記、結尾標記和內容這整個元素都是元素，
結尾標記與起始標記相同，後面加上斜線。
元素和標記並非完全相同，但許多人會交替使用這些字詞。標記名稱就是括號中的內容。代碼包含括號。在這種情況下，<h1>。「元素」是開頭和結尾標記，以及這些標記之間的所有內容，包括巢狀元素。
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
這個段落元素含有其他巢狀元素。為元素建立巢狀結構時，請務必為元素建立適當的巢狀結構。HTML 標記應與開啟順序相反。在上述範例中，請留意 <em> 在開頭和結尾標記中的開啟和關閉情況，<strong> 則在 <p> 標記內開啟和關閉。<strong>
瀏覽器不會顯示標記。這些標記可用來解讀網頁內容。
HTML 有很大的功用例如，如果我們省略了 </li> 結尾標記，就會隱含結尾標記。
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
雖然不關閉 <li> 是有效的做法，但我們不建議這麼做。</ul> 為必要項目。如果省略未排序清單的結束標記，瀏覽器會嘗試判斷清單和清單項目結束的位置，但您可能會不同意這項決定。
每個元素的規格會列出結尾標記是否為必要標記。規格中的「這兩個標記都不可能」表示需要同時使用開頭標記和結束標記。規格提供了所有必要的結尾標記清單。
如果上述範例中的 <em> 或 <strong> 並未關閉，瀏覽器可能會為您關閉元素。如果不關閉 <em>，就會導致內容呈現的方式可能與預期不同。如果省略 </ul>，且下一個標記是清單父項容器的結束標記，您仍然幸運。另一方面，如果這是 <h1> 開頭標記，瀏覽器會假設該標頭是清單的一部分，包括沿用樣式。有些省略的結尾標記會造成較大型的問題：不會關閉部分標記 (例如 <script>、<style>、<template>、<textarea> 和 <title>) 會中斷後續內容，如以下範例所示。
即使某些內容無意間採用斜體，或是未縮排，也不會對您的業務造成負面影響。大部分的內容在 200x300 的文字區域中似乎沒有設定樣式，因為您忘記加上 </textarea> 或完全不顯示，因為您忘記關閉 </style>，會導致網站無法使用。
在某些情況下，即使標記裡沒有標記，瀏覽器也會加入元素。由於元素可以隱含，因此即使標記不存在，元素也可以存在。瀏覽器會在您的內容周圍加上 <body></body>，然後在表格列周圍加上 <tbody></tbody>，就算您沒有加入也一樣。也就是說，雖然可以省略標記，但不要。此外，如先前所述，請確認這些產品的巢狀結構正確無誤。未來您身為標記的維護者，以及所有使用程式碼集的人員，都會感謝您。
元素分為兩種類型：已取代和非取代。
未替換的元素
前一節標記的段落、標題和清單均未取代，未取代的元素會以開頭和 (有時是選用) 的結尾標記括住，可以加入文字和其他標記做為子元素。這些外圍標記可將詞組或圖片變成超連結、將句子轉換成標題、強調字詞等等。
已取代和 void 元素
被取代的元素會由物件取代，對於大多數表單控制項來說，就是圖形使用者介面 (UI) 小工具，而在大多數圖片中則為光柵或可擴充的圖片檔案。以物件取代，每個物件都具備預設外觀。視物件的類型和瀏覽器而定，適用的樣式會受到限制。舉例來說，大多數瀏覽器都會啟用 UI 小工具和相關虛擬元素的有限樣式。針對光柵圖片、高度、寬度、裁剪和篩選功能，都可以透過 CSS 輕鬆完成，除此之外，另一方面，如果使用以 HTML 為基礎的 XML 標記語言，則可完全可擴充向量圖形 (除非包含光柵圖片)。更可自由調整樣式。請注意，對於連結至嵌入 HTML 檔案的 CSS 內嵌 SVG，能否設定其樣式，取決於 SVG 的設定方式。
在這個範例中，<img> 和 <input> 這兩個被取代的元素會分別替換為非文字內容：圖片和圖形使用者介面物件。
<input type="range">
<img src="switch.svg" alt="light switch">
上述 HTML 的輸出內容：
被取代的元素和 void 元素通常會混淆。Void 元素都是自我關閉元素，會以單一標記表示。這表示 void 元素沒有這種結束標記。您也可以選擇在標記結尾加上斜線，許多使用者發現標記可讓標記更容易閱讀。延續本例，我們使用斜線自行關閉標記：
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
結尾的斜線代表了老學校，這是一種表示元素為自我關閉狀態的方式，而且不會出現任何對應的結尾或結尾標記。
Void 元素不能包含文字內容或巢狀元素。Void 元素包括 <br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<source>、<track> 和 <wbr> 等。
多數替換的元素為無效元素，但並非全部。video、picture、object 和 iframe 元素已取代，但並非空白。而且都能包含其他元素或文字，因此全都具有結尾標記。
我們替換了大部分的 void 元素，但同樣並非全部，正如 base、link、param 和 meta 所示。為什麼 void 元素沒有任何內容、未取代且沒有將任何內容轉譯在螢幕上？提供內容的相關資訊！相關資訊是由元素的屬性所提供。
屬性
您可能已經注意到，<img> 和 <input> 範例不僅只是開頭標記中的元素類型，這些額外位元的名稱/值組合 (有時包含值) 稱為「屬性」。HTML 能發揮非常強大的效能，本系列文章會說明數百種屬性和屬性值，但本文會說明這些設定的一般概念，並說明如何加入這些值。
屬性可提供元素的相關資訊。這項屬性和開頭標記一樣，不會顯示在內容中，但能協助定義內容要如何呈現給視力或失明 (輔助技術和搜尋引擎) 的使用者。
屬性只會顯示在起始標記中，開頭標記一律以元素類型為開頭。類型後面可以加上零或多個屬性，並以一或多個空格分隔。大多數屬性名稱後面都會接上等號，並以屬性值括住，並以左右引號和右引號括住。
在這個範例中，我們有一個包含兩個屬性的錨定連結。這兩個屬性已將內容「Registration」轉換為內部錨點連結，當使用者透過鍵盤或其他裝置點選、輕觸或啟用連結時，會在目前瀏覽器分頁中捲動至屬性 id="register"。
屬性可定義元素的行為、連結和功能。我們將在本系列的「屬性」部分中探討更多屬性。請注意，部分屬性目前是全域性質，也就是說，這些屬性可以出現在任何元素的起始標記中。有些元素只適用於多個元素，但並非全部。其他元素則因特定元素而異，只與單一元素相關。
大多數屬性為名稱/值組合，布林值屬性 (值為 true、false 或與屬性名稱相同) 可以單純加入，因為這個值不需要。
<img src="switch.svg" alt="light switch" ismap />
這張圖片有三個屬性：src、alt 和 ismap。src 屬性是用來提供 SVG 圖片素材資源的位置。alt 屬性會提供描述圖片內容的替代文字。ismap 屬性為布林值，且不需要值。這只是說明什麼是屬性。我們會在圖片一節中進一步說明這些屬性。
雖然引用屬性並非強制性，但有時為必要。如果屬性值含有空格或特殊字元，就必須使用引號。因此，建議您一律加上引號。屬性之間如果僅使用引號括住屬性值，雖然並非必要項目，但為了安全起見，建議使用引號和空格。
HTML 沒有區分大小寫，但有些屬性值可以使用。規格中定義的值不區分大小寫。未定義為關鍵字的字串通常區分大小寫，包括 id 和 class 值。
請注意，在 HTML 中，如果屬性值區分大小寫，那麼在 CSS 和 JavaScript 中做為屬性選取器的一部分使用時，這個值會區分大小寫。
為了讓標記更容易閱讀，我們建議您 (但非強制) 使用小寫英文字母標記 HTML 標記中的所有元素名稱和屬性名稱，並用引號括住所有屬性值。如果你聽到「XHTML 樣式標記」一詞，那麼這和結束有斜線的自動關閉元素就代表意義。
元素外觀
語意元素的預設外觀是由使用者代理程式樣式表設定。為了達到這個目的，多數瀏覽器會使用實際的樣式表，有些則會在程式碼中模擬。最終結果相同。雖然某些使用者代理程式樣式表的限制是由 HTML 規格所設定，但瀏覽器存在許多緯度，這表示瀏覽器之間存在一些差異。
由於標記具有語意含義，因此您選擇的元素和標記應該適用於您顯示的內容。元素的語意 (或稱 role) 對輔助技術以及在某些情況下為搜尋引擎相當重要。HTML 的作用是建立內容結構，而非定義內容的外觀。外觀是指 CSS 的運作範圍。雖然許多會修改內容外觀的元素 (例如 <h1>、<strong> 和 <em>) 都有語意含義，但外觀可以且一般都會因作者樣式而變更。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
元素、屬性和 JavaScript
Document 物件模型 (DOM) 是 HTML 文件結構和內容的資料表示法，瀏覽器剖析 HTML 時，會為每個元素和文字區段建立 JavaScript 物件。這些物件稱為「節點」，分別是元素節點和文字節點。
這裡有可定義每個 HTML 元素功能的介面。HTML DOM API 可讓您透過 DOM 存取及控制每個 HTML 元素，為 HTML 元素以及繼承自該元素的所有 HTML 類別提供介面。HTMLElement 介面代表 HTML 元素及其所有子系節點。所有其他元素都會透過繼承自該元素的介面實作該元素。每個繼承介面都有一個建構函式、方法和屬性。您可以透過沿用的 HTMLElement 屬性，存取所有全域屬性以及 input、pointer、transition 和 animation 事件。您可以透過個別元素的子類型 (例如 HTMLAnchorElement 和 HTMLImageElement)，存取元素專屬的屬性值和方法。
隨堂測驗
測驗您對 HTML 的瞭解程度
HTML 元素可用於設定樣式。
選取替換的元素。
<img><p><ul><input>請選取所有正確的敘述。