接下來這篇文章會從 HTML 的歷史背景開始，介紹 HTML 1.0 與 2.0 版本的歷史背景、語法結構（但在實做上是用 HTML 5 的語法）等。對於我曾是剛入門的學習者，在了解這段歷史之後，才有更全面性理解目前網頁開發的背景架構。而在 HTML 中，我們首先要討論「標籤」和「屬性」，這兩個是組成網頁結構和內容的核心部份。
< > 內填入標籤名稱。每個標籤代表一種 HTML 元素，這些元素用來排定的結構或內容，例如段落、標題、圖片等。attribute="value"。HTML 1.0 是由 Tim Berners-Lee 在 1991 年發明的，但當時還是一個內部工具，用於幫助 CERN 的研究人員共享研究資料。那時候，這個新技術並沒有很快得到全球的關注。事實上，HTML 的最初設計並不是為了要做任何商業用途，也不是為了發展出像今天這樣的工具，而是一個簡單的、基於 SGML（Standard Generalized Markup Language）衍生出的標記語言，主要目的是為了方便在網路之間分享文件、或是透過超連結快速跳轉到其他文件。與其說它是一種技術創新，倒不如說它是一種解決問題的簡單工具，第一個網頁瀏覽器、網頁伺服器、以及第一個網站，就這樣誕生於一個高度學術性的環境。
當時的 HTML 只支援一些簡單的文字標記，如標題 <H1>, <H2>, <H3> …, <H6>、段落 <p>和超連結 <a href = ___ >、圖片功能 <img>。而相比於現在這麼 Fancy 的網頁，我們會說當年的 HTML 網頁都是靜態的，就像一個 PDF 檔案一樣，沒什麼特別的功能，像是 表格、表單、音樂、影片、繪圖等，都是之後的事情了。[1]
<title>Welcome to HTML 1.0
<h1>Welcome to the World Wide We
<p>This is an example of an early HTML 1.0 page.
<p>You can create links like this:
<a href="<http://example.com>">Visit Example
</p>
<img src="image.jpg">
<h2>Here is a Subheading
<p>This web page uses simple text formatting and images.
若你看過 HTML 語法，就會發現這裡沒有結尾標籤，這是因為當年的 HTML 1.0 也沒有像現在有結尾標籤，這是到 HTML 2.0 才發展出來的了。
在 1993 年，Mosaic 瀏覽器的誕生就改變了這一切。Mosaic 是第一款圖形化瀏覽器，這在當時對只支援文字的世界來說，讓網頁設計的表現力大幅提升。在 Mosaic 之前，網頁基本上只是一種超文本格式（你可以想像成是今天的純文字文件），而 Mosaic 的出現就吸引了大量的開發者踏入這個領域，這直接加速網際網路的普及率，也讓 HTML 從一個學術工具轉變成全球網際網路的基礎語言。有趣的是，當 Mosaic 瀏覽器開始流行的當時，HTML 還處於一個「非標準化」的階段，所以開發者經常自己手癢添加「標籤」來增加網頁的功能。這就直接導致了在當年不同的瀏覽器之間存在很多兼容性的問題。
隨著 1990 年代早期網際網路的逐漸普及，特別是 Mosaic 瀏覽器在 1993 年的問世，讓網頁上能夠綜合呈現文字段落和圖像的，使得網頁開發逐漸成為一個新的領域，因此開發人員開始要求更多的控制和功能，讓網站的表現和互動功能可以更多元。隨即 IETF（Internet Engineering Task Force）在 1995 年 11 月即正式發布 HTML 2.0 版本，做為 HTML 的第一個標準化版本。
HTML 2.0 最大的技術突破之一，就是引入了表單 <FORM> 的元素，這讓使用者 User 可以在瀏覽器上，透過表單（或稱表單）與伺服器 Server 進行資料交換。
而你可能也會好奇表單跟表格差異在哪裡，簡單來說：
而有關交換的方式，會在後續的系列文章中提及。表單的設計背後是一個簡單的願景：讓網際網路可以是一個具有互動性的資訊展示平台。這是 Web 1.0 走向 Web 2.0 的一個重要里程碑，為後來的網路應用（如電子郵件、網上購物、銀行業務）提供了最基礎的元素與架構。
而在語法上，HTML 2.0 引入了前代後續版本中保留的通用結構。總體 <HTML> 元素的定義有兩個主要元件，分別是 <HEAD> 和 <BODY> 。 [2]
<HEAD> 是在網頁完成載入之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題（<Title>）等，是告訴讓搜尋引擎如何基於頁面的基本資訊來理解這個頁面。<body> 則是作為裝入網頁所有顯示內容的「容器」，使用者存取網頁所看到的內容，包含 文字段落、圖片、表單、網址連結、以及其他多媒體的元素等，所看到的一切內容皆是在 <BODY> 中進行定義的。這是一個 HTML 2.0 程式碼的範例，你會發現所有的元素都會被兩個標籤夾住，分別為開始標籤 <tag> 和結束標籤 </tag>。例如，段落標籤 <P> 開始一個段落，而 </P> 結束這個段落。這種結構化的標籤格式能清晰地定義每個 HTML 元素的起始與終止位置。
這個規範是在 HTML 2.0 中被加入的，隨著網頁的元素越來越多，便需要透過相對嚴謹的規範使得文字、多媒體檔案、表單等，都是可以被瀏覽器正確解析的。尤其是在早期網頁開發環境中，不像現在功能這樣的完善，因此這些規範就是讓不同瀏覽器之間，都能有較為一致的編排。此外，這種設計也讓開發者在日後編輯或擴展網頁內容時，能夠快速解析整體網頁編排的架構。
參照原 W3C 歷史文件中 [5]，可以發現有幾個標籤在現代 HTML 規範中已經被廢棄（Deprecated）或者不被建議使用，因此以下僅就目前仍在使用的部份進行介紹：
參考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Document Structure（文件結構）
<-- <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5 Example Page">
<title>HTML5 Example</title>
<base href="<https://example.com/>">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to the HTML5 Example Page</h1>
<p>This is the main content of the page.</p>
</body>
</html>
<!DOCTYPE>：用來宣告文件的類型，以及 HTML 所使用的版本。一般沒特別標記都是最新板的 HTML5。而你會注意到 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 的宣告，這已經過時，現代 HTML5 已經簡化為簡單的 <!DOCTYPE html>。<HTML>：這是最頂層的容器，定義整個 HTML 文件的結構。我們可以在這裡宣告屬性，例如 lang="en" 定義這文件的語言是英文（未特別標記，都是美式英文）。<BODY>：文件的主要內容部分。<HEAD>：這是在 <HTML> 與 <BODY> 之間的資訊，做為 Metadata 的「容器」。 很多人會對於 Metadata 有所疑惑，簡單來說 Metadata 是**「提供有關於其他 Data 的資訊」**，例如：
<META …>：用來定義Meta 數據，比如字符編碼、描述等。<TITLE …>：定義文件的標題，顯示在瀏覽器標題欄中。<BASE …>：設定相對 URL 的基礎 URL。<LINK …>：用於連結外部資源，在 HTML 3.2 後可以連結 CSS 與 JavaScript 檔案。Headings（標題）
<h1>Main Title（H1）</h1>
<h2>Subheading（H2）</h2>
<h3>Section Title（H3）</h3>
<h4>Subsection Title（H4）</h4>
<h5>Smaller Heading（H5）</h5>
<h6>Smallest Heading（H6）</h6>
<H1> ... <H6>：這是各層級的標題，一共分為這六個層級。
<h1> 通常用於網頁的主標題<h2> 到 <h6> 普遍用於次級標題。這些層次的安排對 SEO（搜尋引擎最佳化）至關重要，因為搜尋引擎會優先分析這些標題。同時，這也是無障礙工具（如螢幕閱讀器）用來協助頁面導航的關鍵。
隨著 Google、Yahoo! 和 AltaVista 等搜尋引擎的崛起，搜尋演算法不斷進步，SEO 成為網頁設計的核心。其中最著名的是 Google 的 PageRank 演算法。這個演算法不僅考慮關鍵字數量，還分析網站間的相互連結並賦予權重（整合成線性代數方程式）。因此，網站標題（尤其是 <h1>）和內文結構的最佳化變得至關重要。畢竟，優質的內容才能提高網站能見度，取決於搜尋引擎如何「閱讀」網站的重點內容，而不是單純放一堆罐頭文字。
Block Structuring Elements（塊級結構元素）
在HTML中，有幾個重要的區塊結構元素，這是用來安排跟組織網頁內文架構用的：
<p>This is a paragraph of text.</p>
<pre>
This is preformatted text.
Line breaks and spaces are preserved.
</pre>
<address>
Contact us at：<a href="mailto:site@domain.com">example@domain.com</a>
</address>
<blockquote cite="<https://example.com/source>">
This is a long quote from a source that should be cited properly.
</blockquote>
<p>：一組就代表一個獨立的段落，在預設情況下，瀏覽器會自動在段落的前後添加一些間距，以便區分不同段落。<pre>：這是用於「預格式化文章」的標籤。它的特點是會保留所有的空格和換行符號，因此非常適合用來顯示 程式碼片段 或其他需要精確對齊的內容。<address>：這個標籤通常用於顯示聯絡資訊，比如電子郵件地址或實體郵寄地址。在 <address> 標籤中，常見的做法是使用 mailto: 語法建立可點擊的電子郵件連結。換句話說，當你點擊這樣的連結時，會自動開啟他們的預設電子郵件應用程式（電腦常見的是 Outlook、手機常見的是 Gmail 等），並直接填入指定的電子郵件地址。<blockquote>：這個標籤用於表示較長的引用文字。它的一個重要屬性是 cite，用來提供引用內容的來源 URL。由於 HTML 誕生於學術基礎之下，必然會有使用 cite 屬性的需求，主要對於學術或新聞類型的網頁中，能方便讀者進一步查證原始資料來源，以提高內文的可信度。List Elements（列表元素）
早期的 HTML 列表定義了無序（<ul>）以及有序（<ol>），這些設計初衷，只是為了陳列出一些簡單的數據，並不如現在還有美編與排版。
<ul>, <li>：無序列表。這種列表通常用於不需要特定順序的項目展示，列表項由 <li> 定義。<ol>, <li>：有序列表。這種列表用於需要按照特定順序排列的項目，例如步驟或排名。<dl>, <dt>, <dd>：定義列表。用於表示詞彙及其定義，<dt> 是定義的術語，而 <dd> 是該術語的解釋。這種結構常見於 FAQ（常見問題解答）頁面或詞彙表。<ul>
<li>First item in unordered list</li>
<li>Second item in unordered list</li>
</ul>
<ol>
<li>First item in ordered list</li>
<li>Second item in ordered list</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Phrase Markup（短語標記）
Idiomatic Elements（語法元素）
<cite>：屬於 <blockquote> 之中的標籤，用法相同。<code>：顯示程式語言的區塊，通常會使用等寬字體（如 Consolas）來區分程式碼與普通文章的標籤，到現在這成為了技術文件中與程式設計師交流的核心元素。你在這篇文章中看到的 Code 區塊，就是當年為了展示程式碼的區塊，只是這裡加入了 CSS 的排版，那就是後期的事情了。<em>：用來強調某些內容，這種強調通常以斜體顯示，但其作用是增加語義上的重點。<kbd>：用來表示鍵盤輸入，這對於撰寫技術文件時非常有用，例如告訴用戶按什麼鍵執行某些操作。<samp>：用來顯示系統或程式的輸出，這對於展示示例或錯誤訊息特別有用。<strong>：與 <em> 類似，但它用來強調比 <em> 更重要的內容，通常以粗體顯示。<var>：顯示變量名稱，在技術文件中用來標示程式或數學公式中的變量。<p><cite>HTML5 Specification</cite> is a comprehensive guide to HTML.</p>
<p><code>document.getElementById(）</code> is a common JavaScript method.</p>
<p>This text is <em>emphasized</em> with italics.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
<p>The <samp>output</samp> was successfully generated.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>
<p>The variable name is <var>x</var>.</p>
Typographic Elements（排版元素）
<p><b>This text is bold</b> for emphasis.</p>
<p><i>This text is italicized</i> for emphasis.</p>
<p><a href="<https://www.google.com>">Visit Google Main page</a></p>
<p>Line one<br>Line two</p>
<hr>
<p><img src="<https://flatlogic.com/blog/wp-content/uploads/2021/06/3.5-3.jpeg>" alt="HTML meme"></p>
<b>：用來顯示粗體字。雖然 <b> 標籤在現代 HTML 中被認為是一個單純的「樣式」元素，但習慣上我們會用 <strong> 取代。<i>：用來顯示斜體字，這標籤類似於 <em>，但更多是視覺上的修飾而非語義上的強調。<a>：用於建立超連結。href 屬性用來指定要導向的目標網站或路徑，alt 屬性用來做 href 的標題。<br>：強制換行符號，這用來在不開啟新段落的情況下將文章分為多行。<hr>：插入水平線，通常用來分隔內容或作為視覺分隔符。<img>：用於插入圖像，src 屬性指定圖像的路徑，alt 屬性提供圖像的替代文章，有助於提升可訪問性。Forms（表單）
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="accept">Accept terms:</label>
<input type="checkbox" id="accept" name="accept">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female
<input type="radio" id="others" name="gender" value="others"> LQBTQIA+
<input type="hidden" name="token" value="123456">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<form>
<label for="select-example">Choose an option:</label>
<select id="select-example" name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label for="textarea-example">Your comment:</label>
<textarea id="textarea-example" name="comment"></textarea>
</form>
<form>：用來定義用戶提交資料的表單。action 屬性是指定提交表單數據的 URL，method 屬性則是定義表單資料的提交方式，通常是 GET 或 POST。（這我們在 RESTful API 會再提到）<input>：定義不同輸入類型的表單欄位，我們用 type 屬性來決定輸入的是文字方塊、密碼方塊、單選方塊、複選方塊等。
<input type="text">：最基本的文字方塊。<input type="submit">：提交表單資料到伺服器的主要按鍵。<input type="reset">：清除表單中的輸入資料，恢復到最初的狀態。<input type="checkbox">：複選方塊。<input type="radio">：單選按鈕。<input type="hidden">：這是隱藏欄位，當時主要用於傳輸一些不希望用戶看到，但需要後端處理的資料。<select> 和 <option>：用來建立下拉選單，用戶可以從中選擇一個選項。<textarea>：定義多行文章輸入框，適合用於需要輸入長篇文章的情況。Character Entity Sets（字符實體集）
<p>Use & for < and > characters.</p>
<p>Use © for copyright and ® for registered trademarks.</p>
在 HTML 1.0 和 2.0 時期，網際網路的使用者主要來自西方國家，尤其是英語系的使用者。當時的網頁通常使用 ASCII（American Standard Code for Information Interchange）的編碼，包含 128 個字符，涵蓋了基本的英文字母、數字和標點符號，適合用於單一語言環境。
然而這些符號就包含了 HTML 語法會出現的符號，像是 <（小於 < 符號）和 >（大於 > 符號）這樣的符號在 HTML 中是做為語言的標籤使用的，因此就需要以**字符實體（Character Entities）**的形式出現，以免 HTML 的編譯器誤解這些符號而出現錯誤。
範例中的 & 用於表示 & 符號，而 © 版權符號和 ® 註冊商標符號也是為不會被 HTML 語法干擾，而設計出來的語法。
Hyperlinks（超連結）
（iTHome 似乎不支援 Gif 檔案，不然這要用動畫呈現會比較清楚，就放上截圖囉）
<p><a href="<https://www.facebook.com>">Click here to visit Facebook</a></p>
<p><a href="<https://i.imgflip.com/4e3544.jpg>"><img src="HTML meme.jpg" alt="This is another html meme"></a></p>
<a>：超連結標籤，用來將文章或圖片轉換為可點擊的路徑或網站，href 屬性則是指定該目標路徑或網站。<IMG …>：就是把原本 這樣的 超連結標題連結轉換為圖片形式的超連結。Image Maps（圖像地圖）
可以注意到原本游標上的箭頭變成「點擊」狀態，而我們經常使用網站都知道，這點下去就會直接觸發頁面跳轉了。我的 Linux 截圖似乎無法一起把游標截圖進去，只好用手機翻拍囉～
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="<https://example.com/continent1>" alt="Continent 1">
<area shape="circle" coords="337,300,44" href="<https://example.com/continent2>" alt="Continent 2">
</map>
圖像地圖是當年把靜態網頁轉入動態網頁的里程碑，因為他是當時不透過 CSS 與 JS 輔助就實現「點擊」切換圖片或跳轉頁面的方式，在當年可以說是最夯的視覺互動方式了。例如，你可以放一張世界地圖，當使用者點擊不同的國家時，可以跳轉到對應的國家網站或頁面。在當時，與其讓用戶從 <ol> 以及 <li> 所列出來的國家名稱清單，還不如用 Image Map 來直觀地找到你需要的內容。
<img> 就是圖片的元素，透過 usemap 指定圖片歸類在哪一個圖像地圖。<map> 定義整個圖像地圖<area> 則用來定義每個可點擊區域的形狀（如矩形或圓形）和坐標，並接上相對應的連結。以上內文就是 HTML 2.0 所有保存至今的網頁元素，因為經過這麼多年依然存在，就證明他是最根本也是最核心的元素；而許多棄用的元素，都以排版的標籤有關，這些都逐漸轉移到 CSS 進行統一處理了，我們會在 CSS 篇來聊聊這些內容。下一篇文會從 3.2 版出發，看看能不能讓我直接寫完 HTML 5.3 的內文
iThome鐵人賽
看影片追技術