接下來這篇文章會從 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 …>
:就是把原本 這樣的 超連結標題連結轉換為圖片形式的超連結。以上內文就是 HTML 2.0 所有保存至今的網頁元素,因為經過這麼多年依然存在,就證明他是最根本也是最核心的元素;而許多棄用的元素,都以排版的標籤有關,這些都逐漸轉移到 CSS 進行統一處理了,我們會在 CSS 篇來聊聊這些內容。下一篇文會從 3.2 版出發,看看能不能讓我直接寫完 HTML 5.3 的內文