如同文字編輯器,為 <h6>
提供 <h1>
標題,並有多種文字格式設定方法。
產生了有效且有意義的圖像,HTML 提供了一組非常類似的語意和非語意元素,用來表達語意。
本節說明標記文字的主要方式,或基礎文字的基本概念。接著我們會說明屬性,再開始探索 標記文字的其他方式,例如清單、表格和表單。
標題,再審
有六個區段標題元素,<h1>
、<h2>
、<h3>
、<h4>
、<h5>
和<h6>
最重要的是 <h1>
最低值為 <h6>
。多年來,開發人員聽說瀏覽器會使用標題列出文件大綱,
這原本是目標,但瀏覽器並沒有實作功能。不過,螢幕閱讀器使用者會
做為探索策略來瞭解網頁內容,並使用 h
鍵瀏覽標題。因此,如要確保
標題層級的架構則與介紹文件相同,方便大家存取內容,而且我們仍非常鼓勵。
根據預設,瀏覽器會將 <h1>
的樣式設為最小、<h2>
小,且後續的標題層級都會縮小
根據預設。有趣的是,瀏覽器根據預設也會根據 <article>
、<aside>
、<nav>
或<h1>
巢狀結構的 <section>
元素。
有些使用者代理程式樣式表包含下列選取器,可用於設定巢狀 <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;}
加入 lang
屬性的目的是讓瀏覽器知道,雖然 <html lang="en-US">
開頭標記中的網頁基本語言是英文,但這段文字是其他語言。這樣可讓 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>