網頁文本內容豐富、形式多樣，通過不同的版式顯示在頁面中，為用戶提供最直接、最豐富的信息。HTML5新增了很多文本標簽，它們都有特殊的語義，正確使用這些標簽，可以讓網頁文本更嚴謹、更符合語義。
1、通用文本
1.1、標題文本
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>標簽可以定義標題文本，按級別高低從大到小分別為h1、h2、h3、h4、h5、h6，它們包含的信息依據重要性逐漸遞減。其中，h1表示最重要的信息，h6表示最次要的信息。
【示例】根據文檔結構層次，定義不同級別的標題文本。
<div id="wrapper"><h1>網頁標題</h1><div id="box2"><h2>欄目標題</h2><div id="sub_box1"><h3>子欄目標題</h3><p>正文</p></div></div></div>
h1、h2和h3比較常用，h4、h5和h6不是很常用，除非在結構層級比較深的文檔中才會考慮選用，因為一般文檔的標題層次在三級左右。對于標題元素的位置，應該出現在正文內容的頂部，一般處于容器的第一行。
1.2、段落文本
在網頁中輸入段落文本，應該使用p元素，它是最常用的HTML元素之一。在默認情況下，瀏覽器會在標題與段落之間，以及段落與段落之間添加間距，約為一個字體的距離，以方便閱讀。
【示例】使用p元素設計兩段詩句正文。
<p>白日依山盡，黃河入海流。</p><p>欲窮千里目，更上一層樓。</p>
使用CSS可以為段落添加樣式，如字體、字號、顏色等，也可以改變段落文本的對齊方式，包括水平對齊和垂直對齊。
2、描述性文本
HTML5強化了字體標簽的語義性，弱化了其修飾性，對于純樣式字體標簽不再建議使用，如acronym（首字母縮寫）、basefont（基本字體樣式）、center（居中對齊）、font（字體樣式）、s（刪除線）、strike（刪除線）、tt（打印機字體）、u（下畫線）、xmp（預格式）等。
2.1、強調文本
strong元素表示內容的重要性，而em表示內容的著重點。根據內容需要，這兩個元素既可以單獨使用，也可以一起使用。
【示例1】在下面的代碼中既有strong，又有em。瀏覽器通常將strong文本以粗體顯示，將em文本以斜體顯示。如果em是strong的子元素，將同時以斜體和粗體顯示文本。
<p><strong>警告: 不要接近展品<em>在任何情況下</em></strong></p>
不要使用b元素代替strong，也不要使用i元素代替em。盡管它們在瀏覽器中顯示的樣式是一樣的，但是它們的含義不一樣。
em在句子中的位置會影響句子的含義。例如，“<p><em>你</em>看著我</p>”和“<p>你看著<em>我</em></p>”表達的意思是不一樣的。
【示例2】可以在標記為strong的短語中嵌套strong文本。如果這樣做，strong的子元素的strong文本的重要程度會遞增。這種規則對嵌套在em里的em文本也適用。
<p><strong>記住密碼是<strong>111222333</strong></strong></p>
其中，“111222333”文本要比其他strong文本更為重要。
可以使用CSS將任何文本變為粗體或斜體，也可以覆蓋strong和em等元素的瀏覽器默認顯示樣式。
注意：在舊版本的HTML中，strong所表示文本的強調程度比em表示的文本要高。不過，在HTML5中，em是表示強調的唯一元素，而strong表示的則是重要程度。
2.2、標記細則
HTML5重新定義了small元素，由通用展示性元素變為更具體的、專門標識所謂“小字印刷體”的元素，通常表示細則一類的旁注。例如，免責聲明、注意事項、法律限制、版權信息等，有時還可以表示署名、許可要求等。
注意：small元素不允許被應用在頁面主內容中，只允許被當作輔助信息以inline方式內嵌在頁面上。同時，small元素也不意味著元素中內容的字體會變小，要將字體變小，需要配合使用CSS樣式。
【示例1】small通常是行內文本中的一小塊，而不是包含多個段落或其他元素的大塊文本。
<dl><dt>單人間</dt><dd>399 元 <small>含早餐，不含稅</small></dd><dt>雙人間</dt><dd>599 元 <small>含早餐，不含稅</small></dd></dl>
一些瀏覽器會將small包含的文本顯示為小字號。不過，一定要在符合內容語義的情況下使用該元素，而不是為了減小字號而使用該元素。
【示例2】第一個small元素表示簡短的提示聲明，第二個small元素表示包含在頁面級footer里的版權聲明，這是一種常見的用法。
<p>現在訂購免費送貨。<small>（僅限于五環以內）</small></p><footer role="contentinfo"><p><small>© 2023 Baidu 使用百度前必讀</small></p></footer>
提示：HTML5支持big元素，用來定義大號字體。標簽包含的文字字體比周圍的文字要大一號，如果文字已經是最大號字體，則標簽將不起任何作用。用戶可以嵌套使用標簽逐步放大文本，每一個標簽都可以使字體大一號，直到上限7號文本。
2.3、特殊格式
b和i元素是早期HTML遺留下來的元素，它們分別用于將文本變為粗體和斜體，因為那時候CSS還未出現。從HTML4和XHTML1開始不再使用，因為它們本質上是用于表現的。
當時的規范建議編碼人員用strong替代b，用em替代i。事實證明，em和strong有時在語義上并不合適。為此，HTML5重新定義了b和i。
傳統出版業里的某些排版規則在現有的HTML語義中還找不到對應物，其中就包括用斜體表示植物學名、具體的交通工具名稱及外來語，這些詞語不是為了強調而設置為斜體，只是樣式上的慣例。
為了應對這些情況，HTML5沒有創建一些新的語義化元素，而是采取一種很實際的做法，直接利用現有元素：em用于所有層次的強調，strong用于表示重要性，而其他情況則使用b和i。
這意味著，盡管b和i并不包含任何明顯的語義，但瀏覽者仍能發現它們與周邊文字的差別，而且還可以通過CSS改變它們粗體或斜體的樣式。HTML5強調：b和i應該是其他元素（如strong、em、cite等）都不適用時的最后選擇。
HTML5將b元素重新定義為：表示出于實用目的提醒讀者注意的一塊文字，不傳達任何額外的重要性，也不表示其他的語態和語氣，用于如文檔摘要里的關鍵詞、評論中的產品名、基于文本的交互式軟件中指示操作的文字、文章導語等。例如，在以下代碼中，b文本默認顯示為粗體。
<p>這是一個<b>紅</b>房子，那是一個<b>藍</b>盒子</p>
HTML5將i元素重新定義為：表示一塊不同于其他文字的文字，具有不同的語態或語氣，或其他不同于常規之處，用于如分類名稱、技術術語、外語里的慣用詞、翻譯的散文、西方文字中的船舶名稱等。例如，在以下代碼中，i文本默認顯示為斜體。
<p>這塊<i class="taxonomy">瑪瑙</i>來自西亞</p><p>這篇<i>散文</i>已經發表.</p><p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
2.4、定義上標和下標
使用sup和sub元素可以創建上標和下標，上標和下標文本比主體文本稍高或稍低。常見的上標包括商標符號、指數和腳注編號等；常見的下標包括化學符號等。例如：
<p>這段文本包含 <sub>下標文本</sub></p><p>這段文本包含 <sup>上標文本</sup></p>
【示例1】sup元素的一種用法就是表示腳注編號。根據從屬關系，將腳注放在article的footer里，而不是整個頁面的footer里。
<article><h1>王維</h1><p>王維參禪悟理，學莊信道，精通詩、書、畫、音樂等，以詩名盛于開元、天寶間，尤長五言，多詠山水田園，與
孟浩然合稱“王孟”，有“詩佛”之稱<a href="#footnote-1" title="參考注釋"><sup>[1]</sup></a> 。</p><footer><h2>參考資料</h2><p id="footnote-1"><sup>[1]</sup>孫昌武《佛教與中國文學》第二章：“王維的詩歌受佛教影響是很顯著的。因
此在生前，就得到‘當代詩匠，又精禪理’的贊譽。后來，更得到‘詩佛’的稱號。”</p></footer></article>
為文章中每個腳注編號創建鏈接，指向footer內對應的腳注，從而讓訪問者更容易找到它們。同時，鏈接中的title屬性提供了一些提示。
上標是對某些外語縮寫詞進行格式化的理想方式。例如，法語中用Mlle表示Mademoiselle（小姐），西班牙語中用3a表示tercera（第三）。此外，一些數字形式也要用到上標，如2nd、5th。下標適用于化學分子式，如H2O。
提示：sub和sup元素會輕微地增加行高，不過使用CSS可以修復這個問題。修復樣式代碼如下：
<style type="text/css">sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup { top: -0.5em; }sub { bottom: -0.25em; }</style>
用戶可以根據內容的字號對CSS做一些調整，以使各行行高保持一致。
【示例2】對于下面數學解題演示的段落文本，使用格式化語義結構能夠很好地解決數學公式中各種特殊格式的要求。對于瀏覽器來說，也能夠很好地理解它們的用途。
<article><h1>解一元二次方程</h1><p>一元二次方程求解有四種方法：</p><ul><li>直接開平方法 </li><li>配方法 </li><li>公式法 </li><li>分解因式法</li></ul><p>例如，針對下面這個一元二次方程：</p><p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p><p>我們使用<big><b>分解因式法</b></big>來演示解題思路如下：</p><p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p><p><small>得：</small><br /><i>x</i><sub>1</sub>=1<br /><i>x</i><sub>2</sub>=4</p></article>
在上面代碼中，使用i元素定義變量x以斜體顯示；使用sup定義一元二次方程中的二次方；使用b加粗顯示常量值；使用big和b加大加粗顯示“分解因式法”這個短語；使用small縮寫操作謂詞“由”和“得”的字體大小；使用sub定義方程的兩個解的下標。
顯示效果如下圖所示：
2.5、定義術語
在HTML中定義術語時，可以使用dfn元素對其做語義上的區分。例如：
<p><dfn id="def-internet">Internet</dfn>是一個全球互聯網絡系統，使用因特網協議套件（TCP/IP）為全球數十億用戶提供
服務。</p>
通常，dfn元素默認以斜體顯示。由dfn標記的術語與其定義的距離遠近相當重要。如HTML5規范所述：“如果一個段落、描述列表或區塊是某dfn元素距離最近的祖先，那么該段落、描述列表或區塊必須包含該術語的定義。”簡言之，dfn元素及其定義必須挨在一起，否則便是錯誤的用法。
【示例】可以在描述列表（dl元素）中使用dfn：
<p><dfn id="def-internet">Internet</dfn>是一個全球互聯網絡系統，使用因特網協議套件（TCP/IP）為全球數十億用戶提供
服務。</p><dl><!-- 定義“萬維網”和“因特網”的參考定義 --><dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt><dd>萬維網（WWW）是一個互連的超文本文檔訪問系統，它建立在<a href="#def-internet">Internet</a>之上。</dd></dl>
僅在定義術語時使用dfn，而不是為了讓文字以斜體顯示使用該元素。使用CSS可以將任何文字設置為斜體。
dfn可以在適當的情況下包住其他的短語元素，如abbr。例如：
<p><dfn><abbr title="Junior">Jr.</abbr></dfn>他兒子的名字和他父親的名字一樣嗎？</p>
如果在dfn中添加可選的title屬性，其值應與dfn術語一致。如果只在dfn里嵌套一個單獨的abbr，dfn本身沒有文本，那么可選的title只能出現在abbr里。
2.6、標記代碼
使用code元素可以標記代碼或文件名。例如：
<code>p{ margin:2em; }</code>
如果代碼需要顯示“<”或“>”字符，應分別使用<和>表示。如果直接使用“<”或“>”字符，瀏覽器會將這些代碼當作HTML元素處理，而不是當作文本處理。
要顯示單獨的一塊代碼，可以用pre元素包住code元素以維持其格式。例如：
<pre><code>p{margin:2em;}</code></pre>
【拓展】：
其他與計算機相關的元素有kbd、samp和var，這些元素極少使用，不過可能會在內容中用到它們。下面對它們做簡要說明。
使用kbd標記用戶輸入指示。例如：
<ol><li>使用<kbd>TAB</kbd>鍵，切換到提交按鈕</li><li>點按<kbd>RETURN</kbd>或<kbd>ENTER</kbd>鍵</li></ol>
與code一樣，kbd默認以等寬字體顯示。
samp元素用于指示程序或系統的示例輸出。例如：
<p>一旦在瀏覽器中預覽，則顯示<samp>Hello,World</samp></p>
samp默認以等寬字體顯示。
var元素表示變量或占位符的值。例如：
<p>愛因斯坦稱為是最好的 <var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
var也可以作為內容中占位符的值，例如，在填詞游戲的答題紙上可以放入<var>adjective</var>、<var>verb</var>。
var默認以斜體顯示。注意，可以在HTML5頁面中使用math等MathML元素表示高級的數學相關的標記。
2.7、預定義格式
使用pre元素可以定義預定義文本，它是計算機代碼示例的理想元素。預定義文本就是可以保持文本固有的換行和空格。例如：
<pre>p{margin:2em;}</pre>
對于包含重要的空格和換行的文本（如這里顯示的CSS代碼），使用pre元素是非常適合的。同時，要注意code元素的使用，該元素可以標記pre外面的代碼塊或與代碼有關的文本。
預定義文本通常以等寬字體顯示，可以使用CSS改變字體樣式。如果要顯示包含HTML元素的內容，應將包圍元素名稱的“<”和“>”分別改為其對應的字符實體<和>。否則，瀏覽器就會試著顯示這些元素。
一定要對頁面進行驗證，檢查是否在pre中嵌套了HTML元素。不要將pre作為逃避以合適的語義標記內容和用CSS控制樣式的快捷方式。例如，如果想發布一篇在字處理軟件中寫好的文章，不要為了保留原來的格式而簡單地將它復制、粘貼到pre里。相反，應該使用p元素，以及其他相關的文本元素標記內容，編寫CSS控制頁面的布局。
同段落一樣，pre默認從新一行開始顯示，瀏覽器通常會對pre里面的內容關閉自動換行。如果這些內容很寬，就會影響頁面的布局，或產生橫向滾動條。
提示：使用下面的CSS樣式可以對pre包含的內容打開自動換行，但在IE 7及以下版本中并不適用。
pre {white-space: pre-wrap;
}
在大多數情況下，不推薦對div等元素使用white-space:pre以代替pre，因為空格可能對這些內容（尤其是代碼）的語義非常重要，而只有pre才能始終保留這些空格。同時，如果用戶在其瀏覽器中關閉CSS，格式就丟失了。
3.8、定義縮寫詞
使用abbr元素可以標記縮寫詞并解釋其含義。當然，不必對每個縮寫詞都使用abbr，只在需要幫助訪問者了解該縮寫詞含義的時候使用。例如：
<abbr title=" HyperText Markup Language">HTML</abbr>是一門標識語言。
使用可選的title屬性提供縮寫詞的全稱，也可以將全稱放在縮寫詞后面的括號里（這樣做更好）。另外，還可以同時使用這兩種方式，并使用一致的全稱。如果大多數人都很熟悉了，就沒有必要對它們使用abbr并提供title，這里只是用它們演示示例。
通常，僅在縮寫詞第一次出現在屏幕上時，通過title或括號的方式給出其全稱。用括號提供縮寫詞的全稱是解釋縮寫詞最直接的方式，以讓盡可能多的訪問者看到這些內容。例如，使用智能手機和平板電腦等觸摸屏設備的用戶可能無法移到abbr元素上查看title的提示框。如果要提供縮寫詞的全稱，應該盡量將它放在括號里。
如果使用復數形式的縮寫詞，全稱也要使用復數形式。作為對用戶的視覺提示，Firefox和Opera等瀏覽器會對帶title的abbr文字使用虛線下畫線。如果希望在其他瀏覽器中也這樣顯示，可以在樣式表中加上下面的樣式。
abbr[title] { border-bottom: 1px dotted #000; }
無論abbr是否添加了下畫線樣式，瀏覽器都會將title屬性內容以提示框的形式顯示出來。如果看不到abbr有虛線下畫線，可以為其父元素的CSS添加line-height屬性。
提示：在HTML5之前有acronym（首字母縮寫詞）元素，但設計和開發人員常常分不清楚縮寫詞和首字母縮寫詞，因此HTML5廢除了acronym元素，以讓abbr適用于所有的場合。
當訪問者將鼠標移至abbr上，該元素title屬性的內容就會顯示在一個提示框里。在默認情況下，Chrome等一些瀏覽器不會讓帶有title屬性的縮寫詞與普通文本有任何顯示上的差別。
2.9、標注編輯或不用文本
有時可能需要將在前一個版本之后對頁面內容的編輯標出來，或者對不再準確、不再相關的文本進行標記。有兩種用于標注編輯的元素：代表添加內容的ins元素和標記已刪除內容的del元素。這兩個元素既可以單獨使用，也可以一起使用。
【示例1】在下面的列表中，繼上一次發布之后，又增加了一個條目，同時根據del元素的標注，移除了一些條目。使用ins的時候不一定要使用del，反之亦然。瀏覽器通常會讓它們看起來與普通文本不一樣。同時，s元素用以標注不再準確或不再相關的內容（一般不用于標注編輯內容）。
<ul><li><del>刪除項目</del></li><li>列表項目</li><li><del>刪除項目</del></li><li><ins>插入項目</ins></li></ul>
del和ins都支持cite和datetime兩個屬性。cite屬性（區別于cite元素）用于提供一個URL，指向說明編輯原因的頁面。
【示例3】下面演示del和ins兩個元素的顯示效果：
<p> <cite>因為懂得，所以慈悲</cite>。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2020-8-1">這是
張愛玲對胡蘭成說的話</ins>。</p><p> <cite>笑，全世界便與你同笑；哭，你便獨自哭</cite>。<del datetime="2020-8-8">出自冰心的《遙寄印度哲人泰戈爾》
</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2020-8-1">出自張愛玲的小說《花凋》</ins> </p>
如果需要向訪問者展示內容的變化情況，可以使用del和ins元素。例如，我們經常可以看見一些站點使用它們表示初次發布后的更新信息，這樣可以保持原始信息的完整性。
- 使用ins標記的文本通常會顯示一條下畫線。由于鏈接通常以下畫線表示，這可能會讓訪問者感到困惑。可以使用CSS改變插入的段落文本的樣式。
- 使用del標記的文本通常會顯示一條刪除線。加上刪除線以后，用戶就很容易看出修改了什么。
提示：HTML5指出，s元素不適用于指示文檔的編輯，要標記文檔中一塊已移除的文本，應使用del元素。有時，它們之間的差異是很微妙的，只能由個人決定哪種選擇更符合內容的語義，僅在有語義價值的時候使用del、ins和s。如果只是出于裝飾的目的給文字添加下畫線或刪除線，可以使用CSS實現這些效果。
2.10、指明引用或參考
使用cite元素可以定義作品的標題，以指明對某內容源的引用或參考。例如，戲劇、腳本或圖書的標題，歌曲、電影、照片或雕塑的名稱，演唱會或音樂會，規范、報紙或法律文件等。
【示例】在下面代碼中，cite元素標記的是音樂專輯、電影、圖書和藝術作品的標題。
<p>他正在看<cite>紅樓夢</cite></p>
對于要從引用來源中引述內容的情況，使用blockquote或q元素標記引述的文本。要弄清楚的是，cite只用于參考源本身，而不是從中引述的內容。
注意：HTML5聲明不應使用cite作為對人名的引用，但HTML5以前的版本允許這樣做，而且很多設計和開發人員仍在這樣做。HTML4的規范有以下例子。
<cite>魯迅</cite>說過：<q>其實地上本沒有路，走的人多了，也便成了路。</q>
除了這些例子，有的網站經常用cite標記在博客和文章中發表評論的訪問者的名字（WordPress的默認主題就是這樣做的）。很多開發人員表示，他們將繼續對與頁面中的引文有關的名稱使用cite，因為HTML5沒有提供給他們認為可接收的其他元素（即span和b元素）。
2.11、引述文本
blockquote元素表示單獨存在的引述（通常很長），它默認顯示在新的一行。而q元素則用于短的引述，如句子里面的引述。例如：
<p>毛澤東說過：<blockquote>帝國主義都是紙老虎……</blockquote></p><p>世界自然基金會的目標是 : <q cite="http://www.wwf.org"> 建設一個與自然和諧相處的未來 </q>我們希望他們成功。</p>
如果要添加署名，署名應該放在blockquote的外面。可以把署名放在p里面，不過使用figure和figcaption可以更好地將引述文本與其來源關聯起來。如果blockquote中僅包含一個單獨的段落或短語，可以不必將其包在p中再放入blockquote。
瀏覽器應對q元素中的文本自動加上特定語言的引號，但不同瀏覽器的顯示效果并不相同。
瀏覽器默認對blockquote文本進行縮進，cite屬性的值則不會顯示出來。不過，所有的瀏覽器都支持cite元素，通常對其中的文本以斜體顯示。
【示例】下面這個結構綜合展示了cite、q和blockquote元素以及cite引文屬性的用法：
<div id="article"><h1>智慧到底是什么呢？</h1><h2>《賣拐》智慧摘錄</h2><blockquote cite="http://www.szbf.net/Article_Show.asp?ArticleID=1249"><p>有人把它說成是知識，以為知識越多，就越有智慧。我們今天無時無刻不在受到信息的包圍和信息的轟炸，
似乎所有的信息都是真理，仿佛離開這些信息，就不能生存下去。但是你掌握的信息越多，只能說明你知識越豐富，并不等于
你掌握了智慧。有的人，知識豐富，智慧不足，難有大用；有的人，知識不多，卻無所不能，成為奇才。</p></blockquote><p>下面讓我們看看<cite>大忽悠</cite>趙本山的這段臺詞，從中你可以體會到語言的智慧。</p><div id="dialog"><p>趙本山：<q>對頭，就是你的腿有病，一條腿短！</q></p><p>范 偉：<q>沒那個事兒！我要一條腿長、一條腿短的話，那賣褲子的人就告訴我了！</q> </p><p>趙本山：<q> 賣褲子的告訴你你還買褲子嗎，誰像我心眼這么好啊？這樣吧，我給你調調。信不信，你的腿
隨著我的手往高抬，能抬多高抬多高，往下使勁落，好不好？信不信？腿指定有病，右腿短！來，起來！</q> </p><p class="action">（范偉配合做動作）</p><p>趙本山：<q>停！麻沒？</q> </p><p>范 偉：<q>麻了。</q> </p><p>高秀敏：<q>哎，他咋麻了呢？</q> </p><p>趙本山：<q>你跺，你也麻！</q> </p></div></div>
提示：可以對blockquote和q使用可選的cite屬性，提供引述內容來源的URL。盡管瀏覽器通常不會將cite的URL呈現給用戶。但從理論上講，該屬性對搜索引擎或其他收集引述文本及其引用的自動化工具還是有用的。如果要讓訪問者看到URL，可以在內容中使用鏈接（a元素）重復URL，也可以使用JavaScript將cite的值暴露出來，但這樣做的效果稍差一些。
q元素引用的內容不能跨越不同的段落，在這種情況下，應使用blockquote。不要僅僅因為需要在字詞兩端添加引號就使用q。
blockquote和q元素可以嵌套，嵌套的q元素應該自動加上正確的引號。由于內外引號在不同語言中的處理方式不一樣，因此應根據需要在q元素中加上lang屬性，不過瀏覽器對嵌套q元素的支持程度并不相同，其實瀏覽器對非嵌套q元素的支持程度也不相同。由于q元素的跨瀏覽器問題，很多開發人員避免使用q元素，而是選擇直接輸入正確的引號或使用字符實體。
2.12、換行顯示
使用br元素可以實現文本的換行顯示。要確保使用br是最后的選擇，因為該元素將表現樣式帶入HTML，而不是讓所有的呈現樣式都交由CSS控制。例如，不要使用br模擬段落之間的距離。相反，應該用p標記兩個段落并通過CSS的margin屬性規定兩段之間的距離。
那么，什么時候該用br呢？實際上，對于詩歌、街道地址等應該緊挨著出現的短行都適合用br元素。例如：
<p>北京市<br />海淀區<br />北京大學<br />32號樓</p>
每個br元素強制讓接下來的內容在新的一行顯示。如果沒有br元素，整個地址都會顯示在同一行，除非瀏覽器窗口太窄導致內容換行。可以使用CSS控制段落中的行間距以及段落之間的距離。在HTML5中，輸入
或
都是有效的。
提示：hCard微格式(http://microformats.org/wiki/hcard)是用于表示人、公司、組織和地點的人類和機器都可讀的語義形式。可以使用微格式替代上面示例中表示地址的方式。
2.13、修飾文本
span元素是沒有任何語義的行內容器，適合包圍字詞或短語內容，而div適合包含塊級內容。如果想將下面列出的項目應用到某一小塊內容，而HTML又沒有提供合適的語義化元素，就可以使用span。
- 屬性，如class、dir、id、lang、title等。
- CSS樣式。
- JavaScript行為。
由于span沒有任何語義，因此應將它作為最后的選擇，僅在沒有其他合適的元素時使用它。例如：
<style type="text/css">.red { color: red; }</style><p><span class="red">HTML</span>是通向 WEB 技術世界的鑰匙。</p>
在上面示例中，想對一小塊文字指定不同的顏色，但從句子的上下文看，沒有一個語義適合HTML元素，因此額外添加span元素定義一個類樣式。
span沒有任何默認格式，但就像其他HTML元素一樣，可以用CSS添加自己的樣式。可以對一個span元素同時添加class和id屬性，但通常只應用這兩個中的一個（如果真要添加的話）。二者的主要區別在于：class用于一組元素，而id用于標識頁面中單獨的、唯一的元素。
在HTML沒有提供合適的語義化元素時，微格式經常使用span為內容添加語義化類名，以填補語義上的空白。要了解更多信息，可以訪問http://microformats.org。
2.14、非文本注解
與b、i、s和small元素一樣，HTML5重新定義了u元素，使之不再是無語義的、用于表現的元素。以前，u元素用來為文本添加下畫線；現在，u元素用于為非文本注解。HTML5將u元素定義為：u元素為一塊文字添加明顯的非文本注解，如在中文中將文本標為專有名詞（即中文的專名號①），或者標明文本拼寫有誤。例如：
<p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p>
class完全是可選的，它的值（可以是任何內容）不會在內容中明顯指出這是拼寫錯誤。不過，可以用它對拼錯的詞添加不同于普通文本的樣式（u默認仍以下畫線顯示）。通過title屬性可以為該元素包含的內容添加注釋。
僅在cite、em、mark等其他元素語義不合適的情況下使用u元素，同時最好改變u文本的樣式，以免與同樣默認添加下畫線的鏈接文本混淆。
3、特殊用途文本
HTML5為標識特定用途的信息新增了很多文本標簽，具體說明如下。
3.1、標記高亮顯示
HTML5使用新的mark元素實現突出顯示文本，可以使用CSS對mark元素里的文字應用樣式（不應用樣式也可以），但應僅在合適的情況下使用該元素。無論何時使用mark，該元素總是用于提示瀏覽者對特定文本的注意。
最能體現mark元素作用的應用是在網頁中檢索某個關鍵詞時呈現的檢索結果，現在許多搜索引擎都用其他方法實現了mark元素的功能。
【示例1】使用mark元素高亮顯示對“HTML 5”關鍵詞的搜索結果：
<article><h2><mark>HTML5</mark>中國:中國最大的<mark>HTML5</mark>中文門戶 - Powered by Discuz!官網</h2><p><mark>HTML5</mark>中國,是中國最大的<mark>HTML5</mark>中文門戶。為廣大<mark>html5</mark>開發者提
供<mark>html5</mark>教程、<mark>html5</mark>開發工具、<mark>html5</mark>網站示例、<mark>html5</mark>視頻、js教
程等多種<mark>html5</mark>在線學習資源。</p><p>www.html5cn.org/ - 百度快照 - 86%好評</p></article>
mark元素還可以標識引用原文，為了某種特殊目的而把原文作者沒有重點強調的內容標示出來。
【示例2】使用mark元素將唐詩中的韻腳高亮顯示出來：
<article><h2>靜夜思 </h2><h3>李白</h3><p>床前明月<mark>光</mark>，疑是地上<mark>霜</mark>。</p><p>舉頭望明月，低頭思故<mark>鄉</mark>。</p></article>
注意：在HTML4中，用戶習慣使用em或strong元素突出顯示文字，但是mark元素的作用與這兩個元素的作用是有區別的，不能混用。
mark元素的標示目的與原文作者無關，或者說，它不是被原文作者用來標示文字的，而是后來被引用時添加上去的，它的目的是吸引當前用戶的注意力，供用戶參考，希望能對用戶有幫助。而strong是原文作者用來強調一段文字的重要性，如錯誤信息等，em元素是作者為了突出文章的重點文字而使用的。
提示：目前，所有最新版本的瀏覽器都支持mark元素。IE8以及更早的版本不支持mark元素。
3.2、標記進度信息
progress是HTML5的新元素，它指示某項任務的完成進度。可以用它表示一個進度條，就像在Web應用中看到的指示保存或加載大量數據操作進度的組件。
支持progress的瀏覽器會根據屬性值自動顯示一個進度條，并根據值對其進行著色。<progress>和</progress>之間的文本不會顯示出來。例如：
<p>安裝進度: <progress max="100" value="35">35%</progress></p>
一般只能通過JavaScript動態地更新value屬性值和元素里面的文本以指示任務進程。通過JavaScript（或直接在HTML中）將value屬性的值設為35（假定max=“100”）。
progress元素支持三個屬性：max、value和form。它們都是可選的，max屬性指定任務的總工作量，其值必須大于0。value是任務已完成的量，值必須大于0、小于或等于max屬性值。如果progress沒有嵌套在form元素里面，又需要將它們聯系起來，可以添加form屬性并將其值設為該form的id。
目前，Firefox 8+、Opera11+、IE 10+、Chrome 6+、Safari 5.2+版本的瀏覽器都以不同的表現形式對progress元素提供支持。
【示例】下面簡單演示如何使用progress元素：
<section><p>百分比進度: <progress id="progress" max="100"><span>0</span>%</progress></p><input type="button" onclick="click1()" value="顯示進度"/></section><script>function click1(){var progress = document.getElementById('progress');progress.getElementsByTagName('span')[0].textContent ="0";for(var i=0;i<=100;i++)updateProgress(i);}function updateProgress(newValue){var progress = document.getElementById('progress');progress.value = newValue;progress.getElementsByTagName('span')[0].textContent = newValue;}</script>
注意：progress元素不適合用來表示度量衡，例如，磁盤空間使用情況或查詢結果。如須表示度量衡，應使用meter元素。
3.3、標記刻度信息
meter是HTML5的新元素，它很像progress元素。可以用meter元素表示分數的值或已知范圍的測量結果。簡單地說，它代表的是投票結果。例如，已售票數（共850張，已售811張）、考試分數（百分制的90分）、磁盤使用量（如256 GB中的74 GB）等測量數據。
HTML5建議（并非強制）瀏覽器在呈現meter時，在旁邊顯示一個類似溫度計的圖形、一個表示測量值的橫條，測量值的顏色與最大值的顏色有所區別（相等除外）。作為當前少數幾個支持meter的瀏覽器，Firefox正是這樣顯示的。對于不支持meter的瀏覽器，可以通過CSS對meter添加一些額外的樣式，或用JavaScript進行改進。
【示例】下面簡單演示如何使用meter元素：
<p>項目的完成狀態: <meter value="0.80">80%完成</meter></p><p>汽車損耗程度: <meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p><p>十公里競走里程:<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>
支持meter的瀏覽器（如Firefox）會自動顯示測量值，并根據屬性值進行著色。<meter>和</meter>之間的文字不會顯示出來。如最后一個示例所示，如果包含title文本，就會在鼠標懸停在橫條上時顯示出來。雖然并非必需的，但最好在meter里包含一些反映當前測量值的文本，供不支持meter的瀏覽器顯示。
IE不支持meter，它會將meter元素里的文本內容顯示出來，而不是顯示一個彩色的橫條。可以通過CSS改變其外觀。
meter不提供定義好的單位，但可以使用title屬性指定單位，如示例所示。通常，瀏覽器會以提示框的形式顯示title文本。meter并不用于標記沒有范圍的普通測量值，如高度、寬度、距離、周長等。
meter元素包含7個屬性，簡單說明如下：
- value：在元素中特別標示出來的實際值。該屬性值默認為0，可以為該屬性值指定一個浮點小數值。它是唯一必須包含的屬性。
- min：設置規定范圍時，允許使用的最小值，默認為0，設定的值不能小于0。
- max：設置規定范圍時，允許使用的最大值。如果設定時，該屬性值小于min屬性的值，那么把min屬性的值視為最大值。max屬性的默認值為1。
- low：設置范圍的下限值，必須小于或等于high屬性的值。如果low屬性值小于min屬性的值，那么把min屬性的值視為low屬性的值。
- high：設置范圍的上限值。如果該屬性值小于low屬性的值，那么把low屬性的值視為high屬性的值；如果該屬性值大于max屬性的值，那么把max屬性的值視為high屬性的值。
- optimum：設置最佳值，該屬性值必須在min屬性值與max屬性值之間，可以大于high屬性值。
- form：設置meter元素所屬的一個或多個表單。
提示：目前，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+版本的瀏覽器支持meter元素。瀏覽器對meter的支持情況還在變化，關于最新的瀏覽器支持情況，可以訪問http://caniuse.com/#feat=progressmeter。
有人嘗試針對支持meter的瀏覽器和不支持meter的瀏覽器統一編寫meter的CSS。在網上搜索“style HTML5 meter with CSS”就可以找到一些解決方案，其中一些用到了JavaScript。
3.4、標記時間信息
使用time元素標記時間、日期或時間段，這是HTML5新增的元素。呈現這些信息的方式有多種。例如：
<p>我們在每天早上 <time>9:00</time> 開始營業。</p><p>我在 <time datetime="2020-02-14">情人節</time> 有個約會。</p>
time元素最簡單的用法是不包含datetime屬性。在忽略datetime屬性的情況下，它們的確提供了具備有效的機器可讀格式的時間和日期。如果提供datetime屬性，time標簽中的文本可以不嚴格使用有效的格式；如果忽略datetime屬性，文本內容就必須是合法的日期或時間格式。
time中包含的文本內容會出現在屏幕上，對用戶可見，而可選的datetime屬性則是為機器準備的。該屬性需要遵循特定的格式。瀏覽器只顯示time元素的文本內容，而不會顯示datetime的值。
datetime屬性不會單獨產生任何效果，但可以用于在Web應用（如日歷應用）之間同步日期和時間。這就是必須使用標準的機器可讀格式的原因，這樣程序之間就可以使用相同的“語言”共享信息。
提示：不能在time元素中嵌套一個time元素，也不能在沒有datetime屬性的time元素中包含其他元素（只能包含文本）。
在早期的HTML5說明中，time元素可以包含pubdate的可選屬性。不過，后來pubdate已不再是HTML5的一部分。讀者可能在早期的HTML5示例中見到過該屬性。
**【拓展】**datetime屬性（或者沒有datetime屬性的time元素）必須提供特定的機器可讀格式的日期和時間。這可以簡化為下面的形式。
YYYY-MM-DDThh: mm: ss
例如（當地時間）：
2020-11-03T17: 19: 10
表示“當地時間2020年11月3日17時19分10秒”。小時部分使用24小時制，因此表示下午5點應使用17，而非05。如果包含時間，秒是可選的。也可以使用hh:mm.sss格式提供時間的毫秒數。注意，毫秒數之前的符號是一個點。
如果要表示時間段，則格式稍有不同。有幾種語法，不過最簡單的形式為：
nh nm ns
其中，三個n分別表示小時數、分鐘數和秒數。
也可以將日期和時間表示為世界時。在末尾加上字母Z，就成了全球標準時間(Coordinated Universal Time，UTC)。UTC是主要的全球時間標準。例如（使用UTC的世界時）：
2020-11-03T17: 19: 10Z
也可以通過相對UTC時差的方式表示時間。這時不寫字母Z，寫上-（減）或+（加）及時差即可。例如，含相對UTC時差的世界時：
2020-11-03T17: 19: 10-03: 30
表示“紐芬蘭標準時(NST)2020年11月3日17時19分10秒”（NST比UTC晚3小時30分）。
提示：如果確實要包含datetime，則不必提供時間的完整信息。
3.5、標記聯系信息
HTML沒有專門用于標記通信地址的元素，address元素是用以定義與HTML頁面或頁面一部分（如一篇報告或新文章）有關的作者、相關人士或組織的聯系信息，通常位于頁面底部或相關部分的內容中。至于address具體表示哪一種信息，取決于該元素出現的位置。
【示例】下面是一個簡單的聯系信息演示示例。
<main role="main"><article><h1>文章標題</h1><p>文章正文</p><footer><p>說明文本</p><address><a href="mailto:zhangsan@163.com">zhangsan@163.com</a>.</address></footer></article></main><footer role="contentinfo"><p><small>© 2020 baidu, Inc.</small></p><address>北京8號<a href="index.html">首頁</a></address></footer>
在大多數時候，聯系信息的形式是作者的電子郵件地址或指向聯系信息頁的鏈接。聯系信息有可能是作者的通訊地址，這時將地址用address標記就是有效的。但是用address標記公司網站“聯系我們”頁面中的辦公地點，則是錯誤的用法。
在上面的示例中，頁面中有兩個address元素：一個用于article的作者，另一個位于頁面級的footer里，用于對整個頁面的維護。注意，article的address元素只包含聯系信息。盡管article的footer里也有關于作者的背景信息，但這些信息位于address元素的外面。
address元素中的文字默認以斜體顯示。如果address嵌套在article里，則屬于其所在的最近的article元素，否則屬于頁面的body。說明整個頁面的作者的聯系信息時，通常將address放在footer元素里。article里的address提供的是該article作者的聯系信息，而不是嵌套在該article里的其他任何article（如用戶評論）的作者的聯系信息。
address只能包含作者的聯系信息，而不能包含其他內容，如文檔或文章的最后修改時間。此外，HTML5禁止在address里包含h1～h6、article、address、aside、footer、header、hgroup、nav和section元素。
3.6、標記顯示方向
如果在HTML頁面中混合了從左到右書寫的字符（如大多數語言所用的拉丁字符）和從右到左書寫的字符（如阿拉伯語或希伯來語字符），就可能要用到bdi和bdo元素。
要使用bdo，必須包含dir屬性，取值包括ltr（由左至右）或rtl（由右至左），指定希望呈現的顯示方向。
bdo適用于段落里的短語或句子，不能用它包圍多個段落。bdi元素是HTML5中新添加的元素，用于內容的方向未知的情況，不必包含dir屬性，因為默認已設為自動判斷。
【示例】設置用戶名，根據語言的不同自動調整顯示順序：
目前，只有Firefox和Chrome瀏覽器支持bdi元素。
3.7、標記換行斷點
HTML5為br引入一個相近的元素—wbr，它代表“一個可換行處”。可以在一個較長的無間斷短語（如URL）中使用該元素，表示此處可以在必要的時候進行換行，從而讓文本在有限的空間內更具可讀性。因此，與br不同，wbr不會強制換行，而是讓瀏覽器知道在哪里可以根據需要進行換行。
【示例】為URL字符串添加換行符標簽，這樣當窗口寬度變化時，瀏覽器會自動根據斷點確定換行位置：
<p>本站舊地址為https:<wbr>//<wbr>www.old_site.com/，新地址為https:<wbr>//<wbr>www.new_site.com/。</p>
3.8、標記旁注
旁注標記是東亞語言（如中文和日文）中一種慣用的符號，通常用于表示生僻字的發音。這些小的注解字符出現在它們標注的字符的上方或右方，常簡稱為旁注（ruby或rubi）。日語中的旁注字符稱為振假名。
ruby元素以及它們的子元素rt和rp是HTML5中為內容添加旁注標記的機制。rt指明對基準字符進行注解的旁注字符。可選的rp元素用于在不支持ruby的瀏覽器中的旁注文本周圍顯示括號。
【示例】使用和
<style type="text/css">ruby { font-size: 40px; }</style><ruby>少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt></ruby>，<ruby>鄉<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>shuāi</rt></ruby>。
3.9、標記展開/收縮詳細信息
HTML5新增details和summary元素，允許用戶創建一個可展開、折疊的元件，讓一段文字或標題包含一些隱藏的信息。
在一般情況下，details用來對顯示在頁面中的內容做進一步的解釋，details元素內并不僅限于放置文字，也可以放置表單、插件或對一個統計圖提供詳細數據的表格。
details元素有一個布爾型的open屬性，當該屬性值為true時，details包含的內容會展開顯示；當該屬性值為false（默認值）時，其包含的內容被收縮起來不顯示。
summary元素從屬于details元素，當單擊summary元素包含的內容時，details包含的其他所有從屬子元素將會展開或收縮。如果details元素內沒有summary元素，瀏覽器會提供默認文字以供單擊，同時還會提供一個類似上下箭頭的圖標，提示details的展開或收縮狀態。
當details元素的狀態從展開切換為收縮，或者從收縮切換為展開時，均將觸發toggle事件。
【示例】設計一個商品的詳細數據展示：
<details><summary>HUAWEI Mate 40 Pro 5G</summary><p>商品詳情：</p><dl><dt>電池</dt><dd>4400mAh</dd>……</dl></details>
收縮：
展開：
3.10、標記對話框信息
HTML5新增dialog元素，用來定義一個對話框或窗口。dialog在界面中默認為隱藏狀態，可以設置open屬性，定義是否打開對話框或窗口，也可以在腳本中使用該元素的show()或close()方法動態地控制對話框的顯示或隱藏狀態。
【示例1】下面是一個簡單的演示示例：
<dialog><h1>Hi, HTML5</h1><button id="close">關閉</button></dialog><button id="open">打開對話框</button><script>var d = document.getElementsByTagName("dialog")[0],openD = document.getElementById("open"),closeD = document.getElementById("close");openD.onclick = function() {d.show();} // 顯示對話框closeD.onclick = function() {d.close();} // 關閉對話框</script>
隱藏狀態：
打開狀態：
提示：在腳本中，設置dialog.open=“open"可以打開對話框，設置dialog.open=”"可以關閉對話框。
【示例2】如果調用dialog元素的showModal()方法可以以模態對話框的形式打開，效果如下圖所示。然后使用::backdrop偽類設計模態對話框的背景樣式。
<style>::backdrop{background-color:black;}</style><input type="button" value="打開對話框" onclick=" document.getElementById('dg'). showModal(); "><dialog id="dg" onclose="alert('對話框被關閉')" oncancel="alert('在模式窗口中按下Esc鍵')"><h1>Hi, HTML5</h1><input type="button" value="關閉" onclick="document.getElementById('dg').close();"/></dialog>
的設計與開發)
