在上一篇文章中，提到了 HTML 1.0 演變到 2.0 的歷史，今天這篇會是延續上次的內容，繼續從歷史背景來了解 HTML 語法的演進過程。
In 1997, Dave Raggett introduced a new draft of HTML which was considered the next version. But it’s a controversial topic – some reports declared that there were no official 3.0 updates, rather it was 3.2 exactly after 2.0. The proposal for 3.0 was rejected because of some technical reasons. [1]
上文中的 “some technical reasons” 可以歸類為以下幾種因素：[2]
瀏覽器支援能力不足 [3]
以當時的瀏覽器開發技術，完全不及能支援 HTML 3.0 規格要求的程度。舉例來說，他們定義了一個 <FIG> 標記，要求在網頁空間不夠時可以像現代網頁這樣自由排版。但思考一下，在那 Nokia 3310 還在盛行的年代，那時期的排版演算法發展還是幼稚園階段，對瀏覽器來說要做到 <FIG> 的要求，根本就是天方夜譚。
再者，<MATH> 語法中對於數學公式的標記也是十分複雜，舉例來說，如果我們要用 HTML 3.0 語法寫出微積分第一基本定理 FTC-1（Fundamental Theorem of Calculus - Part I） 的公式：
用 <MATH> 語法要這樣寫：
<MATH>
<INT>
<SUB> a </SUB>
<SUP> b </SUP>
f(x) dx
</INT> = F(b) - F(a)
</MATH>
如果我們用學術界常用的 LaTeX 撰寫就簡單多了
\int_a^b f(x)dx = F(b)-F(a)
因此，其一方面這些語法定義過於複雜，再來就是因為當時瀏覽器的圖像渲染能力，完全不足以組合出這樣的數學公式，更遑論直接在瀏覽器中嵌入同樣耗費電腦 CPU 算力的 LaTeX 了。
除了以上提到的 <FIG> 和 <MATH> 標記，HTML 3.0 還試圖擴展許多新功能，例如對表格進行更精細的控制以及複雜的排版設計，但這些功能完全超出了瀏覽器的能力範圍。當時瀏覽器的開發者普遍希望能保持較為簡單實用的標準，而不是當時那樣複雜化。若以現在事後諸葛的角度來看，當年 HTML 3.0 的提案完全就是超前 10 年的應用阿！根本完全無法實做。
Netscape 與 Internet Explorer 的影響 [4]
當時 Netscape 做為主流瀏覽器開發廠商之一，就推出了許多擴展非標準化的標記語法，例如 <CENTER> 和 <FONT> 標記，這些標記在當年迅速流行，最後還被 HTML 3.2 直接納入為標準語法；而微軟的 Internet Explorer 也不遑多讓，推出很多專屬的語法。而這些瀏覽器專屬的擴展功能直些導致開發者必須在兩者之間做抉擇，所以 W3C 的標準化進程受到阻礙，而且當時等待複雜的 HTML 3.0 正式提案，可以說是遙遙無期呢。
這也是 HTML 3.0 的許多構想最終被推遲，或是被後來的 CSS 取代掉。當時 CSS 直接提供相對於 HTML 還要更精細的樣式控制，開發者基本上都直接放棄直接在 HTML 本身視覺設計，這直接架空了 HTML 3.0 最 Fancy 的功能了。
業界需求的變化與時間延遲 [2]
網路技術在 1990 年代的發展速度極快，但 HTML 3.0 的標準化進展過程可以說是相當緩慢，導致其沒有跟上當時業界快速變化的需求。畢竟從上面可以看出，當時的網頁開發人員所需要的是立即的解決方案，而不是等待一個過於複雜的標準。其實可以說 HTML 3.0 的失敗真的是狠狠教訓了 W3C 在推動標準化過程，畢竟太過於追求技術創新，但完全忽視當時的技術能力，最終下場就是標準無法實現。
所以從 HTML 3.0 的失敗，IETF 和 W3C 就直接簡化了 HTML 3.0 的提案，在 1997 年正式發布了教符合當代需求的 HTML 3.2，這版本直接基於當時 HTML 2.0 的基本結構導入當時開發者急需的功能，像是簡化板版表格以及自由度更高的文字排版；同時刪除了 HTML 3.0 中的部分複雜功能，也就是最被詬病的數學標記語法跟精密表格控制，所以就快速普及了。
在當時 HTML 還沒有與 CSS 完全整合的年代，許多樣式控制都是依賴 HTML 標記來完成的。[5]
註：
Tables（表格）
在 1990 年代末，人們對網頁的要求，不再僅有單純的圖文內容。開發者以及學術網站上開始需要一種方法來呈現結構化的資料，因此 HTML 3.2 版本中就加入 <table> 功能，提供了如 border、cellpadding 和 cellspacing 等屬性，讓開發者可以輕鬆地定義表格邊框和內部間距，從而讓數據呈現變得更清晰易讀。在當時這些屬性是用來幫助開發者控制表格的外觀，特別是在當年還缺乏 CSS 支援的情況下，但現在這些表格的控制參數，就分配給 CSS 了。以下僅列出 HTML 5 的語法：
<table>
<caption>Sample Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
<table>：定義表格的主要標記。<caption>：顯示於表格上方的標題。<th> 和 <td>：分別用於定義表格的標題欄和數據欄。Text Flow around Images（圖像旁的文字流動）
當年為了提升圖片排版的方式，在 HTML 3.2 加入了 align 屬性，開發者就能讓文字環繞圖像（Text Wrapping）排列，對於當時想要將圖文混合呈現的網站設計師來說，可以說是貢獻良多，不再是只能設定 "In-line with Texts” 了。
<img src="image.jpg" alt="Sample Image" class="float-left">
<p>This text will wrap around the image on the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img>：用於插入圖像，src 為圖片路徑，alt 為替代文字，有助於提升可訪問性。Fonts（字體）
1990 年代的網頁設計開始強調視覺風格，在當時是使用 <font> 標記來控制字體的顏色和大小，因此能夠針對特定段落進行文字樣式設計，這時候一些想要強調的重點，就可以直接透過控制文字的呈現方式。雖然現代的網頁原則上都以 CSS 來控制字體，但在當時可以說是相當前衛的技術了。
<p class="text-large-red">This is red text of size 16px.</p>
Form Elements（表單元素）
HTML 3.2 讓網頁變得不僅僅是靜態資訊的展示，而是逐漸具備互動性。透過 <form> 標記，開發者可以讓使用者在網頁上輸入資料，並透過伺服器提交到資料庫內。這一技術成為了 Web App 的基礎，也是現在各大網頁在使用者註冊和資料蒐集等必定使用的方式。
雖然現代 HTML5 已經擴展了更多 <input> 類型，如 email、tel 等，但在 1990 年代，能夠實現這些表單操作已經是一個巨大的進步。
<form action="/submit" method="get">
Name: <input type="text" name="name"><br>
<input type="submit" value="Submit">
</form>
META Tags（Meta標記）
在 HTML 3.2 時期，搜尋引擎如 Yahoo! 和 AltaVista 正開始流行，開發者致力於透過 Meta Data 來提升搜尋引擎的排名。<meta> 標籤中的 keywords、以及 description 屬性就是讓搜尋引擎「理解」網頁的標題與內容，進而影響網頁在搜尋結果中的排名。[8]
<meta name="description" content="This is a sample webpage.">
但相對地，這也直接引發了一些「關鍵字堆積」（keyword stuffing）現象，很多開發者會在 <meta> 標籤中填入大量無關的關鍵字以提高排名，例如一本牛津字典的單字量。然而，隨著 1998 年的 Google PageRank 演算法正式應用在搜尋引擎中，把開發者的注意力轉移到網頁之間的連結方式與結構，這直接削弱了 Meta Data 對 SEO 的影響。簡單來說，PageRank 認為如果某一個網站與其他網站建立關聯，那「某一個網站」理應是符合大眾口味的。[9]
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>
!https://ithelp.ithome.com.tw/upload/images/20240914/20163203Tg7V0n2koH.jpg
圖像地圖是當年把靜態網頁轉入動態網頁的里程碑，因為他是當時不透過 CSS 與 JS 輔助就實現「點擊」切換圖片或跳轉頁面的方式，在當年可以說是最夯的視覺互動方式了。例如，你可以放一張世界地圖，當使用者點擊不同的國家時，可以跳轉到對應的國家網站或頁面。在當時，與其讓用戶從 <ol> 以及 <li> 所列出來的國家名稱清單，還不如用 Image Map 來直觀地找到你需要的內容。
<img> 就是圖片的元素，透過 usemap 指定圖片歸類在哪一個圖像地圖。<map> 定義整個圖像地圖<area> 則用來定義每個可點擊區域的形狀（如矩形或圓形）和坐標，並接上相對應的連結。總結來說，HTML 3.2 是一個重要的過渡版本，但隨著 HTML5 的發展，許多語法已經棄用或不再推薦使用，開發者應使用 CSS 和 JavaScript 來實現現代網頁功能。
在 1997 年，W3C 推出了重大升級版本 HTML 4.0，這是象徵 HTML 邁向現代網頁設計的轉捩點。這個版本的一個重要理念，就是分離了 HTML 結構與 CSS 樣式，這樣的分工使得網頁開發更能適應分工環境、進行模組化，也讓網頁更容易維護。
參照：https://softwareengineering.stackexchange.com/questions/271294/why-is-it-or-was-it-important-to-separate-css-from-html
樣式表的支持
HTML 4.0 開始支援引入 CSS 樣式表，並從 HTML 元素屬性中移除大部分的樣式控制。現代 HTML5 完全依賴 CSS 來管理樣式。
<head>
<link rel="stylesheet" href="styles.css">
</head>
<link>：是將外部樣式表引入 HTML 文章中，藉以實現樣式與內容的分離。新增 id 與 class 屬性
HTML 4.0 引入使用 id 和 class 屬性來定義樣式和操作特定元素。
<p id="intro" class="highlight">This is an introductory article</p
id：唯一標識 HTML 文章中的某個元素，用於 CSS 樣式表或 JavaScript 操作。class：為多個元素分配類別，用於統一樣式。過時的呈現屬性改為 CSS
HTML4 中的樣式元素如 <font> 已被棄用，使用 CSS 來替代。
<p style="color: red; font-size: 20px;">These texts are red with 20px of font size.</p>
style 屬性可以直接在標記內嵌入樣式，亦也可以通過外部樣式表管理樣式。HTML 4.0 中引入了許多語義化的標記（Semantic Elements），例如 <abbr>、<acronym>、<fieldset>，加入這些標記的主要目的在於強化 Yahoo 與 AltaVista 在 SEO 計算的頁面評分，讓搜尋引擎更容易理解網頁的內容結構。同時，HTML 4.0 開始逐漸棄用一些控制樣式的標記，如 <font> 和 <center>都被建議使用 CSS 進行控制，實現內容與樣式的分離。
語義標記
HTML 4.0 引入了更多語義標記來增強內容結構，這些標記可用於更好地描述文章。
<p>HTML 4.0 introduced support for <abbr title="Cascading Style Sheets">CSS</abbr> stylesheets.</p>
<p>Create web pages using <acronym title="HyperText Markup Language">HTML</acronym>.</p>
<abbr>：定義縮寫，使用 title 屬性來描述完整的敘述句。<acronym>：這個標記已在 HTML5 中被棄用，現在都推薦使用 <abbr>。HTML 4.0 對無障礙（Accessibility）設計也做出許多改進。新的 <label> 和 <legend> 能夠讓螢幕閱讀器讀取到頁面中的內容後，將文字轉換成語音，幫助視障者能直接「聽」一個網頁；對於書寫方向不同的語言，也在這次 HTML 文件中改版中得以讓開發者自行設定，讓文字呈現方式可以更符合他們的習慣，例如阿拉伯語系。
表格設定
HTML 4.0 開始強調無障礙設計，這代表開發者需要開始考慮到一些視障者，或是使用閱讀器的使用者。例如：
無障礙性屬性
<img src="image.jpg" alt="This statement is used when the picture can't be shown properly.">
<colgroup>
<col span="1" style="background-color:lightgrey">
</colgroup>
alt：是在圖片無法正常載入時，提供替代（Alternative）文章。<colgroup>：這是直接對一個表格的分組區域進行樣式設計。表格的無障礙設計
<table>
<thead>
<tr>
<th scope="col">名稱</th>
<th scope="col">年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">John</td>
<td>30</td>
</tr>
</tbody>
</table>
scope：用來定義表格標題以及數據之間的關聯，用來幫助螢幕閱讀器在解析表格內容時可以更加準確。而 scope 的值可以是 col 或 row，分別用來標記一個欄位或行的範圍。表單的互動性
HTML 4.0 改進了表單元素，使得用戶交互更加友好。
<form action="/submit" method="post">
<fieldset>
<legend>Please fill the form</legend>
<label for="name">Full name:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail：</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</fieldset>
</form>
<fieldset>：定義表單的範圍，主要在一個欄位中有多個表單時，可以讓結構較為明確。<legend>：分組並敘述有關表單的文字。<label>：標註表單字段，通過 for 屬性與相應的 input 元素的 id 進行配對。當用戶點擊標籤時，相關聯的輸入框會被自動聚焦，有助於一些人使用螢幕閱讀器等輔助設備。<… required>：這是用來標記必填欄位的。如果有空缺，就會無法點擊 Submit 按鈕。加入語系控制
若將上一段 HTML 語法翻譯成阿拉伯文，我們會這樣寫：
<form action="/submit" method="post" lang="ar" dir="rtl">
<fieldset>
<legend>يرجى ملء النموذج</legend>
<label for="name">الاسم الكامل:</label>
<input type="text" id="name" name="name" required>
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email" required>
<button type="submit">إرسال</button>
</fieldset>
</form>
lang="ar"：用來指定該表單的語言為阿拉伯語。dir="rtl"：將表單的書寫方向設定為從右到左，這符合阿拉伯語的書寫習慣。<legend>、<label> 標籤中的文字均能顯示阿拉伯語，讓使用者能夠以自己的母語進行表單的操作。然而，當時的 HTML 4.0 還沒辦法原生支援多媒體檔案，因此開發者通常需要依賴外掛程式來呈現影片和圖片，當時解決方案就是透過 Adobe Flash Player ，這也讓 Flash 成為了 2000 年代初期，遊戲、影片網站和廣告的多媒體設計工具。[10]
嵌入和框架
在 HTML 4.0 中，引入了多種嵌入外部內容的方式，然而，現代的 HTML5 更傾向使用 <iframe> 來替代部分舊有的功能。過去我們通常會透過 <object> 或 <embed> 標籤來嵌入 Flash Player 進行多媒體顯示，如影片和動畫，但如今這些方法已被淘汰。
<object width="600" height="400" data="movie.swf">
<embed src="movie.swf" width="600" height="400">
</embed>
</object>
在這個範例中，Flash 內容（movie.swf）被嵌入在網頁中，使用者就可以直接在網頁上播放 Flash 動畫或影片：而在 HTML5 中，我們更常使用 <iframe> 和 <img> 等標籤來嵌入外部內容或媒體檔案。
<iframe src="<https://example.com>" width="600" height="400" title="Example"></iframe>
<iframe>：嵌入另一個 HTML 文章，你可以從外部網頁嵌入一些多媒體檔案，例如你可以直接嵌入 YouTube 影片到你的文章中。然而 Flash Player 是外掛在瀏覽器上的，當時許多使用者最大的問題就是「不會設定 Adobe Flash Player」、在加上 Flash Player 很吃 RAM 的空間，運氣好只是瀏覽器當機，運氣不好就是 Windows XP 系統跳出來藍色畫面。[11][12] 更慘的是，當時 Flash Player 也經常爆出安全性問題，像是很多駭客可以透過 Flash 檔案直接散播病毒、或是直接彈出惡意廣告，這也是當年 Steve Jobs 公開反對在 iOS 上使用 Flash Player 的原因。[13]
這些缺陷讓業界開始尋找不依賴 Flash 外掛的解決方案，也為後來的 HTML5 發展奠定了基礎，W3C 也開始努力讓網頁能夠原生支援多媒體檔案。
Netscape 公司在 1995 年發明了 JavaScript [14]，讓網頁不再是只有靜態文字與圖片，而是可以根據使用者操作網站得行為進行即時的回應，像是一些觸發事件、動態消息、或者進行即時檢查。例如你點擊「提交」按鈕的時候，系統在即時檢查填寫內容無誤時，就會跳出視窗告訴你「提交成功」。我們會在 JavaScript 的部份多聊這部份。
JS 腳本的觸發事件
假設我們要提交 6. 之中撰寫的表單，我們可以直接使用函數進行引入。我們在 標記裡面設定 onclick 屬性，這屬性是在使用者點擊按鈕，就會觸發指定的 JavaScript 的函數。
<form id="myForm">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required><br>
<button type="button" onclick="validateForm()">提交</button>
</form>
這時候我們就可以寫一組 JavaScript 進行表單驗證：
<script>
function validateForm() {
// Extract the contents from the input box
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
// Examine if the input box is filled
if (name === "" || email === "") {
alert("Please fill all the form");
} else {
alert("Submit successfully！");
}
}
</script>
然而當年 Netscape 和 Internet Explorer 的「瀏覽器戰爭」可以說是打得不可開交。由於 Netscape 所發明的 JavaScript 被 HTML 4.0 支援嵌入讓微軟嗅到了十足的危機，因此微軟很快推出了自己版本的 JavaScript，就是 JScript，並只能在 Internet Explorer 中使用 [15]。這搞得網頁開發者必須要針對不同的瀏覽器進行調整跟測試，開發成本相當高昂。這樣的兼容性問題直到 ECMAScript（JavaScript 的標準）統一規範後才有所改善。[16]
我們也不難看出，HTML 4.0 在針對 CSS 的深度整合，並且開始納入 JavaScript，就徹底改變了網頁開發的方式。隨著越來越多新功能的加入，網頁互動以及開發者間的分工協作開始逐漸成為主流。儘管 HTML 4.0 解決了許多 3.2 的不足與限制，但隨著網際網路持續發展，網頁互動與多媒體檔案的需求與日俱增、以及 Flash 外掛套件都一再地透露出 HTML 4.0 的不足之處。
這樣的局限最終催生出 HTML5，即旨在解決多媒體支援的問題，讓網頁能夠不需經由外掛程式就可以直接更加多元的互動內容。可以看到 HTML5 是真正現代網頁技術的開始，我在接下來會直接討論 HTML 5.0 的功能與語法。
iThome鐵人賽
看影片追技術