Альтернатива тегу HTML Bold

83

Гаразд, отже, я знаю, що в HTML ви можете використовувати <b>тег, але чи не існує "weight=bold"атрибуту, який я можу використовувати в <p>тезі?

Або це в CSS, або Javascript?

html  css 
— Кзкай
джерело
5
Я починаю щедроту з цього питання, щоб сприяти його видимості, оскільки я вважаю головну відповідь практично згубною, незважаючи на те, що вона технічно правильна. Особливо щодо питання, яке є дуже високим за результатами пошуку в Google для "жирного тегу в html5".
— Kzqai
7
Я голосую за цю щедрість смішно. @mipadi має правильну відповідь. Якщо користувач не може зрозуміти, що, можливо, він хоче створити щось інше, ніж pтоді, це його власна проблема. Можливо, вони зададуть інше ТАКЕ питання, яке це прояснить.
— Райлі,

Відповіді:

100

Також враховуйте <strong>тег. Це набагато краще для зчитувачів з екрана, а отже, і для доступності. Пошукові системи також використовувати <strong>тег для визначення важливого вмісту подібно до того , як вони використовують заголовок тег <h1>, <h2>і т.д. (хоча <b>і буде мати однакове значення для пошукових систем). Якщо ви хочете наголосити на важливості тексту, використовуйте <strong>. Якщо ви не хочете підкреслювати важливість, використовуйте <b>тег або font-weight:bold;стиль на елементі або в CSS.

Хоча, якщо ви напівжирний весь абзац, можливо, краще скористатися опцією CSS. Це зменшить вплив на зчитувачі з екрана, і, ймовірно, немає сенсу підкреслювати весь абзац. Але з іншого боку, я бачив, як жирний шрифт наголошувався на цілому абзаці і раніше з поважної причини. У такому випадку - font-weight:bold;це те, що ви хочете використовувати, ймовірно, у класі / стилі.

Зрештою, <strong>, <b>або font-weight:bold;все буде працювати і зробити що - щось подібне візуально (ймовірно , точно такий же), але вони мають дещо інший сенс. Крім того , переконайтеся , що якщо то , що ви закипання є заголовком, використовуйте теги заголовків: <h1>, <h2>і т.д.

— Дарріл Хайн
джерело
37
<b> НЕ застаріло в будь-якому поточному стандарті HTML або XHTML, а також не застаріло навіть у майбутньому HTML 5. <b> і <strong> мають різне значення; <b> означає "жирний стиль тексту". <strong> означає «сильніший акцент», але не диктує стилю тексту; браузери за замовчуванням жирний.
— thomasrutter
2
Широке використання <b> зменшилось, але фактичний елемент не був застарілим відповідно до специфікацій W3C.
— alex
4
<b> ефективно припинено в HTML5 ... і замінено іншим <b> тегом, який має дещо інше значення. Це дивний вибір, але в основному це те, що вони зробили. У будь-якому випадку, його не слід використовувати для оформлення тексту напівжирним шрифтом.
— Чак
@Chuck: що означає новий елемент b?
— alex
1
Зверніть увагу, що сучасні зчитувачі екрана (наприклад, останні версії JAWS та Window Eyes) не передають вміст <em> або <strong> елементів по-різному в звичайних налаштуваннях. Користувач повинен перейти в режим коректури, щоб вплинути на мовний вихід. Хороше читання: Читачам з екрана не вистачає наголосу та i, b, em та сильних елементів у HTML5 .
— Джон Гіббінс,
79

Ви думаєте про властивість CSS font-weight:

p { font-weight: bold; }
— міпаді
джерело
6
Ну, сподіваюся, він не скопіює те, що у вас точно ... зіпсує кілька речей :)
— Дарріл Хайн,
6
Це синтаксично правильний приклад. ОП повинен буде вирішити, як саме він хоче, щоб він використовувався.
— міпаді
6
"Правильний синтаксис" - це не все, я хотів би, щоб відповідь на цю відповідь була кращою, оскільки найкраща відповідь на питання з великою видимістю у пошуках рішення тегу b. Це не сприяє хорошому результату, як тому, що він виступає за стиль елемента, який має інші набагато важливіші цілі (абзаци в тексті загалом), так і тому, що він виступає за використання стилю css перед чистішими альтернативами, такими як <strong>, <h1>, <em> та <mark>. Це технічно працездатно, але практично викликає катастрофу.
— Kzqai
4
@Tchalvak: Я використовую <p>як приклад, тому що OP використовував це як приклад. font-weightпрацює на будь-якому елементі.
— міпаді
7
@mipadi Я це розумію, але особисто, якщо незнайомець попросить у мене "справді гострого ножа, щоб поголити йому обличчя", я ігнорую конкретну термінологію запиту і даю йому бритву.
— Kzqai
23

Якщо значення тексту семантично сильне , використовуйте strongелемент. Якщо ні, використовуйте семантичний іменований клас (клас, який чітко показує значення елемента, не змішуйте презентацію та дані, викликаючи йогоbold тощо) і посилайтеся на нього у своєму CSS.

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

Деякі люди все ще використовують bелемент як презентаційний гачок, але він не застарів , хоча сьогодні більшість людей віддає перевагу strongелементу. Тільки переконайтеся, що вони використовуються правильно.

— Алекс
джерело
4
<b> НЕ застаріло. Він все ще підтримується в HTML 4.01, XHTML 1, XHTML 1.1 і навіть у майбутньому HTML 5. Його припинення є міфом. Інша справа - чи варто його припиняти. Це не так. Див. Також w3.org/TR/html401/index/elements.html
— thomasrutter
Невелика технічність: назву класу не можна називати „семантичною”, оскільки це не контрольований словниковий запас: ніде не існує стандарту, який визначає, що означає „важливе повідомлення” в додатках. Присвоєння імен класам за їхніми функціями все ще є гарною ідеєю, оскільки це сприяє читаності та найкращій практиці.
— thomasrutter
@thomasrutter ... Ось чому я сказав думати . Ім'я не повинно бути семантичним лише для комп’ютерів; люди теж читають html.
— alex
10

<Б> тег живий і здоровий. <b> не припинено, але його використання було роз’яснено та обмежено. <b> не має семантичного значення, а також не передає вокальних наголосів, таких як може говорити читач з екрана. <b> проте передає друковану емпазію , як і тег <i>. Обидва вони мають певне місце в типографіці, але не в розмовному спілкуванні, mes frères .

Цитую з http://www.whatwg.org/

Елемент b представляє простір тексту, який стилістично відхиляється від звичайної прози, не передаючи жодної зайвої важливості, наприклад, ключові слова в рефераті документа, назви продуктів у огляді чи інші проміжки тексту, типовий типографський виклад якого витриманий.
— користувач336882
джерело
8

Ви можете створювати текст або слова Boldза допомогою<b>Text</b> тегу.

Ви також можете використовувати <strong>Text</strong> тег

Головні мітки <h1>, <h2>,<h3> , ... є по замовчуванням виділені жирним шрифтом теги і зробити свій текст Жирний за замовчуванням , якщо ви не зміните свій стиль з допомогою CSS

Вище теги були доступні в HTML, але якщо ви хочете змінити стиль за допомогою, CSSви можете використовувати

font-weight:bold
— Нассер Хаджлу
джерело
7

Ви можете кодувати, як показано нижче.

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— soLomaDCoder
джерело
6

Ви можете використовувати атрибут font-weight на вашому

Наприклад:

<p>This is my paragraph</p>

Ви можете вбудувати свій CSS, як показано нижче:

<p style="font-weight:bold;">This is my paragraph</p>

Або розмістіть його у своїй зовнішній таблиці стилів CSS, як показано нижче:

p{
  font-weight:bold;
}
— Олувасайо Бабалола
джерело
5

Це все історично і датується часом, коли динозаври ходили по землі, а CSS не існувало.

Якщо серйозніше, забудьте про <b/>тег і використовуйте його font-weight:boldв правилі CSS :)

— Джуліан Обюр
джерело
4

<b> є крайнім заходом

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

Більш корисні альтернативи

  • Для важливого тексту: <strong>
  • Для тексту з наголосом на стресі: <em>
  • Що стосується заголовків, не лише заголовків сторінок, але заголовків абзаців та інших типів: <h1> through <h6>

Практичний кромковий футляр для використання <b>

Єдиний випадок, коли я б виступав за використання, <b>це якщо

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

  2. ви не хочете курсиву або заголовка, і

  3. ви збираєтеся використовувати вбудований інтервал або інтервал з класом лише для жирного тексту . (Наприклад: <span class='bold'>)

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

— Кзкай
джерело
4

Ви також можете зробити <p style="font-weight:bold;"> bold text here </p>

— Джон Бокер
джерело
1
вбудовані стилі збираються застаріти в html 5: P
— lock
Ти впевнений? я думав, що лише вбудовані теги стилю повинні бути застарілими, тобто. (big, s, strike, tt, u)
— Джон Бокер,
2
Навіть якщо вони не застаріли, вони майже завжди погана ідея. Ви також можете повернутися до використання тегів <font>.
— tgecho
вбудовані стилі все ще пропонуються для невеликих файлів CSS. Перевірте Yslow та Google PageSpeed. Це дивно, але звучить розумно (менше дзвінків?)
— Янніс Дран,
@Kzqai: Я згоден на 100%. Для мого конкретного випадку я повинен позбутися будь-якого вбудованого стилю через велике завантаження запиту ajax на div. Просто видаляючи будь-який вбудований стиль, це економить кілька мілісекунд часу завантаження.
— Адріан П.
2 

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }
<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>
Розгорніть фрагмент

Сподіваюся, це спрацювало

— zakizakibzr
джерело
1

Можливо, ви хочете використовувати класи CSS?

p.bold { font-weight:bold; }

Таким чином ви все ще можете використовувати <p>як звичайний.

<p>This is normal text</p>
<p class="bold">This is bold text</p>

Дає вам:

Це звичайний текст.

Це жирний текст.

— daalbert
джерело
1

Дуже стара нитка, я знаю. - але для повноти:

я використовую <span class="bold">my text</span>    

коли я завантажую чотири стилі шрифтів: нормальний; жирний; курсив і жирний курсив на моєму веб-сайті через css.

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

Те саме стосується курсиву та курсиву, звичайно, що дає мені додаткову гнучкість.

— Джим Баттерворт
джерело
1

Те, що ви використовуєте замість bелемента, залежить від семантики вмісту цього елемента.

  • Елементи bта strongвже існували довгий час. В HTML 4.01 , який був замінений HTML5, strongбув призначений для використання для "сильного наголосу", тобто сильнішого наголосу, ніж emелемент (який щойно вказав наголос). У HTML 5.2 , strong«являє собою сильну важливість, серйозність або терміновість за його зміст»; аспекти "серйозності" та "терміновості" є новими у специфікації порівняно з HTML 4.01. Отже, якщо ви раніше bпредставляли важливий, серйозний чи терміновий вміст, рекомендується використовувати його strongзамість цього. Якщо ви хочете, ви можете розрізнити ці різні семантики, додавши значущі атрибути класу, наприклад <strong class="urgent">...</strong>і<strong class="warning">...</strong>і використовуйте відповідні селектори CSS, щоб стилізувати такі типи "акценту" по-різному, наприклад, використовуючи різні кольори та розміри шрифтів (наприклад, у вашому файлі CSS:. strong.warning { color: red; background-color: transparent; border: 2px solid red; }).
    Іншою альтернативою bє emелемент , який у HTML 5.2 "представляє наголос на його змісті". Зверніть увагу, що цей елемент, як правило, відображається курсивом (і тому його часто рекомендують як заміну iелементу).
    Я б встояв перед спокусою слідувати порадам деяких інших відповідей, щоб написати щось на зразок <strong class="bold">...</strong>. По-перше, атрибут class нічого не означає в невізуальному контексті (прослуховування книги ePub, перетворення тексту в мову, читання з екрана, шрифт Брайля); по-друге, чому щось було напівжирним.
  • Якщо ви використовували bцілі абзаци або заголовки (на відміну від коротших інтервалів текстів, що є випадком використання в попередньому пункті), я б замінив їх відповідними classатрибутами або, якщо застосовно, ролями WAI-ARIA, наприклад, alertдля прямого ефіру регіон "з важливою і, як правило, чутливою до часу інформацією". Як уже згадувалося вище, слід використовувати "семантичні" classзначення атрибутів, щоб люди, що підтримують код (включаючи вашого майбутнього себе), могли зрозуміти, чому щось напівжирним шрифтом.
  • Не всі способи використання bможуть представляти щось семантичне. Наприклад, коли ви перетворюєте друковані документи в HTML, текст може бути виділений жирним шрифтом із причин, які не мають нічого спільного з акцентом чи значенням, а лише наочним посібником. Наприклад, загальні слова в словниках не є нічим більш "серйозними", "терміновими", ніж інший вміст, тому ви можете зберегти bелемент і необов'язково додати значущий атрибут класу, наприклад, <b class="headword">або замінити тег <span class="headword">на основі аргументу, який bмає відсутність значення в невізуальному контексті.

У вашому файлі CSS (замість використання styleатрибутів, як рекомендували деякі інші відповіді), у вас є кілька варіантів стилізації "напівжирного" або важливого тексту:

  • вказівка ​​різних кольорів (переднього та / або фонового);
  • вказівка ​​різних граней шрифту;
  • зазначення меж (див. приклад вище);
  • з використанням різних ваг шрифтів , використовуючи font-weightвластивість , яке дозволяє більше значення , ніж просто normalі bold, в зокрема normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • тощо

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

— Цундоку
джерело
0

На стороні, позначеній нижче, код також зробить його жирним.

<strong> text here </strong>
— Біной Антоній
джерело
1
... у більшості браузерів ... але лише як побічний ефект від опису тексту як більш сильного акценту.
— Квентін,
0

Ви можете використовувати наступне:

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

АБО

<Strong><p>Some text here </p></strong>

АБО

Ви можете використовувати такий текст, <h1> tagякий чимось схожий на жирний

— KFC
джерело
1
Оскільки p - це, мабуть, рівень блоку, ви хотіли б, щоб сильний зайшов всередину p.
— Kzqai
0

У наш час люди, як правило, використовують конструктори веб-сайтів (CMS, такі як Wordpress), а не кодують власний блог з нуля. Це роблять навіть професійні веб-розробники, оскільки це швидше.

Було б непогано, якби ви могли згадати переваги та речі, про які слід пам’ятати, кодуючи власний блог у реальному житті, наприклад:

  • Більша гнучкість (налаштування)
  • Оплатити доменне ім’я
  • Оплатіть і виберіть веб-хостинг
  • Безпека та обслуговування
  • Авторське право та ліцензія на деякі шаблони та графіку розробників веб-сайтів. Ваш веб-сайт може бути заблокований для певного веб-хостингу, якщо ви використовували конструктор веб-сайтів хосту. Отже, ви не можете перейти на інший веб-хост, тому що якщо ви це зробите, ви більше не зможете використовувати цей шаблон.
  • Виникають проблеми при зверненні за технічною підтримкою у розробника веб-сайтів, коли веб-сайт не працює.
  • Деякі шаблони не зручні для пошукової системи, і це впливає на рейтинг вашого веб-сайту (SEO)

У будь-якому випадку ви можете використовувати css / css3 або JavaScript для створення інтерактивної веб-сторінки. Навіть ви можете завантажити всі свої коди на сервер із форматуванням теми блогу за замовчуванням.

— soLomaDCoder
джерело
-2

Відповідь @Darryl Hein є правильною, незважаючи на один момент - <b>не рекомендується взагалі, оскільки XHTML, оскільки це не семантично .

<strong> означає семантично виділений текст

font-weight: bold означає візуально виділений текст

<strong>може бути налаштовано на css, щоб не бути напівжирним, хоча це звичайне значення за замовчуванням. Його можна зробити червоним, курсивом або підкреслити (хоча всі ці можливості насправді не є зручними для користувача). Використовуйте його для фраз / слів у тексті не через візуальний дизайн, а пов’язаний із їх значенням

font-weight: bold слід використовувати для пов'язаних з дизайном жирних частин, таких як заголовки, підзаголовки, комірки заголовків таблиці тощо.

— Охоронець
джерело
Я не вважаю, що це відповідає дійсності у переглянутому визначенні <b> в html5.
— Kzqai
У той же час ви самостійно писали, що <b>це крайній захід, а я писав, що b не рекомендується. Де суперечність?
— Охорона
3
Вибачте, мав бути більш конкретним у тому, що я мав на увазі, що він має змінене семантичне значення у html 5: ...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”.у html5, відповідно до dev.w3.org/html5/markup/b.html#b . Це причина, яку я вважаю <b>такою: дійсний / в крайньому випадку / не був семантичним / перевизначений як семантичний тощо. Просто тонка різниця.
— Kzqai
-3

Використовуйте <strong>тег, оскільки він більш семантичний. <b>амортизовано, тому краще не використовувати його. Також жирний текст надає більше ваги пошукової оптимізації (SEO), тому завжди краще використовувати справжній, <strong>а не робити <p>або <span>жирний за допомогою CSS.

— Метью Джеймс Тейлор
джерело
4
Не використовуйте речі, оскільки вони "більш семантичні" - використовуйте їх, оскільки вони мають семантику, яка стосується того, що ви пишете. Ми не знаємо, якою є семантика тексту ОП.
— Квентін,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.