程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

HTML 4.01 提供給文字一些結構性的標籤 (tag) ，也有單純文字樣式 (style) 的標籤，例如

<h?> - 標題
<em> - 強調
<strong> - 強調
<dfn> - 定義
<code> - 程式碼
<samp> - 簡單文字
<kbd> - 鍵盤符號
<var> - 變數
<cite> - 作品名稱
<abbr> - 英文縮寫
<acronym> - 頭字母縮寫詞 Obsolete
<q> - 行內引用
<sub> - 下標
<sup> - 上標
<ins> - 插入
<del> - 刪除
<tt> - 細小字型 Obsolete
<i> - 斜體字型
<b> - 粗體字型
<big> - 放大字型 Obsolete
<small> - 縮小字型
<strike> - 刪除線 Obsolete
<s> - 刪除線 Obsolete
<u> - 底線 Obsolete
<font> - 字型樣式 Obsolete
<basefont /> - 預設字型樣式 Obsolete

凡是以 Obsolete 附註的，就表示該標籤在 HTML 5 已不再使用，因此我們在設計網頁時，也應該盡量避免使用 Obsolete 的標籤。

舉例如下

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<h1>第一個標題</h1>
<strong>強調標籤</strong>
<h2>第二個標題</h2>
<cite>作品名稱</cite>
<h3>第三個標題</h3>
<q>引用文字</q>
<h4>第四個標題</h4>
<del>刪除</del>
<h5>第五個標題</h5>
<ins>插入</ins>
<h6>第六個標題</h6>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：textexample59.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

利用瀏覽器 (broswer) 開啟，如下

此例中，我們分別在第 6 、 8 、 10 、 12 、 14 、 16 行使用 <h1> 到 <h6> 的標題標籤，將標題文字以不同大小的粗體顯示，以下為第 6 行

6	`<h1>第一個標題</h1>`

<h1> 到 <h6> 都是區塊元素 (block element) ，其他的標籤都是行內元素 (inline elememt) 。

第 7 行的 <strong> 標籤，這與 <b> 的文字樣式效果相同

7	`<strong>強調標籤</strong>`

第 9 行的 <cite> 標籤，這與 <i> 的文字樣式效果相同

9	`<cite>作品名稱</cite>`

第 13 行的 <del> 標籤，這與 <s> 的文字樣式效果相同

13	`<del>刪除</del>`

第 15 行的 <ins> 標籤，這與 <u> 的文字樣式效果相同

15	`<ins>插入</ins>`

HTML 提供的是網頁結構的標記語言，所以使用 HTML 應以網頁結構為軸心，可是早期 CSS 尚未發展完備，所以到 HTML 4.01 的時候， HTML 中仍留有許多屬於文字樣式的標籤。

因此，我們都應該避免使用被 Obsolete 的標籤，樣式的部份就交給 CSS 樣式表 (style sheet) 囉！