其他內嵌文字元素

我們已介紹大部分的 HTML 元素,但肯定還有許多未提及。我們尚未討論的其中一個領域是內嵌文字元素。與一般大眾的認知相反,HTML 最初的用途是分享文件,而不是貓咪影片。有許多元素可為說明文件提供文字語意。

涵蓋連結和 <a> 元素的模組。其餘元素將在此簡要說明。

程式碼範例和技術文章

記錄程式碼範例時,請使用 <code> 元素。根據預設,文字內容會以等寬字型顯示。如要加入多行程式碼,請將 <code> 巢狀內嵌在 <pre> 元素中,代表預先格式化的文字。

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

<data> 元素會將指定內容與機器可讀的翻譯版本連結。元素的 value 屬性提供元素內容的機器可讀翻譯版本。如果 <data> 內容與時間或日期相關,則必須改用 <time> 元素,代表特定時間範圍。

<time> 元素可包含 datetime 屬性,以機器可讀取的格式提供方便使用者閱讀的時間和日期。datetime 屬性可供機器讀取,能為日曆和搜尋引擎等應用程式提供實用資訊。

提供程式的範例輸出內容時,請使用 <samp> 元素將文字括住。瀏覽器通常也會以等寬字型算繪這個範例或引號括住的輸出內容。

提供鍵盤互動操作說明時,可以使用 <kbd> 元素。代表使用者透過鍵盤、語音輸入或任何其他文字輸入裝置輸入的文字。

<var> 元素可用於數學運算式或程式設計變數。大多數瀏覽器會以周圍字型的斜體版本呈現文字內容。如果需要撰寫大量數學內容,建議使用 MathML,這是以 XML 為基礎的數學標記語言,用於描述數學符號。

畢氏定理中的二次方使用 <sup> 上標元素。類似的 <sub> 下標元素會指定應顯示為下標的內嵌文字,但僅限於排版原因。上標和下標是數字、圖案、符號或其他註解,比一般文字行小,且分別設定在文字行上方或下方。

使用 <del> 表示已移除或「刪除」的文字。 或者,您也可以加入 cite (設為說明變更的資源) 和 datetime 屬性,並以機器可讀取的日期和時間格式提供日期或日期和時間。刪除線元素 <s> 可用於指出內容已不相關,但不會實際從文件中移除。

<ins><del> 元素相反。這個元素用於表示已新增或「插入」的文字,可選擇性包含 citedatetime 屬性。

定義和語言支援

如果包含縮寫或字首縮寫,請務必在首次使用時以純文字提供完整版本。然後在開頭和結尾 <abbr> 標記之間,導入該詞彙的縮寫表示法。只有在第一次出現縮寫或縮略字,且正在定義時,才需要使用 <abbr>title 屬性並非必要,也無助於改善結果。

但如果讀者普遍瞭解該詞彙,則不在此限,例如本系列中的 HTMLCSS

定義非縮寫或字首縮略字詞時,請使用定義 <dfn> 元素,在周圍內容中識別要定義的字詞。

如果定義的字詞與周圍文字的語言不同,請務必加入 lang 屬性來識別語言。

撰寫不同方向的語言時,HTML 會提供 <bdi> 元素,將可能為雙向的文字與周圍文字隔離。如果內容的方向性不明,且會動態插入網頁,這個國際化元素就特別實用。<bdo> 元素會覆寫目前的文字方向性,以不同方向算繪文字。W3C 提供雙向演算法簡介

部分字元集包含位於字元上方或右側的小型註解,可提供發音資訊。<ruby> 元素是容器,可用於包含這些註解,方便閱讀韓文、中文和日文等書寫語言。紅寶石字元也可用於希伯來文、阿拉伯文和越南文。

規格中包含紅寶石括號 (<rp>),是為了在不支援顯示 <ruby> 的瀏覽器中,加入開頭和結尾括號。當瀏覽器支援 <ruby> 時 (所有長青瀏覽器都支援),系統不會顯示任何 <rp> 元素內容。紅寶石文字元素 (<rt>) 包含實際註解。這兩者都巢狀內嵌在 <ruby> 中。

請注意,如果瀏覽器支援 <ruby>,就不會顯示括號。

強調文字

有幾種元素可用於強調文字,但強調文字的語意原因 (而非呈現原因) 才是重點,因為呈現工作應由 CSS 負責。

  • 使用 <em> 元素強調或凸顯一段內容。 <em> 元素可以巢狀結構呈現,巢狀結構的每個層級都表示強調程度更高。這個元素具有語意意義,可用於通知螢幕閱讀器、Alexa 和 Siri 等聽覺使用者代理程式,以提供強調效果。
  • 使用 <mark> 元素標示或醒目顯示相關文字,例如醒目顯示 (或「標記」) 搜尋結果中出現的搜尋字詞。這樣一來,系統就能快速識別標記的內容,不必強調或標示重要性。
  • <strong> 元素會將文字標示為具有高度重要性。瀏覽器通常會以較粗的字體權重算繪內容。
  • <cite> 元素 (文字基礎一節會介紹) 用於標示書籍、文章或其他創作作品的標題,或這類作品的縮寫參考資料或引文中繼資料,例如書籍的 ISBN 編號。

有三個元素暫時遭到淘汰,但已重新加入 HTML。這些元素幾乎沒有語意值,而且一律應使用 CSS 設定 HTML 元素的樣式,因此請盡量避免使用。

<i>

<i> 元素可用於技術用語、外來字 (使用 lang 屬性識別語言)、想法或船名。這個元素用於區分內嵌內容與周圍文字,例如成語、技術用語和分類名稱。

這個元素不應用於將文字設為斜體。

MLW 會使用 <span> 元素,處理 Toasty McToastface 工作坊評論底部的奇怪文字。<span> 元素提供一般內嵌容器,沒有語意,也不代表任何內容。這時使用 <i> 也很合適。

<i> 元素的預設樣式是以斜體字型算繪元素。在本範例中,我們設定了 font-style: normal, 因為使用的字元無法以斜體顯示。

<u>

<u> 元素適用於含有非文字註解的內容。舉例來說,您可能會想標註已知拼錯的字詞。根據預設,內容會加上底線,但您可以透過 CSS 控制這項設定,例如新增紅色波浪底線,模擬文書處理程式的文法錯誤指標。

<p>I always spell <u>licence</u> wrong</p>

<b>

<b> 元素可用於強調不重要的文字。這個元素不會傳達任何特殊語意資訊,只有在這一節中的其他元素都不符合用途時,才應使用這個元素。由於我找不到適用的用途,因此未提供範例;這就是這個元素「最後手段」的由來。

空白字元

如要換行 (例如撰寫詩詞或實際地址時),請使用自閉換行元素 <br> 新增歸位字元。

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

如要在不相關的內容之間提供分隔符或主題分隔,例如在書本的章節之間,或在 5,000 字的獨白和使用者實際尋找的食譜之間,請加入 <hr> 元素。HR 代表「水平規則」。雖然瀏覽器通常會轉譯水平線,但這個元素具有語意意義。預設角色separator

HTML 也有可中斷字詞的元素。自閉式 <wbr> 元素會向瀏覽器提供建議,指出如果某個字詞可能會溢出容器,瀏覽器可選擇在此處換行。這項功能通常用於在長網址中斷字,不會新增連字號。

舉例來說,在 Hal 的傳記中,有一段以位元組程式碼寫成的文字,每個位元組都以空格分隔。位元組碼不得包含空格。如要讓長字串的位元組程式碼僅在需要換行時於位元組之間換行,請在每個換行機會中加入 <wbr> 元素:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br><hr><wbr> 元素都是空元素,也就是說,這些元素不能有任何子節點,包括巢狀元素和文字。由於這些標記都沒有可儲存內容的「內部」,因此沒有結尾標記。

隨堂測驗

測試您對內嵌文字的瞭解程度。

應該使用哪個元素顯示程式碼範例?

<kbd>
<data>
<code>

<ruby> 元素的用途是什麼?

醒目顯示元素內容。
適用於部分語言的註解。
包含裝飾性元素。