Яка різниця між <b> і <strong>, <i> і <em>?

У чому різниця між <b>і <strong>, <i>і <em>в HTML / XHTML? Коли слід використовувати кожен?

Вони однаково впливають на звичайні системи візуалізації веб-браузерів , але між ними є принципова різниця .

Як пише автор у публікації зі списку дискусій :

Подумайте про три різні ситуації:

• веб-браузери
• незрячих людей
• мобільні телефони

"Жирний" - це стиль - коли ви говорите "жирне слово" , люди в основному знають, що це означає додати більше, скажімо, "чорнила", навколо букв, поки вони не виділяться більше серед решти літер.

Це, на жаль, для сліпої людини нічого не означає. На мобільних телефонах та інших КПК текст уже є жирним, оскільки роздільна здатність екрана дуже мала. Не можна жирним жирним шрифтом, не накручуючи щось.

<b>це стиль - ми знаємо, як "сміливий" повинен виглядати.

<strong>однак є вказівкою на те, як щось слід розуміти . "Сильний" може (і часто це означає) у веб-переглядачі означає "жирний", але він також може означати нижчий тон для такої мови, як програма "Щелепи" (для сліпих людей), або бути представлений підкресленням (оскільки ви не можете жирним шрифтом жирним) на Пальмовому пілоті.

HTML ніколи не мав на увазі стилі. Зробіть кілька пошуків для "Тіма Бернерса-Лі" та "семантичної павутини". <strong>є семантичним - він описує текст, який він оточує (наприклад, "цей текст повинен бути сильнішим за решту тексту, який ви відобразили" ) на відміну від опису того, як повинен відображатися текст, який він оточує (наприклад, "цей текст повинен бути жирний " ).

<b>і <i>явні - вони вказують жирним та курсивним відповідно.

<strong>і <em>є семантичними - вони вказують, що доданий текст повинен бути "сильним" або "підкресленим" певним чином, зазвичай жирним і курсивним, але дозволяють контролювати фактичний стиль за допомогою CSS. Отже, вони віддані перевагу на сучасних веб-сторінках.

<strong>і <em>додайте додаткового смислового значення вашому документу. Так буває, що вони також надають вашому тексту жирний і курсивний стиль.

Звичайно, ви могли б замінити їх стиль із CSS.

<b>а <i>з іншого боку, застосовуйте лише стилістику шрифту, і її більше не слід використовувати. (Тому що ви повинні форматувати за допомогою CSS, і якщо текст насправді був важливим, ви, ймовірно, зробите його "сильним" або "підкресленим" у будь-якому випадку!)

Сподіваюся, що це має сенс.

Ось короткий опис визначень разом із запропонованим використанням:

<b>... проміжок тексту, на який звертається увага в утилітарних цілях, не надаючи зайвої важливості і не маючи на увазі альтернативного голосу чи настрою, наприклад, ключові слова в рефераті документа, назви виробів в рецензії, слова , що діють в інтерактивне текстове програмне забезпечення або стаття .

<strong> ... тепер представляє важливість, а не сильний акцент.

<i>... проміжок тексту іншим голосом чи настроєм або іншим чином зміщений від звичайної прози таким чином, що вказує на різну якість тексту, наприклад, таксономічне позначення , технічний термін , ідіоматична фраза з іншої мови , думка або ім'я корабля у західних текстах.

<em> ... вказує на наголос.

(Це всі прямі цитати з джерел W3C, з моїм акцентом. Додано: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements та http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 для оригіналів)

<b>і <i>вони пов'язані зі стилем, тоді як <em>і <strong>семантичні. У HTML 4 перші класифікуються як елементи стилю шрифту , а останні - як елементи фрази .

Як ви вказали правильно, <i>і <em>їх часто вважають подібними, оскільки браузери часто відображають обидва курсивом. Але згідно специфікацій, <em> вказує на наголос і <strong> вказує на сильніший наголос , що цілком зрозуміло, але часто неправильно трактується. З іншого боку, відмінність того, коли використовувати <i>або <b>насправді є питанням стилю.

Хоча <strong>і <em>, звичайно, більш семантично правильні, є певні законні причини використовувати <b>та <i>теги для вмісту, написаного клієнтом.

У такому змісті слова або фрази можуть бути виділені жирним шрифтом або курсивом, і, як правило, нам не доводиться аналізувати семантичні міркування для такого жирного шрифту або курсиву.

Крім того, такий зміст може стосуватися жирних і курсивних слів і фраз, щоб передати певне значення.

Прикладом може слугувати екзаменаційне запитання з англійської мови, яке вказує студенту замінити накреслене слово.

<em>і <strong>споживають більше пропускної здатності, ніж <i>та <b>.

Вони також потребують більше набору тексту (якщо вони не створюються автоматично).

Вони також захаращують екран редактора більшою кількістю тексту. Здається, я згадую, що програмістам подобаються файли менших джерел, якщо вони однакові. (І давайте бути справжніми, вони однакові. Так, є "технічні" (<i> кашель </i>, ага, вибачте) різниці, але це здебільшого підступно для початку.)

За допомогою будь-якого з вищезазначених тегів ви можете використовувати таблиці стилів, щоб налаштувати, як вони виглядають, однак ви хочете, якщо вони потрібні для того, щоб вони виглядали інакше, ніж їх відображення за замовчуванням.

Як говорили інші, <b> і <i> явні (тобто "зробіть цей текст жирним"), тоді як <strong> і <em> є смисловими (тобто "цей текст слід підкреслити").

У контексті сучасного веб-браузера складно помітити різницю (вони, здається, дають однаковий результат, правда?), Але подумайте про читачі екранів для людей із вадами зору. Якби зчитувач екрана натрапив на <i> тег, він не знав би що робити. Але якщо він наштовхується на тег <em>, він знає, що все, що є, слід підкреслити слухачеві. І в цьому ви отримуєте практичну різницю.

<i>, <b>, <em>І <strong>теги , традиційно репрезентативні. Але їм надано нове смислове значення в HTML5 .

<i>і <b>використовувався для стилю шрифту в HTML4. <i>використовувався курсивом і <b>жирним шрифтом. У HTML5 <i>тег має нове смислове значення " альтернативного голосу чи настрою ", а <b>тег має значення стилістичного зміщення .

Приклади використання <i>тегів - таксономічне позначення, технічний термін, ідіоматична фраза з іншої мови, транслітерація, думка, назви кораблів у західних текстах. Як от -

<p><i>I hope this works</i>, he thought.</p>

Приклад використання <b> тегів є ключові слова у витязі документа, назви продуктів в огляді, діючі слова в інтерактивному текстовому програмному забезпеченні, стаття.

Наступний приклад абзацу стилістично зміщений від абзаців, що слідують за ним.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>і <strong>мала значення HTML та сильний наголос у HTML4. Але в HTML5 <em>означає наголошений наголос і <strong>означає важливе значення .

У наступному прикладі має бути мовна зміна під час читання слова перед ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

У цьому ж прикладі ми можемо використовувати <strong>тег наступним чином.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

надати важливості даті події.

Посилання MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Як заявили інші, різниця полягає в тому, що <b>і <i>стилі шрифту жорсткого коду, тоді як <strong>і<em> диктують смислове значення, при цьому стиль шрифту (або інтонаційна розмова веб-переглядача, або те, що є у вас) визначається під час надання тексту (або розмовна).

Ви можете подумати про це як про різницю між "фізичним" стилем шрифту та "логічним" стилем, якщо хочете. Через деякий піз ви можете змінити спосіб відображення <strong>та <em>тексту, скажімо, змінивши властивості в таблиці стилів, щоб додати зміни кольору та розміру або навіть повністю використовувати різні грані шрифту. Якщо ви використовували "логічну" розмітку замість жорсткої "фізичної" розмітки, ви можете просто змінити властивості відображення в одному місці, кожен на вашому аркуші стилів, а потім усі сторінки, на які посилається на цей аркуш стилів, змінюються автоматично , без коли-небудь потрібно їх редагувати.

Дуже струнка, так?

Це також обґрунтування визначення підстилів (на які посилається style=властивість у текстових тегах) для абзаців, комірок таблиці, тексту заголовка, підписів тощо та використання<div> тегів. Ви можете визначити фізичне подання для своїх логічних стилів у таблиці стилів, і зміни автоматично відображаються на веб-сторінках, на які посилається на цей аркуш стилів. Хочете іншого представлення для вихідного коду? Перевизначте шрифт, розмір, вагу, інтервал тощо для вашого стилю "код".

Якщо ви використовуєте XHTML, ви навіть можете визначити власні семантичні теги, і ваш аркуш стилів здійснить перетворення на фізичні стилі та макети шрифту для вас.

Я використовую і <strong> і <b>, власне, саме з причин, зазначених у цій темі відповідей. Бувають випадки, коли сміливий обличчя якогось тексту просто виглядає краще, але це не обов'язково, семантично важливіше, ніж решта речення. Ось приклад зі сторінки, над якою я зараз працюю:

"Вилучає <strong> всі </strong> книги про <b> lacrosse </b>."

У цьому реченні дуже важливим є слово "все", а "lacrosse" - я просто хотів, щоб це було сміливим, оскільки воно являє собою пошуковий термін, тому я хотів візуального розділення. Якщо ви переглядаєте сторінку за допомогою зчитувача екрана, я дійсно не думаю, що їй потрібно не виходити із шляху, щоб підкреслити слово "lacrosse".

Я схиляюсь до того, що більшість веб-розробників використовують один з іншого, але обидва - це добре. <b> це, безумовно, не застаріло, як дехто стверджував. Для мене це лише тонка грань між візуальною привабливістю та змістом.

Використовуйте їх лише у тому випадку, якщо використання класів стилів CSS з будь-якої причини є непереконливим або неможливим (як, наприклад, системи блогу, дозволяйте використовувати лише деякі теги у публікаціях та врешті вбудованих стилях). Ще одна причина - підтримка дуже старих браузерів (деяких мобільних пристроїв?) Або примітивних пошукових систем (які дають бали за <b>або<strong> теги замість аналізу стилів CSS).

Якщо ви можете визначити стилі CSS, використовуйте їх.

Для жирного тексту використовуйте <b> тег

Для тексту важливо використовувати <strong> тег

Для тексту курсивом використовується <i> тег

Для підкресленого тексту за допомогою <em> тегу

<b>і їх <i>слід уникати, оскільки вони описують стиль тексту. Натомість використовуйте <strong>і <em>тому, що описує семантику (значення) тексту.

Як і всі речі в HTML, ви повинні думати не про те, як ви хочете, щоб це виглядало , а про те, що ви насправді маєте на увазі . Звичайно, це може бути лише сміливим та курсивним для вас, але не для читача екрана.

b або я означає, що ви хочете, щоб текст видавався жирним шрифтом або курсивом. сильний або ем означає, що ви хочете, щоб текст був наданий таким чином, що користувач розуміє як "важливий". За замовчуванням - зробити так сильним, як жирним та курсивним, курсив, але деякі інші культури можуть використовувати інше відображення.

Як і рядки в програмі, і b, і я був би "жорстко закодований", а сильний і em буде "локалізований".

"Вони мають такий же ефект. Однак XHTML, більш чиста, новіша версія HTML, рекомендує використовувати <strong>тег. Сильніший краще, оскільки його легше читати - його значення чіткіше. Крім того, <strong>передає значення - показ тексту сильно - в той час, як <b>(для жирного шрифту) передає метод - жирний текст. З міцним, ваш код все-таки має сенс, якщо ви використовуєте таблиці стилів CSS, щоб змінити, якими є способи посилення тексту.

Те саме стосується різниці між <i>і <em>".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Елементи форматування HTML:

HTML також визначає спеціальні елементи для визначення тексту з особливим значенням. HTML використовує такі елементи, як <b> і <i> для форматування виводу, як напівжирний або курсивний текст.

Сміливе та сильне форматування HTML:

Елемент HTML <b> визначає жирний текст без зайвої важливості.

<b>This text is bold</b>

Елемент HTML <strong> визначає сильний текст із додаванням смислової "сильної" важливості.

<strong>This text is strong</strong>

HTML-курсивне та наголошене форматування:

Елемент HTML <i> визначає курсивний текст без зайвого значення.

<i>This text is italic</i>

Елемент HTML <em> визначає підкреслений текст із додаванням семантичного значення.

<em>This text is emphasized</em>

Ви, як правило, намагайтеся уникати <b>і <i>. Вони були представлені для компонування сторінки (зміни способу, як вона виглядає) у ранніх версіях HMTL до створення CSS, як тим часом видалений fontтег, і в основному зберігалися для зворотної сумісності, оскільки деякі форуми дозволяють вбудовувати HTML, і це просто спосіб змінити вигляд тексту (наприклад, за допомогою BBCode [i], ви можете використовувати <i>тощо).

Оскільки створення CSS, компонування насправді нічого не слід робити в HTML, тому CSS створено в першу чергу (HTML == Структура, CSS == Макет). Ці теги можуть також зникнути в майбутньому, адже ви можете просто використовувати CSS та spanтеги, щоб зробити текст жирним / курсивним, якщо вам потрібна "безглузда" зміна шрифту. HTML 5 все ще дозволяє, але заявляє, що маркування тексту таким чином не має значення .

<em>а <strong>з іншого боку говорить лише про те, що щось "підкреслюється" або "сильно підкреслюється", це залишає повністю відкритим для браузера, як зробити це. Більшість браузерів відображатимуться emкурсивом та strongнастільки ж сміливим, як пропонує стандартний стандарт, але вони цього не змушують (вони можуть використовувати різні кольори, розміри шрифту, шрифти тощо). Ви можете використовувати CSS, щоб змінити поведінку так, як вам завгодно. Ви можете зробити emжирне, якщо вам подобається, і strongнапівжирне і червоне, наприклад.

<strong>і <em>є абстрактними (що означає люди, коли кажуть, що це смислово). <b>і <i>є конкретні способи зробити щось "сильне" або "підкреслене"

Аналогія:

І те <strong>, <b>і <em>інше<i>

як

"транспортний засіб" - це "джип"

Ми використовуємо <strong>тег для тексту, який має високий пріоритет для цілей SEO, таких як назва продукту, назва компанії тощо, а <b>простий робить його жирним.

Точно так само ми використовуємо <em>текст, який має високий пріоритет для SEO, в той час, як <i>зробити текст просто курсивом.