其他內嵌文字元素

我們大部分只是說明一下,但絕對不是所有 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> 開頭和結尾標記之間的字詞縮寫。除非讀者熟悉的術語,例如本系列中的「HTML」和「CSS」。只有在第一次出現時,定義縮寫或縮寫時,才需要使用 <abbr>title 屬性並非必要,也沒有幫助。

定義非縮寫或縮寫的字詞時,請使用定義 <dfn> 元素來表示在其周圍內容中定義的字詞。

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

編寫不同方向的語言時,HTML 提供 <bdi> 元素,可單獨處理可能雙向的文字,與周圍的文字分開處理。如果網頁以動態方式插入不明方向性內容,這個國際化元素就特別實用。<bdo> 元素會覆寫目前的文字方向,以不同方向轉譯文字。W3C 提供了雙向演算法簡介

某些字元集會在字元上方或右側放置小型註解,提供發音相關資訊。<ruby> 元素是容器,可用於包含這些註解,讓韓文、中文和日文等書寫語言更容易閱讀。Ruby 也可用於希伯來文、阿拉伯文和越南文。

規格中加入了橡皮括號 (<rp>),以便針對不支援 <ruby> 顯示的瀏覽器加入左右括號。如果瀏覽器支援 <ruby>,所有長效瀏覽器皆支援,<rp> 元素的內容就不會顯示。ruby 文字元素 (<rt>) 包含實際的註解。這兩者都是在 <ruby> 中的巢狀結構。

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

強調文字

您可以用多個元素做為強調文字的語意原因來強調文字 (而不是為了強調文字,這是 CSS 的任務)。

  • 使用 <em> 元素來增加或強調內容的連貫性。 <em> 元素可以巢狀,且每個巢狀結構層級代表較大的強調程度。這個元素具有語意含義,可用來通知螢幕閱讀器、Alexa 和 Siri 等稽核使用者代理程式,藉此強調強調效果。
  • 使用 <mark> 元素可識別或醒目顯示相關的文字,例如醒目顯示 (或「標記」) 搜尋結果中出現的搜尋字詞。這可讓使用者在不增加強調或重要性的情況下,快速識別標記內容。
  • <strong> 元素會將文字識別為重要性。瀏覽器在顯示內容時,通常會使用較大的字型粗細。
  • 文字基本概念中涵蓋的 <cite> 元素可用來標記書籍、文章或其他創意作品的標題,或是縮寫的參考資料或引用中繼資料,例如書籍的 ISBN 編號。

三個元素暫時不適用,但已加回 HTML 中。請謹慎使用,因為它們幾乎或完全沒有語意值,而且應一律使用 CSS 設定 HTML 元素的樣式。

<i>

<i> 元素可用於技術詞彙、外字詞 (同樣使用 lang 屬性來識別語言、想法或飛船名稱)。這個元素會因為特定原因而用來區分內嵌內容和周圍文字,例如慣用文字、技術詞彙和分類名稱。這個元素不應只將文字設為斜體,

「MLW」針對 Toasty McToastface 研討會評論底部的奇怪文字使用 <span> 元素。<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>

如要為切線內容區段 (例如書籍中的章節之間,或是使用者實際搜尋的食譜和食譜之間的差異) 提供分隔符或主題符號,請加入 <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> 元素都是 void 元素,也就是說,這些元素不能包含任何子節點,即巢狀元素或文字。由於這些方法都沒有「內部」可以儲存內容的地方,因此也沒有結束標記。

隨堂測驗

測驗您對內嵌文字的相關知識。

如要顯示程式碼範例,應使用哪個元素?

<code>
答對了!
<data>
請再試一次。
<kbd>
請再試一次。

<ruby> 元素的用途為何?

包含裝飾元素。
請再試一次。
適用於某些語言使用的註解。
答對了!
如要醒目顯示元素的內容,
請再試一次。