文字基本概念

如同文字編輯器,為 <h6> 提供 <h1> 標題,並有多種文字格式設定方法。 產生了有效且有意義的圖像,HTML 提供了一組非常類似的語意和非語意元素,用來表達語意。

本節說明標記文字的主要方式,或基礎文字的基本概念。接著我們會說明屬性,再開始探索 標記文字的其他方式,例如清單、表格和表單。

有六個區段標題元素,<h1><h2><h3><h4><h5><h6>最重要的是 <h1> 最低值為 <h6>。多年來,開發人員聽說瀏覽器會使用標題列出文件大綱, 這原本是目標,但瀏覽器並沒有實作功能。不過,螢幕閱讀器使用者會 做為探索策略來瞭解網頁內容,並使用 h 鍵瀏覽標題。因此,如要確保 標題層級的架構則與介紹文件相同,方便大家存取內容,而且我們仍非常鼓勵。

根據預設,瀏覽器會將 <h1> 的樣式設為最小、<h2> 小,且後續的標題層級都會縮小 根據預設。有趣的是,瀏覽器根據預設也會根據 <article><aside><nav><h1> 巢狀結構的 <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;}

加入 lang 屬性的目的是讓瀏覽器知道,雖然 <html lang="en-US"> 開頭標記中的網頁基本語言是英文,但這段文字是其他語言。這樣可讓 Siri、Alexa 和 VoiceOver 等語音控制功能使用法文發音。也會告知瀏覽器要算繪的引號類型。

<blockquote> 一樣,<q> 元素支援 cite 屬性。

HTML 實體

您可能已註意到逸出序列或「實體」。由於 HTML 中使用了 <,因此您必須使用 &lt; 或較不易記住的編碼 &#60; 來逸出這個巨集。HTML 中有四個保留實體:<>&"。其字元參照分別為 &lt;&gt;&amp;&quot;

您會經常使用 &copy; 著作權 (©)、商標 (TM) &trade;,以及 &nbsp; 代表不換行。 如想在兩個字元或字詞之間加入空格,同時避免換行位置,請勿使用不分行空格。 超過 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&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

這個編碼中有幾個未逸出的字元和幾個已命名的字元參照。由於字元集為 UTF-8 如本例所示,區塊引號中的最後幾個字元不需要實際逸出。僅支援字元 就必須逸出字元集。如有需要,您可以使用許多工具來逸出各種字元, 或者,只需確保在 <head> 中加入 <meta charset="UTF-8">

即使您將字元集指定為 UTF-8,但想要在畫面中顯示該字元時,仍必須逸出 <。 一般而言,您不需要為 >"& 加入具名字元參照。但如果您想編寫 HTML 實體的教學課程 教他人如何編寫 < 時,您才需要編寫 &lt;。😀

對了,這個笑臉表情符號是 &#x1F600;,但這份文件被宣告為 UTF-8,因此無法逸出。

隨堂測驗

測試您對 HTML 文字的瞭解。

如何在 HTML 中顯示版權符號?

c
&copyright
&copy;

哪一個元素可用來表明某些內容是引號?

<blockquote>
<quote>
<cite>