HTML中strong與b,em與i標籤的區別

時間 2019-11-19

標籤 html strong 標籤區別欄目 HTML 简体版

原文原文鏈接

先看效果html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p style="font-size: 36px">
 9         這是一段普通文字<br/>
10         <strong>這是一段strong文字</strong> <br/>
11            <b>這是一段加粗文字b</b><br/>
12            <em>這是一段em文字</em> <br/>
13         <i>這是一段斜體文字i</i> </br>
14     </p>
15 </body>
16 </html>

W3C官方是這樣解釋的

HTML 標籤

標籤告訴瀏覽器把其中的文本表示爲強調的內容。對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示。html5

在文本中加入強調也須要有技巧。若是強調太多，有些重要的短語就會被漏掉；若是強調太少，就沒法真正突出重要的部分。這與調味品同樣，最好仍是不要濫用強調。瀏覽器

儘管如今 標籤修飾的內容都是用斜體字來顯示，但這些內容也具備更普遍的含義，未來的某一天，瀏覽器也可能會使用其餘的特殊效果來顯示強調的文本。若是你只想使用斜體字來顯示文本的話，請使用 標籤。除此以外，文檔中還能夠包括用來改變文本顯示的級聯樣式定義。字體

除強調以外，當引入新的術語或在引用特定類型的術語或概念時做爲固定樣式的時候，也能夠考慮使用 標籤。例如，W3School 常常對重要的術語使用 標籤。 標籤能夠用來把這些名稱和其餘斜體字區別開來。網站

HTML 標籤

標籤和 標籤同樣，用於強調文本，但它強調的程度更強一些。ui

瀏覽器一般會以不一樣於 標籤的方式來顯示 標籤中的內容，一般是用加粗的字體（相對於斜體）來顯示其中的內容，這樣用戶就能夠把這兩個標籤區分開來了。spa

若是常識告訴咱們應該較少使用 標籤的話，那麼 標籤出現的次數應該更少。若是說用 標籤修飾的文本好像是在大聲呼喊，那麼用 標籤修飾的文本就無異於尖叫了。沉默寡言的人說出的話老是一言既出;駟馬難追，與此相同，限制 的使用能夠令應該更加引人注意，並且更加有效。code

舉一個例子，常常訪問 W3school 的用戶能夠注意到了，許多教程頁面的第一句摘要都是以粗體顯示的，而實際上，咱們對這一句摘要使用了 標籤。使用這個標籤的理由是，咱們認爲教程摘要不只歸納了其所在頁面的內容，並且位於頁面的最重要的位置，其內容天然是很是重要的且值得強調的。xml

HTML 標籤htm

標籤，告訴瀏覽器將包含其中的文本以粗體(bold)顯示。

提示和註釋

註釋：根據 HTML5 規範，在沒有其餘合適標籤更合適時，才應該把 標籤做爲最後的選項。HTML5 規範聲明：應該使用 <h1> - <h6> 來表示標題，使用 標籤來表示強調的文本，應該使用 標籤來表示重要文本，應該使用 標籤來表示標註的/突出顯示的文本。

HTML 標籤

告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示。

小結：

strong與em是結構化標籤，而b與i是表現化標籤。那麼咱們在網站建設中到底該怎麼使用strong與b，以及使用em與i呢。

在此建議你們完全拋棄b和i標籤，而使用strong和em。這都是爲了表達意義和結構，而不單單表示外觀。

若是咱們在網頁中不須要強調某個詞語，可是又想使用加粗或者斜體，咱們可使用CSS，如下兩條分別是字體加粗和斜體的CSS規則：
{font-weight: bold;}{font-style: italic;}

...

In HTML 4, set font to boldface where possible. Equivalent CSS: {font-weight: bold}. ... usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01.

In HTML 5, however, b has its own meaning, distinct from that of strong. It denotes "text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood." ^[28]

...

In HTML 4, set font to italic where possible. Equivalent CSS: {font-style: italic}. ... usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01.

In HTML 5, however, i has its own semantic meaning, distinct from that of em. It denotes "a different quality of text" or "an alternative voice or mood"—e.g., a thought, a ship name, a binary species name, a foreign-language phrase, etc. ^[29]

...

Emphasis (conventionally displayed in italics)

EM existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.

...

strong emphasis (conventionally displayed bold).

An aural user agent may use different voices for emphasis.

STRONG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.