Web - 第四章 | HTML 文字基礎概念

HTML的主要工作是編輯文本結構和文本內容（也稱為語義semantics），以便瀏覽器能正確的顯示。本文介紹了 HTML的使用方法：在一段文本中添加標題和段落，強調語句，建立列表等等。

標題 與 段落

在大部分的文章中總是會有標題與段落的組成，然後網頁的呈現基本上也是好比寫文章一樣。
這使得閱讀者可以更快速更輕鬆的找到自己想知道了解的部分。

在HTML中，每個段落是通過 <p> 元素標籤進行定義。

1

<p>這段將會是一個段落</p>

而每個標題是通過 <h1> 元素標籤進行定義

1

<h1>這是個文章的標題</h1>

這裡有六個標題元素標籤 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個元素代表文件中不同級別的內容; <h1> 表示主標題（the main heading），<h2> 表示二級子標題（subheadings），<h3> 表示三級子標題（sub-subheadings ），等等。

實施結構層次結構

這裡舉一個例子。在一個故事中，<h1>表示故事的名字，<h2>表示每個章節的標題， <h3>表示每個章節下的子標題，以此類推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<h1>三國演義</h1>

<p>羅貫中</p>

<h2>第一回 宴桃園豪傑三結義 斬黃巾英雄首立功</h2>

<p>話說天下大勢，分久必合，合久必分。週末七國分爭，併入於秦。及秦滅之後，楚、漢分爭，又併入於漢……</p>

<h2>第二回 張翼德怒鞭督郵 何國舅謀誅宦豎</h2>

<p>且說董卓字仲穎，隴西臨洮人也，官拜河東太守，自來驕傲。當日怠慢了玄德，張飛性發，便欲殺之……</p>

<h3>卻說張飛</h3>

<p>卻說張飛飲了數盃悶酒，乘馬從館驛前過，見五六十個老人，皆在門前痛哭。飛問其故，眾老人答曰：“督郵逼勒縣吏，欲害劉公；我等皆來苦告，不得放入，反遭把門人趕打！”……</p>

所涉及的元素具體代表什麼，完全取決於作者編輯的內容，只要層次結構是合理的。在建立此類結構時，你只需要記住一些最佳實踐：

• 優選地，你應該只對每個頁面使用一次<h1> — 這是頂級標題，所有其他標題位於層次結構中的下方。
• 請確保在層次結構中以正確的順序使用標題。不要使用<h3>來表示副標題，後面跟<h2>來表示副副標題 - 這是沒有意義的，會導致奇怪的結果。
• 在可用的六個標題級別中，你應該旨在每頁使用不超過三個，除非你認為有必要使用更多。具有許多級別的文件（即，較深的標題層次結構）變得難以操作並且難以導航。在這種情況下，如果可能，建議將內容分散在多個頁面上。

為什麼我們需要結構？

因為沒有元素給內容結構，所以瀏覽器不知道什麼是標題，什麼是段落。

此外：

• 用戶在閱讀網頁時，往往會快速瀏覽以查找相關內容，經常只是閱讀開頭的標題（我們通常在一個網頁上會花費很少的時間 spend a very short time on a web page)。如果用戶不能在幾秒內看到一些有用的內容，他們很可能會感到沮喪並離開。
• 對你的網頁建立索引的搜索引擎將標題的內容視為影響網頁搜索排名的重要關鍵字。沒有標題，你的網頁在SEO（搜索引擎優化）方面效果不佳。
• 嚴重視力障礙者通常不會閱讀網頁；他們用聽力來代替。完成這項工作的軟件叫做屏幕閱讀器（screen reader）。該軟件提供了快速訪問給定文本內容的方法。在使用的各種技術中，它們通過朗讀標題來提供文件的概述，讓用戶能快速找到他們需要的訊息。如果標題不可用，用戶將被迫聽到整個文件的大聲朗讀。
• 使用CSS樣式化內容，或者使用JavaScript做一些有趣的事情，你需要包含相關內容的元素，所以CSS / JavaScript可以有效地定位它。

為什麼我們需要語義？

在我們身邊的任何地方都要依賴語義學 — 我們依靠以前的經驗就知道日常事物都代表什麼；當我們看到什麼，我們就會知道它代表什麼。舉個例子, 我們知道紅色交通燈表示“停止”，綠色交通燈表示”通行“。如果運用了錯誤的語義，事情會迅速地變得非常棘手 (難道有某個國家使用紅色代表通行？我不希望如此)

同樣的道理，我們需要確保使用了正確的元素來給予內容正確的意思、作用以及外形。在這裡，<h1> 元素也是一個語義元素，它給出了包裹在你的頁面上用來表示頂級標題的角色（或意義）的文本。

1

<h1>這是個文章的標題</h1>

一般來說，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然你可以使用CSS讓它變成任何你想要的樣式。更重要的是，它的語義值將以多種方式被使用，比如通過搜索引擎和屏幕閱讀器（上文提到過的）。

1

<span style="font-size: 32px; margin: 21px 0;">這是頂級標題嗎？ </span>

這是一個 元素，它沒有語義。當你想要對它用CSS（或者JS）時，你可以用它包裹內容，且不需要附加任何額外的意義。我們已經對它使用了CSS來讓它看起來像一個頂級標題。然而，由於它沒有語義值，所以它不會有任何上文提到的幫助。最好的方法是使用相關的HTML元素來標記這個項目。

列表 (Lists)

列表在生活中隨處可見——從你的購物清單到你的回家路線方案列表，再到你遵從的教程說明列表。在網路上，列表也到處存在，我們需要學習三種不同類型的列表。

無序列表

無序的列表被用來標記每個項目。在這裡，項目的順序並不重要 — 讓我們看下面的交通工具清單的例子。

1
2
3
4
5
6

<ul>
  <li>飛機</li>
  <li>火車</li>
  <li>機車</li>
  <li>汽車</li>
</ul>

有序列表

有序的列表是根據項目的順序列出來的。
這個標記的結構和無序列表一樣，除了你需要用<ol> 元素將所有項目包裹, 而不是用<ul>。

1
2
3
4
5
6

<ol>
  <li>這條路走到底</li>
  <li>然後右轉</li>
  <li>在直走遇到第一個十字路口左轉</li>
  <li>繼續走 300 米，目的地就在你的右手邊</li>
</ol>

巢狀列表

將一個列表嵌入到另一個列表是完全可以的。你可能想讓一些子項目列在首項目之下。

1
2
3
4
5
6
7
8
9
10

<ol>
<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻，調成“醃料”，雞胸肉切成約一厘米見方的碎丁並用“醃料”攪拌均勻，醃漬半小時。 </li>
  <li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。 </li>
  <li>雞丁醃好以後，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之後，撈出來瀝乾油汁備用。 </li>
  <li>在鍋裡留下約兩大匙油，燒熱後將切好的干辣椒下鍋，用小火炒香後，再放入花椒粒和蔥段一起爆香。隨後雞丁重新下鍋，用大火快炒片刻後，再倒入“綜合調味料”繼續快炒。 </li>
  <ul>
    <li>如果你採用正宗川菜做法，最後只需加入花生米，炒拌幾下就可以起鍋了。 </li>
    <li>如果你在北方，可加入黃瓜丁、胡蘿蔔丁和花生米，翻炒後起鍋。 </li>
  </ul>
</ol>

HTML 中常用到的項目標籤有 <ul></ul> 與 <ol></ol> 這兩種，兩者都是與 <li></li> 標籤做搭配，用起來幾乎一樣的寫法規則，差別在於是否有自動排序項目的功能，<ul></ul> 標籤預設僅有一個黑點的項目符號，類似「●」這樣，在不同的瀏覽器下可能呈現不同的效果，而 <ol></ol> 標籤則具有數字排序的功能，也就是預設在每個項目前會有數字顯示，從 1 開始依序排列。

重點 和 重要性

在人類語言中，為了突出一句話的意思，我們通常強調某些詞，並且我們通常想要標記某些詞作為重點或者在某種程度上的不同。 HTML 提供了許多語義化的元素，並且允許我們通過這些元素的意義標記正文內容。

重點

當我們想要在口語中添加強調，我們重讀某些詞，以便隱含的說出我們想要說的意思。類似的，在寫作中，我們通過將文字寫成斜體來強調它。比如，接下來的兩個句子就有不同的含義。

• 我很高興你沒遲到。

• 我很高興你沒遲到。

第一句話聽起來真的像鬆了一口氣因為沒有遲到。相反，第二句話聽起來具有諷刺性而且有隱含的攻擊性，表達對一個人遲到的惱怒。

在HTML中我們用<em>（emphasis）元素來標記這樣的情況。這樣做既可以讓文件讀起來更有趣，也可以被屏幕閱讀器識別出來，並以不同的語調發出。瀏覽器默認風格為斜體，但你不應該純粹使用這個標籤來獲得斜體風格，為了獲得斜體風格，你應該使用<span>元素和一些CSS，或者是<i>元素。

1

<p>我很<em>高興</em>你沒有<em>遲到</em>.</p>

非常重要

為了強調重要的詞，在口語方面我們往往用重音強調，在文字方面則是用粗體字來達到強調的效果。

• 請勿靠近，有電危險。

在HTML中我们用<strong> (strong importance) 元素来标记这样的请况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用<span>元素和一些CSS，或者是 <b> 元素。

1

<p>請勿靠近，<strong>有電危險</strong>。</p>

斜體字、粗體字、下劃線

迄今為止我們已經討論的元素都是意義清楚的語義元素。 <b>, <i>, 和 <u> 的情況卻有點複雜。它們出現於人們要在文本中使用粗體、斜體、下劃線但CSS仍然不被完全支持的時期。像這樣的元素，僅僅影響表象而且沒有語義，被稱為表像元素（presentational elements）並且不應該再被使用。因為正如我們在之前看到的，語義對可訪問性，SEO（搜索引擎優化）等非常重要。

HTML5用新的語義規則重新定義了<b>,<i>和<u>,稍微有點混亂。

這裡是最好的經驗法則：使用<b>,<i>,<u> 來傳達傳統意義上的粗體，斜體或下劃線是合適的，沒有其他元素更適合這樣用了。然而，總是保持它們擁有可訪問性的心態是不對的。斜體的概念對人們使用屏幕閱讀器是沒有幫助的，對使用其他書寫系統而不是拉丁文書寫系統的人們也是沒有幫助的。

• <i> 被用來傳達傳統上用斜體表達的意義：外國文字，分類名稱，技術術語，一種思想……
• <b> 被用來傳達傳統上用粗體表達的意義：關鍵字，產品名稱，引導句……
• <u> 被用來傳達傳統上用下劃線表達的意義：專有名詞，拼寫錯誤……

一種關於下劃線的警告：人們很容易把下劃線和超鏈接聯繫起來。因此，在Web上，最好只在鏈接上使用下劃線。當語義適合時使用<u>元素，但是有時候在Web上用CSS改變下劃線默認的的樣式更加合適。下面的例子說明瞭如何做。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 學名 -->
<p>
  紅喉北蜂鳥（學名：<i>Archilocus colubris</i>）
  是北美東部最常見的蜂鳥品種。
</p>

<!-- 舶來詞 -->
<p>
  菜單上有好多舶來詞彙，比如 <i lang="uk-latn">vatrushka</i>（東歐乳酪麵包）,
  <i lang="id">nasi goreng</​​i>（印尼炒飯）以及<i lang="fr">soupe à l'oignon</i>（法式洋蔥湯）。
</p>

<!-- 已知的錯誤書寫 -->
<p>
  總有一天我會改掉寫<u>措字</u>的毛病。
</p>

<!-- 系列說明文字中需要突出的文字 -->
<ol>
  <li>
    <b>切</b>下兩片麵包，
  </li>
  <li>
    在兩片麵包中間<b>夾入</b>一片西紅柿和一片生菜葉。
  </li>
</ol>

註：以上參考了
MDN web docs 的 HTML text fundamentals 文章。