Як зробити текст жирним шрифтом у HTML?


153

Я намагаюся зробити якийсь текст жирним за допомогою HTML, але я намагаюся його працювати.

Ось що я намагаюся:

Some <bold>text</bold> that I want emboldened.

Може хтось скаже мені, що я роблю не так?


17
Я погоджуюся, що спочатку його слід шукати в google, але я думаю, що справа в наступному, коли хтось шукає google, він / він буде спрямований на SO, що я вважаю гарною справою. Більше трафіку та людей, які приїжджають на SO.
Андрія

@binfolder, можливо, захоче сказати, чи він дізнався <bold> від Google. Інша, більш загальна можливість: все більше людей розвиваються і без школи, і без читання книг. Ми дізналися цей матеріал в "день перший" або "другий день" з "HTML 101". У них немає запланованих занять.
Джон Сондерс

2
@Andrija: Я погоджуюся направляти їх сюди. Ось чому моя відповідь спрямовувала їх назад до місця, де вони можуть дізнатися відповідь на наступне запитання: "як мені зробити курсив?"
Джон Сондерс

Відповіді:


222

використання <strong>або <b>тег

також ви можете спробувати css <span style="font-weight:bold">text</span>


53

HTML не має <bold>тегу, замість цього вам доведеться використовувати <b>. Однак слід зазначити, що використання <b>є НЕ рекомендується на користь CSS на деякий час тепер . Для цього вам краще використовувати CSS.

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


2
+1 b - HTML 4, ви не повинні коли-небудь сильним / css - це шлях
googletorp

<b> ніколи не було застарілим. Рекомендується проти на користь <em>, <strong>, <h1..6> тощо, так; застарілий, ні.
Ной Медлінг

Чому використання не <b>варто відмовлятись на користь CSS? Це наче сказати, що використання <h* n* >не рекомендує використовувати CSS. Це в стандарті, тому використовуйте його.
Gumbo

Gumbo: Від w3.org/TR/html4/present/graphics.html#h-15.2.1 - "Наступні елементи HTML вказують інформацію про шрифт. Хоча вони не всі застарілі, їх використання перешкоджає на користь аркушів стилів."
Joey

1
Насправді ці елементи повертаються в HTML 5 як "фразові елементи" - наприклад, <small> символізує дрібний друк, тоді як <b> потрібно використовувати для назв книг, я думаю.
НевдоволенийGoat

21

Шлях розмітки:

<strong>I'm Bold!</strong> and <b>I'm Bold Too!</b>

Стильний спосіб:

.bold {
  font-weight:bold;
}

<span class="bold">I'm Bold!</span>

Від: http://www.december.com/html/x1/

<b>

Цей елемент містить текст, який браузер повинен винести як жирний шрифт. Оскільки значення елемента B визначає зовнішній вигляд вмісту, який він вкладає, цей елемент вважається "фізичним" елементом розмітки. Як такий, він не передає значення семантичного елемента розмітки, такого як сильний.

<strong>

Опис Цей елемент дуже текст, який слід сильно підкреслити. Сильніше, ніж елемент em.


3
strongне те саме, що b.
Gumbo

8
Ніколи не говорив, що вони були.
Сампсон

12

У використанні Html:

  • Якийсь <b>текст, </b>який я хочу підбадьорити.
  • Якийсь <strong>текст, </strong>який я хочу підбадьорити.

У використанні CSS:

  • Якийсь <span style="font-weight:bold">текст, </span>який я хочу підбадьорити.

7

Може хтось скаже мені, що я роблю не так? "

"жирний" ніколи не був елементом HTML ("b" - це найближчий збіг).

HTML повинен містити структурований контент; CSS-видавець повинен запропонувати стилі цього вмісту. Таким чином агенти користувачів можуть відкривати структурований вміст корисними стилями та навігаційними елементами керування користувачам, які не бачать запропонований вами сміливий стиль (наприклад, користувачі пошукових систем, повністю незрячі користувачі, які використовують зчитувачі екрана, погано проглядається користувачі, які використовують свої кольори та шрифти, примхливі користувачі, що використовують текстові браузери, користувачі голосовими, говорячими браузерами, як Opera для Windows). Таким чином, правильний спосіб зробити текст жирним залежить від того, чому ви хочете оформити його жирним шрифтом. Наприклад:

  • Хочете відрізнити заголовки від іншого тексту? Використовуйте елементи заголовка ("h1" до "h6") і запропонуйте для них CSV стиль у вашому CSS ("h1, h2, h3, h4, h5, h6 {font-weight: bold;}").

  • Хочете полегшити мітки для форм форм? Використовуйте елемент "label", програмно асоціюйте його з відповідним елементом "select", "input" або "textarea", надавши йому атрибут "for", що відповідає атрибуту "id" для цілі, і запропонуйте сміливий стиль для це у вашому CSS ("label {font-weight: bold;"}).

  • Хочете підкреслити заголовок для групи споріднених полів у формі, наприклад, групі радіовибору? Обведіть їх елементом "fieldset", надайте йому елемент "legend" та запропонуйте для нього CSV стиль ("legend {font-weight: bold;}").

  • Хочете відрізнити підпис таблиці від таблиці, в якій він підписаний? Використовуйте елемент "підпису" та запропонуйте для нього CSV стиль у своєму CSS ("заголовка {font-weight: bold;}").

  • Хочете відрізнити заголовки таблиці від комірок даних таблиці? Використовуйте "th" елемент і запропонуйте для нього CSV стиль у своєму CSS ("th {font-weight: bold;}").

  • Хочете відрізнити назву фільму чи альбому, що посилається, від навколишнього тексту? Використовуйте елемент "cite" з класом ("cite class =" movie-title ") і запропонуйте для нього CSV стиль (" .movie-title {font-weight: bold;} ").

  • Хочете відрізнити певне ключове слово від навколишнього тексту, що визначає або пояснює його? Використовуйте елемент "dfn" та запропонуйте для нього CSV стиль у своєму CSS ("dfn {font-weight: bold;}").

  • Хочете відрізнити якийсь комп’ютерний код від навколишнього тексту? Використовуйте елемент "code" та запропонуйте для нього CSV стиль у своєму CSS ("код {font-weight: bold;}").

  • Хочете відрізнити назву змінної від навколишнього тексту? Використовуйте елемент "var" та запропонуйте для нього CSV стиль у своєму CSS ("var {font-weight: bold;}").

  • Хочете вказати, що якийсь текст додано як оновлення? Використовуйте елемент "ins" та запропонуйте для нього CSV стиль у своєму CSS ("ins {font-weight: bold;}").

  • Хочете злегка підкреслити якийсь текст («Я люблю кошенят!»)? Використовуйте елемент "em" та запропонуйте для нього CSV стиль у своєму CSS (наприклад, "em {font-weight: bold;}").

  • Хочете сильно наголосити на якомусь тексті, можливо, на попередження (" Остерігайся собаки! ")? Використовуйте "сильний" елемент і запропонуйте для нього сміливий стиль у вашому CSS (наприклад, "strong {font-weight: bold;}").

… Ви отримуєте ідею (сподіваємось).

Не можете знайти HTML-елемент з правильною семантикою, щоб виразити / чому / ви хочете зробити цей конкретний текст жирним? Загорніть його в загальний елемент "span", дайте йому змістовне ім'я класу, яке виражає ваше обґрунтування для розрізнення цього тексту ("<span class =" lede "> Дозвольте розпочати цю новинну статтю із речення, яке її підсумовує. </span >) та запропонуйте для нього CSV стиль у своєму CSS (".lede {font-weight: bold;"}. Перш ніж створити власні назви класів, ви можете перевірити, чи є мікроформат (microformats.org) або загальна умова для того, що ви хочете висловити.


Отже, підсумовуючи {link_to_HTML_element {font-weight: bold; }}
Джеймс Н

6

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

<b>This text is bold</b>

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

<strong>This text is strong</strong>

5

Ще один варіант - це зробити за допомогою CSS ...

Наприклад 1

<span style="font-weight: bold;">Hello stackoverflow!</span>

Наприклад 2

<style type="text/css">
    #text
    {
        font-weight: bold;
    }
</style>

<div id="text">
    Hello again!
</div>

4

Ти майже там!

Для жирного тексту ви повинні мати таке: <b> bold text</b>або <strong>bold text</strong>Вони мають однаковий результат.

Робочий приклад - JSfiddle


2
Це питання насправді було задано сім років тому і вже має рішення (правильна відповідь була розміщена через 3 хвилини після того, як його задали). Тож ваша відповідь насправді не додає нічого корисного. Якщо ви хочете знайти проблеми, які ще не були вирішені, введіть answers:0у вікні пошуку вгорі, де ви побачите список усіх питань, на які немає відповідей на них.
Містер Лістер,

1
@MrLister IMO посилання на JSfiddle є досить корисним.
Χpẘ

3

Це просто <b>замість <bold>:

Some <b>text</b> that I want bolded.

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


2

Я думаю, що справжня відповідь - http://www.w3schools.com/HTML/default.asp .


2
Саме так. Якщо ви не знаєте, як зробити жирний текст у HTML, і не знаєте, як це дізнатися, вам слід почати з уроку 1.
myplacedk

2
@Gareth: що ви вважаєте неправильним у w3schools, і що ви вважаєте правильною відповіддю тому, хто не знає HTML-код першого дня? Гаразд, може день два, якщо вони короткі дні.
Джон Сондерс

Це було однією з небагатьох разів, яку я рекомендував w3schools. Живи й учись.
Джон Сондерс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.