就像文字編輯器為 <h6>
標題提供 <h1>
到 <h6>
標題的方式,還有許多設定文字區段格式的方法,讓您透過有意義的視覺方式設定文字區段的格式,而 HTML 提供了一組非常相似的語意和非語意元素,以表達語意含義。
本章節會說明標記文字的主要方式,或說明文字基本概念。然後,我們會先討論屬性,再探索其他標記文字的方式,例如清單、資料表和表單。
標題 (複習內容)
共有六個區段標題元素:<h1>
、<h2>
、<h3>
、<h4>
、<h5>
和 <h6>
,其中 <h1>
最為重要,也是 <h6>
。多年來,開發人員都反映瀏覽器會使用標題來概述文件內容。這本來是目標,但瀏覽器尚未實作概述功能。不過,螢幕閱讀器使用者會使用標題做為探索策略,藉此瞭解頁面內容,並使用 h
鍵瀏覽標題。因此,請確保實作標題層級的方式與建立文件說明相同,讓使用者更容易理解您的內容,同時仍非常鼓勵大家。
根據預設,瀏覽器樣式 <h1>
是最大,<h2>
稍微較小,後續每個標題層級則較小。有趣的是,瀏覽器預設也會根據其巢狀結構所在的 <article>
、<aside>
、<nav>
或 <section>
元素數量,縮小 <h1>
字型大小。
部分使用者代理程式樣式表包含下列選取器 (或類似),可以設定巢狀 <h1>
元素的樣式,就像它們比較不重要的層級一樣:
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
不過,無障礙物件模型 (AOM) 仍會正確回報元素層級;在本例中為「標題,等級 1」。請注意,瀏覽器不會為其他標題層級執行這項操作。也就是說,請勿使用以標題層級為基礎的瀏覽器樣式。雖然瀏覽器不支援大綱,但會假定這些內容標題會像這樣。
除了標題之外,大部分結構化的文字都是由一系列段落組成。在 HTML 中,段落會以 <p>
標記標記;結尾是選用標記,不過一律建議使用。
「#about」部分包含標題和幾個段落:
這個區段沒有無障礙名稱,因此不是地標。如要將此轉換為 region
(地標角色),可以使用 aria-labelledby
提供無障礙名稱:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
請只在適當情況下建立地標。如果位置標記過多,螢幕閱讀器使用者可能會快速感到失望。
引文和引用資料
為文章或網誌文章加上標記時,您可能需要加上引用或引述內容,無論引用與否都必須包含引用出處。
這三個元件包含 <blockquote>
、<q>
和 <cite>
(適用於可見引用) 的元素,或是利用 cite
屬性提供有關搜尋的更多資訊。
#feedback
區段包含標題和三則評論;這些評論是引用文字,部分包含引號,最後則是包含引用引用出處的段落。省略第三次評論以節省空間,標記如下:
引言作者或引述內容的相關資訊並非引述內容,因此不會出現在 <blockquote>
中,而是放在引用之後。雖然這些引用內容在限定字詞的意思上,但實際上並非引用特定資源,因此會封裝在 <p>
段落元素中。
引文分成三行顯示,包括作者姓名、先前的角色和專業推辭。<br>
換行字元會在文字區塊中建立換行符號。可用於實際地址、詩詞和簽名區塊中。換行字元不得做為回車字元回到不同段落。請改為關閉先前的段落,然後開啟新段落。為段落使用段落,不僅方便無障礙功能,還能啟用樣式設定。<br>
元素只是換行符號,受到極少數 CSS 屬性的影響。
雖然我們在每個引用引用文字後方的段落中提供引用資訊,但先前顯示的引文並非來自外部來源,因此會以這種方式編碼。如果提及,來源可以 (應該) 引用出處。
如果評論是來自評論網站、書籍或其他作品,則可使用 <cite>
元素做為來源的標題。<cite>
的內容可以是書名、網站或電視節目名稱,甚至是電腦節目的名稱。無論要傳遞的是來源,還是要引用或參照來源,都可以使用 <cite>
封裝。<cite>
的內容是作品,而非作者。
如果 Blendan Smooth 的引述內容是從她的離線雜誌取得,請寫出如下所示的引用文字:
引用元素 <cite>
沒有隱含角色,因此必須從內容中取得可存取的名稱;請不要包含 aria-label
。
為了在無法公開顯示內容時提供作者資訊,可以使用 cite
屬性,其值會當做引用資訊的來源文件或訊息網址。這項屬性同時適用於 <q>
和 <blockquote>
。雖然是網址,但機器可以讀取,但無法向讀者顯示:
雖然 </p>
結束標記是選用項目 (我們一律建議使用),但 </blockquote>
結尾標記一律為必要項目。
多數瀏覽器會在 <blockquote>
內嵌方向和 <cite>
內容中加入邊框間距,以及透過 CSS 控制。<blockquote>
不會加上引號,但可使用 CSS 產生的內容加入這些引號。根據預設,<q>
元素會使用適當的語言的引號加上引號。
#teachers
部分的 HAL 表示:「很抱歉
內嵌引文元素 <q>
會新增適合語言的引號。使用者代理程式預設樣式包含開放式引號和右引號產生的內容:
q::before {content: open-quote;}
q::after {content: close-quote;}
雖然網頁的基本語言在 <html lang="en-US">
開頭標記中定義為英文,但 lang
屬性含有不同的語言,這會讓瀏覽器瞭解。這可協助語音控制 (例如 Siri、Alexa 和 voiceover ) 使用法文發音。也會通知瀏覽器要顯示的引號類型。
和 <blockquote>
一樣,<q>
元素支援 cite
屬性。
HTML 實體
您可能已註意到逸出序列或「實體」。由於 <
是用於 HTML,因此您必須使用 <
或較不易記住的 <
編碼來逸出。HTML 中有四個保留實體:<
、>
、&
和 "
。他們的字元參照分別為 <
、>
、&
和 "
。
通常還會使用 ©
代表版權 (©)、™
代表商標 (TM),
則代表非分行空格。
想要在兩個字元或字詞之間加入空格,但又避免換行時,非分行空格就非常實用。
超過 2,000 個已命名字元參照。不過如有需要,每個字元 (包括表情符號) 都會有開頭為 &#
的編碼對等項目。
當您查看 ToastyMcToastface 的研討會 (未包含於上述程式碼範例) 時,您會看到一些罕見的文字字元:
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>
這個引用文字中的最後一個句子也可寫成:
This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇
這段程式碼中有幾個未逸出的字元和幾個已命名的字元參照。由於字元集是 UTF-8,因此封鎖引號的最後幾個字元不必逸出,如本範例所示。只有該字元集不支援的字元需要逸出。如有需要,您可以善用許多工具來逸出各種字元,或者也可以只確保在 <head>
中加入 <meta charset="UTF-8">
。
即使將字元集指定為 UTF-8,當您要在螢幕上輸出該字元時,還是需要逸出 <
。一般來說,您不需要加入 >
、"
或 &
的具名字元參照;但如果您想針對 HTML 實體編寫教學課程,則必須在教導說明如何編寫 <
時編寫 <
。😀
喔,這個表情符號是 😀
,但這份文件宣告為 UTF-8,因此並未逸出。
隨堂測驗
測驗您對 HTML 文字的相關知識。
如何在 HTML 中顯示版權符號?
c
©
©right
.哪一個元素可用來表示內容為引號?
<blockquote>
<quote>
<cite>
<cite>
元素是用來表示引用來源,而非引用內容本身。