Жирный шрифт html тег: Тег | htmlbook.ru

Шрифт 

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Синтаксис

<strong>Текст</strong>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-weight

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STRONG</title>
 </head>
 <body>

  <p><strong>Lorem ipsum dolor sit amet</strong></p>
  <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
  volutpat. <strong>Ut wisis</strong> enim ad minim veniam, quis nostrud exerci 
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид акцентированного текста в тексте

Примечание

Следует отметить, что теги <b> и <strong>, также как <i> и <em>, несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег <b> — относится к тегам физической разметки и устанавливает жирный текст, а тег <strong> — является тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

— HTML | MDN

Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

Элемент <strong> предназначен для контента, который имеет «большое значение», включая вещи большой серьёзности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.

Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS

font-weight для этой цели. Используйте элемент <b>, чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент <em> element для выделения текста, который имеет выраженный акцент.

Другим приемлемым использованием для <strong> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.

<b> против <strong>

Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте.

<b> и <strong> возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <b> или <strong>? Разве они не делают одно и тоже?»

Не совсем. Элемент <strong> для контента, который имеет большее значение, в то время как элемент <b> используется для привлечения внимания к тексту, не указывая на то, что это более важно.

Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают

<strong>). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS font-weight.

Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения — вот что такое семантика.

<em> против <strong>

Добавление к путанице заключается в том, что, хотя HTML 4 определяет <strong> как просто указывающий на более сильный акцент, HTML 5 определяет <strong>

как представляющий «большое значение для его содержимого». Это важное различие.

В то время, как  <em> используется для изменения значения предложения, поскольку делается устный акцент («Я люблю морковь» против «Я люблюморковь«), <strong> используется, для придания предложению порции особого значения (например, «Предупреждение! Это очень опасно.«) Оба элемента <strong> и <em> могут быть вложены для увеличения относительной степени важности или усиленного акцента, соответственно.

Основной пример

<p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p>

Результат:

Маркировочные предупреждения

<p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p>

Это приведёт к:

BCD tables only load in the browser

Почему теги и устарели?

Прошлым летом я прочитал полную спецификацию HTML5 и все предыдущие спецификации HTML (даже заброшенные), а также все спецификации CSS, которые я смог найти, и множество спецификаций XML. Поскольку я люблю семантически насыщенные гипертекстовые документы, позвольте мне дать вам представление о соответствующей семантике HTML в HTML5.

До HTML5 iи bправда были не в моде. Причина заключалась в том, что они по существу работали как

emи strong, соответственно, но с акцентом на представление, а не на семантику (что плохо).

Действительно, iозначало, что текст должен быть выделен курсивом (он говорил что-то о том, как текст должен отображаться на экране). С другой стороны, emозначало, что текст должен быть подчеркнут (что-то говорит о семантике текста).

Здесь есть важное теоретическое отличие. Если вы используете em, пользовательский агент (= браузер) знает, что текст должен быть выделен, поэтому он может отображать его курсивом, если документ отображается на экране (или все заглавные буквы, если форматирование невозможно, или, возможно, даже жирным шрифтом пользователь предпочитает это), он может произносить его по-разному, если документ говорит пользователю и т. д.

Обратите внимание, что акцент действительно делается на семантику. Например, фразы

  • Кошка моя. (= не собака!)
  • Кот мой . (= не твое!)

не имеют того же значения.

То же самое относится к b(жирный шрифт) и strong(сильный акцент).

Общий принцип цифрового письма в целом и создания гипертекста в частности заключается в том, что вы должны разделять контент и стиль. При создании гипертекста это означает, что содержимое должно быть в файле HTML, а стиль должен быть в файле CSS (или нескольких файлах CSS). Другой, но связанный принцип состоит в том, что документ должен быть богат семантикой (например, разметка верхних и нижних колонтитулов, списков, выделений, адресов, областей навигации и т. Д.). Это имеет ряд преимуществ:

  • Для компьютерных программ гораздо проще интерпретировать документ. Эти программы включают в себя браузеры, приложения преобразования текста в речь, поисковые системы и цифровых помощников. (Например, браузер может позволить вам сохранить адрес в адресной книге, если только он может найти и интерпретировать его. Кроме того, вы можете знать, что Microsoft Word может создать и автоматически обновить оглавление для вас, если вы правильно разметите заголовки .)
  • Гораздо проще изменить стиль позже. (Если вы хотите изменить цвет всех заголовков третьего уровня в документе на 860 страниц, вы можете изменить одну строку в таблице стилей. Если бы у вас было смешанное содержимое и презентация, вам пришлось бы просматривать весь документ вручную И, возможно, вы пропустите заголовок или два, что сделает документ непрофессиональным.)
  • Вы можете использовать разные таблицы стилей в зависимости от обстоятельств (документ отображается на экране или печатается на бумаге?). Вы даже можете позволить конечному пользователю выбрать стиль самостоятельно. (Мой веб-сайт предлагает несколько альтернативных таблиц стилей. В IE и FF их можно изменить с помощью меню «Вид».)

Итак, короче говоря, iи bустарели, потому что это были HTML-теги, связанные с представлением , что совершенно неверно.

В HTML5 iи bбольше не рекомендуется. Вместо этого им дают семантическое значение . Так что теперь они на самом деле о семантике, а не о представлении.

Как и прежде, использовать emразмечать внимание: «Кошка на мой.» Но вы используете iпочти во всех других случаях, когда вы будете использовать курсив в печатной работе. Например:

  • Вы используете iдля обозначения таксономических обозначений: «Мне нравится
    R. norvegicus     ».
  • Вы используете iдля разметки фразу на другом языке по сравнению с окружающим текстом: à la carte
  • Вы используете iразметку слова, когда говорите о самом слове: « напиток — это и существительное, и глагол»

Также полезно использовать classатрибут, чтобы указать точное использование (также Google «микроформат» и «микроданные»). И, конечно же, во втором случае вы должны действительно использовать langатрибут, чтобы указать правильный язык. (В противном случае, например , агент преобразования текста в речь может неправильно произносить текст.)

Примерно год назад в спецификации HTML5 также указывалось, что она citeдолжна использоваться для разметки названий книг, фильмов, опер, картин и т. Д .:

  • Что вы думаете о нимфоманка ?

Наконец, давным-давно dfnиспользуется для разметки определяющего экземпляра фразы в тексте (например, математическое определение или определение термина):

  • Группа представляет собой набор X оснащен одной бинарной операцией * такой , что …

Таким образом, курсив в вашей печатной книге, который может означать много разных вещей, представлен четырьмя различными тегами HTML5, что действительно здорово, потому что семантика хороша, как я пытался убедить вас об этом ранее. (Например, вы можете попросить свой браузер составить список всех определений в тексте, чтобы убедиться, что вы знаете их все до экзамена.)

Обращаясь к strongи b, спецификация HTML5 говорит, что это strongследует использовать для разметки важной части текста, например, предупреждения или какого-либо очень важного слова в предложении. С другой стороны, bследует использовать для разметки то, что должно быть легко найти в тексте, например ключевые слова. Я также использую в bкачестве заголовков в элементах списка (LI).

Как сделать наклонный шрифт. Как сделать в html курсивный шрифт у текста? Выделение текста жирным и курсивом — теги,, и

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

  • Тег b ;
  • Тег strong ;
  • CSS-свойство font-weight .

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег

Тег b HTML применяется следующим образом:

Конструктор сайтов «Нубекс»

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong , давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.

Используется тег strong аналогичным образом:

Конструктор сайтов «Нубекс»

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong .

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight . Применяется оно следующим образом:

Жирный текст с помощью CSS — «Нубекс»

Наши сайты — это, действительно, огромный шаг в веб-разработке.

Мы делаем по-настоящему качественные сайты.

Доверьтесь нам, и мы вас не подведем.

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Продолжаем работать со шрифтами и в этом уроке мы рассмотрим то, как задаются свойства придающие шрифту жирный или курсивный вид. До этого мы уже рассматривали, как создать жирный или курсивный шрифт с помощью HTML тегов. Но как мы уже знаем, HTML не должен использоваться для оформления документа, он предназначен только для создания разметки, структуры страницы, поэтому надо оформлять все через таблицу стилей CSS . И теперь давайте рассмотрим, как задаются такие свойства.

Курсивный шрифт CSS

Оформлять текст курсивом помогает свойство font-style: ; , которому прописывается значение italic , что обозначает «Стиль шрифта — курсивный».

Теперь давайте представим, что на странице много абзацев и одни из них нужно выделить курсивным шрифтом. Что мы делаем, для нужного абзаца создаем класс, а затем укажем, что элемент с таким классом должен быть курсивным.

HTML

HTML страница

Четвертый абзац Четвертый абзац Четвертый абзац

Задаем свойство для курсивного шрифта.

Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML уроке мы разбирали тег логического уровня . Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег и ему прописываем класс class= «italic»> . В результате получаем вот такую запись:

HTML

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

Italic{ font-style: italic; }

Теперь второй абзац и часть четвертого абзаца отображаются курсивом. В демо это наглядно показано.

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ; другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal то есть насыщенность шрифта нормальная, а задав значение bold он примет полужирный вид.

Bold{ font-weight:bold ; }

Так же можно задавать значение насыщенности цифрами от 100 до 900 с шагом 100 . Значение normal приравнивается цифре 400 , а значение bold цифре 700 . Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700 . Выглядит такое условие следующим образом.

Bold{ font-weight:700 ; }

В html коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег class= «italic»> . Рассмотрим маленький пример:

HTML

HTML страница

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

Bold{ font-weight: bold; }

В результате мы выделили в жирный текст часть четвертого абзаца, где он в то же время и курсивный, и весь пятый абзац. Вот такие еще два свойства мы изучили. Они достаточно часто используются, поэтому стоит запомнить, что:

  • Курсивный шрифт задается: font-style:italic ; .
  • Жирный шрифт задается: font-weight:bold ; .
  • Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal ; или значение font-weight:400 ; , что в данном случае означает одно и тоже.

Вот мы с вами рассмотрели еще два свойства шрифтов. Смотрите в Демо то, что должно было у Вас получиться в конечном итоге, а мы переходим к изучению следующих свойств.

Один из наиболее простых способов выделить в тексте слово или фразу — использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный страницы с легкостью позволяет выделять слова с помощью различного начертания — курсивного, подчеркнутого, жирного.

Жирный шрифт как способ выделить главное

Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга .

Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг . После последней буквы в тексте, который следует выделить, ставится закрывающий тэг . Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.

Другие варианты выделения

Итак, мы выяснили, что можно выделить текст с помощью другого начертания. Определились, что наиболее просто и в то же время эффективно использовать жирный шрифт HTML. Теперь поговорим о других вариантах выделения.

Так, можно выделить текст курсивом с помощью парного тэга , подчеркнуть его с помощью . Это наиболее простые способы выделения текста.

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать . Сделать текст моноширным поможет парный тэг . Если вам нужно создать верхний индекс, используйте , нижний — .

При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное — запомнить данные коды или записать их.

Использование нескольких шрифтов

Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.

При этом надо помнить одно — все тэги должны закрываться последовательно. Например, правильная запись может быть такой:

  • выделенный текст .

Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:

  • выделенный текст .

В таком случае браузер запутается и не поймет, что именно вы от него хотите.

Кстати, тут можно отметить, что три варианта начертания — жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.

Выводы

Для выделения текста широко используются не только разнообразные цвета и оттенки, разный размер и тип шрифта, но и его начертание. Причем именно с помощью другого очертания можно красиво и легко выделить тот или иной фрагмент текста.

Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы — наиболее яркий и заметный, а потому используется наиболее часто для выделения.

Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: .

Обычный текст выделенный важный фрагмент текста. Обычный текст.

Жирный текст с помощью тега b

Обычный текст текст жирным шрифтом. Обычный текст.

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.

Свойство CSS внутри атрибута style:

Текст жирным шрифтом.

Текст жирным шрифтом.

Текст обычным шрифтом.

Текст жирным шрифтом.

Что делать, если выделить текст жирным не получается

Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).

Html жирный текст css

Поддержка браузерами

12.0+4.0+1.0+2.0+3.5+1.3+

Описание

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .

Если у вас есть элемент, для которого по умолчанию задан жирный шрифт, или он наследует такой шрифт от родительского элемента, то можно уменьшить насыщенность шрифта с помощью значения normal .

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

Вы также можете устанавливать значения свойства с помощью чисел от 100 до 900, но это тоже не очень хорошо поддерживается шрифтами и браузерами и редко применяется.

Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:

  • Через html тег и
  • Через свойство CSS font-weight

Жирный шрифт через html тег

и

Весь текст заключенный в html теги и будет жирным. Первый тег состоящий из необычной буквы «b» произошло в сокращение от английского слова «bold».

Разница между двумя тегами визуально отсутствуют. Среди SEO-оптимизаторов бытует мнение, что для поисковых систем оказывает большее влияние, когда мы хотим выделить ключевое слово.

Преобразуется на странице в

Обычный шрифт.

Жирный шрифт через тег b

Обычный текст. Жирный текст через тег strong

Жирный шрифт через свойство CSS font-weight

В CSS есть свойство font-weight, которое отвечает за толщину написание букв.

Синтаксис CSS font-weight

  • bold – жирное значение шрифта (аналог 700)
  • normal (по умолчанию) – нормальное значение шрифта (400)
  • bolder/lighter – шрифт должен быть больше/меньше, чем у родителя
  • inherit – принять значение предка (родителя)

В нашем случае, для жирности шрифта необходимо применить свойство bold для придания шрифту «толщины».

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

  • Тег b;
  • Тег strong;
  • CSS-свойство font-weight.

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег

Тег b HTML применяется следующим образом:

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.

Используется тег strong аналогичным образом:

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Тег в HTML для выделения шрифта жирным

Автор Андрей На чтение 2 мин. Просмотров 24 Опубликовано

Тег <b> формирует жирный шрифт в HTML. Пример:

See the Pen
тег b by Андрей (@adlibi)
on CodePen.

Примечание. Согласно спецификации HTML5, <b> следует использовать как ПОСЛЕДНЕЕ средство, когда нет более подходящего варианта. В спецификации указано, что заголовки должны быть обозначены тегами от <h2> до <h6>, акцентированный текст (emphasized) должен быть обозначен тегом <em>, важный текст должен быть обозначен <strong>, а выделенный / подсвеченный участок должен обозначаться <mark>.

Отличие между <b> и <strong>

Оба тега оказывают примерно одинаковое воздействие на отображение текста в большинстве применяемых браузеров – буквы становятся толще. Но, хотя внешний эффект кажется одинаковым, между ними есть фундаментальная разница по заложенному в них смыслу.

<b> – это просто стиль – шрифт должен выглядеть более жирным.

<strong> – это показатель того, что здесь есть что-то важное для понимания. Например, программы для чтения текста должны читать такие участки более низким голосом, чтобы придать им большее значение.

Замена с помощью CSS

Большинство браузеров отображают элемент <b> со следующим значением жирности по умолчанию:

b {
  font-weight: bold;
}

Таким образом вы можете сделать жирный текст и без специальных тегов, а только с помощью стилей, используя инструкцию: font-weight: bold.

Ниже пример, когда вместо <b> используем <span>, стилизуя его жирным.

See the Pen
жирный текст через span by Андрей (@adlibi)
on CodePen.

HTML Форматирование

С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты «рукописного начертания», вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.

Что такое семантика?

Семантика в HTML является практикой предоставления смысла и структуры содержимого документа с помощью соответствующего тега. Семантический код описывает значение содержимого документа, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов:

  1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем «легче» документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
  2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
  3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент <strong>. Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги <strong> и <b>. Важно понимать семантическую разницу между ними.

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

HTML-код с тегами <strong> и <b>:

<!-- Важное значение -->
<p><strong>Внимание:</strong> крутой спуск.</p>
  
<!-- Стилистическое выделение -->
<p>Это рецепты <b>оливье</b> и <b>винегрета</b>.</p>

Пример: важный и жирный текст


Внимание: крутой спуск.
  
Это рецепты оливье и винегрета.
<!-- Важное значение -->
<p><strong>Внимание:</strong> крутой спуск.</p>
  
<!-- Стилистическое выделение -->
<p>Это рецепты <b>оливье</b> и <b>винегрета</b>.</p>

Курсивный текст

Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент <em>. Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.

Тег <em> применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега <i>, который применяется просто для создания курсивного текста.

HTML-код с тегами <em> и <i>:

<!-- Акцент на слове-->
<p>Я <em>люблю</em> Родину!</p>

<!-- Просто курсив -->
<p>Имя <i>Виктория</i> означает победа.</p>

Пример: акцент и курсив

Я люблю Родину!
Имя Виктория означает победа.
<!-- Акцент на слове-->
<p>Я <em>люблю</em> Родину!</p>

<!-- Просто курсив -->
<p>Имя <i>Виктория</i> означает победа.</p>

Теги <small> и <big>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Тег <big> наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами <small> и <big>:

<p>Это обычный текст.</p>
<p><small>Это текст с меньшими буквами.</small></p>
<p><big>Это текст с большими буквами.</big></p>

Пример: уменьшенный и увеличенный шрифт

Это обычный текст.
Это текст с меньшими буквами.
Это текст с большими буквами.
<p>Это обычный текст.</p>
<p><small>Это текст с меньшими буквами.</small></p>
<p><big>Это текст с большими буквами.</big></p>
Внимание: Это чисто презентационный код, элемент <big> удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента <big> веб — разработчики должны использовать CSS свойства.

HTML тег <mark>

Тег <mark> используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера <mark>выделяется желтым цветом</mark>как чернильным маркером.

HTML тег <del>

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del>как перечеркнутый</del>.

HTML тег <ins>

Тег <ins> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какой фрагмент содержимого был добавлен во время последнего обновления документа. Браузеры обычно помечают текст в контейнере <ins>как подчеркнутый</ins>.

HTML тег <sub>

Тег <sub> отображает текст в нижнем индексе. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.Такой текст на практике может быть использован, например для написания различных формул <sub>в нижнем индексе</sub>.

HTML тег <sup>

Тег <sup> отображает текст в верхнем индексе. Текст отображается уменьшенным размером и располагается выше, чем базовая линия остальных символов строки. Такой текст на практике может быть использован, например для написания различных формул или сносок <sup>в верхнем индексе</sup>.

Перевод строк и горизонтальные линии

Тег <br> (перевод строк)

Как вы уже видели раньше, тег <p> позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег <br>. Одним из видимых с первого взгляда отличий данного тега от <p> является отсутствие отступов после и перед тегом <br>. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент <br> в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег <hr> (горизонтальная линия)

Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег <hr>. Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Это первый абзац.

Это второй абзац.

Это линия:

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

<p>Эти строки отделены друг от друга с помощью абзаца (p):</p>
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>
<p>Это линия:</p><hr>
<p>Эти строки отделены друг от друга с помощью тега br:<br>
Наша Таня громко плачет<br>Уронила в речку мячик</p>

HTML-код с тегами <mark>, <del>, <ins>, <sub>, <sup>:

<p>В тексте есть слово: <mark>удача</mark>.</p>
<p>Слово <del>беда</del> было удалено из текста.</p>
<p>Слово <ins>победа</ins> было добавлено в текст.</p>
<p>Формула воды: Н<sub>2</sub>O.</p>
<p>Скорость ветра: 20м<sup>3</sup>/сек.</p>

Пример: форматирование текста

В тексте есть слово: удача.
Слово беда было удалено из текста.
Слово победа было добавлено в текст.
Формула воды: Н2O.
Скорость ветра: 20м3/сек.
<p>В тексте есть слово: <mark>удача</mark>.</p>
<p>Слово <del>беда</del> было удалено из текста.</p>
<p>Слово <ins>победа</ins> было добавлено в текст.</p>
<p>Формула воды: Н<sub>2</sub>O.</p>
<p>Скорость ветра: 20м<sup>3</sup>/сек.</p>

Задачи

Итоговое задание

[5-10]

На этом уроке вы познакомились с элементами, предназначенными для разметки небольших фраз и отдельных слов. Особое внимание было посвящено логической разметке текста с помощью тегов позволяющими указать на важность слова или фразы, а не только визуальному форматированию.

Пришло время повторить изученное и выполнить пять несложных заданий:

Семантически сильное слово

Выделите слово «профессионалом» жирным шрифтом, обозначив тем самым тем самым особую семантическую важность этого слова.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Семантически сильное слово</title>  
 </head>
 <body>
  <p>Ты должен стать профессионалом своего дела</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Семантически сильное слово</title>  
 </head>
 <body>
  <p>Ты должен стать <strong>профессионалом</strong> своего дела</p>
 </body>
</html>

Акцент на слове

Сделайте акцент на слове «полный». При этом визуально это слово должно отображаться курсивом.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Акцент на слове</title>  
 </head>
 <body>
  <p>За год Земля делает полный оборот вокруг Солнца.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Акцент на слове</title>  
 </head>
 <body>
  <p>За год Земля делает <em>полный</em> оборот вокруг Солнца.</p>
 </body>
</html>

Фоновое выделение

Создайте словно маркером фоновое выделение на слове «равномерно».

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фоновое выделение</title>  
 </head>
 <body>
  <p>Когда тело падает — его скорость равномерно возрастает.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фоновое выделение</title>  
 </head>
 <body>
  <p>Когда тело падает — его скорость <mark>равномерно</mark> возрастает.</p>
 </body>
</html>

Верхний индекс

Примените форматирование к тексту так, чтобы цифра «2» оказалась в верхнем индексе.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний индекс</title>  
 </head>
 <body>
  <p>Единица измерения площади — м2.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний индекс</title>  
 </head>
 <body>
  <p>Единица измерения площади — м<sup>2</sup>.</p>
 </body>
</html>

Эффект перечеркивания

Примените к слову «чая», которое должно быть удалено, эффект перечеркивания.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перечеркивания</title>  
 </head>
 <body>
  <p>Я люблю утром выпить чашечку чая кофе.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перечеркивания</title>  
 </head>
 <body>
  <p>Я люблю утром выпить чашечку <del>чая</del> кофе.</p>
 </body>
</html>


: элемент «Привлечь внимание» — HTML: язык разметки гипертекста

Элемент HTML «Привлечь внимание к» ( ) используется для привлечения внимания читателя к содержимому элемента, которому в противном случае не придается особого значения. Ранее это называлось элементом Boldface, и большинство браузеров по-прежнему выделяют текст жирным шрифтом. Однако не следует использовать для стилизации текста; вместо этого вы должны использовать свойство CSS font-weight для создания полужирного текста или элемент , чтобы указать, что текст имеет особое значение.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

  • Используйте для таких случаев, как ключевые слова в резюме, названия продуктов в обзоре или другие отрывки текста, типичное представление которых будет выделено полужирным шрифтом (но не включая какое-либо особое значение).
  • Не путайте элемент с элементами , или .Элемент представляет текст определенной важности , делает некоторый акцент на тексте, а элемент представляет текст определенной важности . Элемент - не передает такую ​​специальную семантическую информацию; используйте его только тогда, когда другие не подходят.
  • Точно так же не помечайте заголовки и заголовки с помощью элемента . Для этого используйте теги от

    до
    .Кроме того, таблицы стилей могут изменить стиль по умолчанию для этих элементов, в результате чего не обязательно будут отображаться жирным шрифтом.
  • Рекомендуется использовать атрибут class в элементе - для передачи дополнительной семантической информации по мере необходимости (например, - для первого предложения в абзаце). Это упрощает управление несколькими вариантами использования , если ваши стилистические потребности меняются, без необходимости изменять все его варианты использования в HTML.
  • Исторически элемент предназначался для выделения текста жирным шрифтом. Информация о стилях устарела с HTML4, поэтому значение элемента было изменено.
  • Если нет смысловой цели для использования элемента , вы должны использовать свойство CSS font-weight со значением «bold» вместо этого, чтобы сделать текст полужирным.
  

  В этой статье описывается несколько элементов  текстового уровня .В нем объясняется их использование в документе  HTML .


Ключевые слова отображаются со стилем по умолчанию элемента , скорее всего, жирным.

Результат

Таблицы BCD загружаются только в браузере

HTML-тег

Тег HTML используется для создания элемента «b», который представляет полужирный текст в документе HTML.

Тег следует использовать для разметки текста как полужирного без придания дополнительной важности, например, в аннотациях статей, где начало статьи выделено полужирным шрифтом. Для придания особой важности следует использовать , а не .Чтобы подчеркнуть особую важность, используйте тег . Чтобы выделить текст, используйте тег .

Синтаксис

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

Как это:

полужирный текст

Примеры

Наименования продуктов

Вот пример использования элемента для разметки названий продуктов в обзоре двух продуктов.

iPhone 5s немного обогнал Samsung Galaxy S4 во всех наших тестах, однако мы рекомендуем покупать оба.

Артикул Lede

.

Вот пример использования элемента для разметки первого абзаца статьи.

Статья lede (или lead ) обычно используется вместе с заголовком или заголовком. Он предшествует основной части статьи и дает читателю основное представление о том, о чем рассказывается.

Журналистские статьи делают упор на привлечение внимания читателя, тогда как статьи в эссе резюмируют схему аргументов и выводов, которые следуют в основной части эссе.

<статья>

Ученый утверждает, что наука догматична

Биолог Руперт Шелдрейк утверждает, что современная наука сдерживается системами убеждений ученых, и что многие ученые не знают своих собственных предположений.

В своей книге Science Set Free (известной в Великобритании как The Science Delusion ) Шелдрейк излагает десять догм основной науки. Он утверждает, что самое большое научное заблуждение состоит в том, что наука уже знает ответы. Детали еще предстоит проработать, но, в принципе, принципиальные вопросы решены.

Шелдрейк отмечает, что современная наука основана на утверждении, что вся реальность материальна или физическая.Нет реальности, кроме материальной реальности ...

против против

Помните, что не следует использовать для придания особой важности.Чтобы подчеркнуть особую важность, используйте тег .

Также не следует использовать - для выделения акцента. Для выделения акцента используйте тег .

Ниже приведены примеры правильного использования каждого из этих тегов.

iMac - продукт Apple, который был впервые анонсирован в 1998 году.

Предупреждение : крокодилы прямо сейчас плавают в бассейне.

Если вы верите в то, что что-то правда, или верите в неправду, вы используете веру, чтобы сгладить дискомфорт незнания. - Том Кэмпбелл

Атрибуты

Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить дополнительную информацию о том, как этот элемент должен выглядеть или вести себя.

Элемент принимает следующие атрибуты.

Атрибут Описание
Нет

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех элементов HTML. Следовательно, вы можете использовать эти атрибуты с тегом , а также со всеми другими тегами HTML.

  • ключ доступа
  • автокапитализация
  • класс
  • контентный
  • данные- *
  • директор
  • перетаскиваемый
  • скрыто
  • id
  • режим ввода
  • -
  • идентификатор товара
  • itemprop
  • itemref
  • позиции сфера действия
  • тип позиции
  • язык
  • часть
  • слот
  • проверка орфографии
  • стиль
  • tabindex
  • титул
  • перевести

Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».

Обработчики событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

  • onabort
  • onauxclick
  • onblur
  • отмена
  • oncanplay
  • может пройти через
  • обмен
  • onclick
  • вкл.
  • контекстное меню
  • копия
  • резервное копирование
  • врезка
  • ondblclick
  • ондраг
  • ондрагенд
  • ондрагентер
  • ондрагэксит
  • ondragleave
  • вперед
  • ондрагстарт
  • на капле
  • на срок замены
  • одноразовый
  • завершено
  • ошибка
  • onfocus
  • onformdata
  • на входе
  • недействительно
  • нажатие клавиши
  • нажатие клавиши
  • onkeyup
  • onlanguagechange
  • загрузка
  • загруженные данные
  • загруженные метаданные
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • на мышке над
  • onmouseup
  • паста
  • вкл. Пауза
  • в игре
  • в рабочем состоянии
  • в процессе
  • обмен
  • возврат
  • размер
  • в прокрутке
  • нарушение политики безопасности
  • востребовано
  • в обращении
  • при выборе
  • на смену
  • установленная
  • при подаче
  • приостановлено
  • ontimeupdate
  • рычаг
  • по объему Изменение
  • ожидает
  • на колесе

Большинство атрибутов содержимого обработчика событий можно использовать для всех элементов HTML, но некоторые обработчики событий имеют определенные правила, касающиеся того, когда их можно использовать и к каким элементам они применимы.

Подробнее см. Атрибуты содержимого обработчика событий HTML.

Учебное пособие по полужирному тексту

HTML - Как использовать тег

В этой статье мы узнаем, как использовать тег и чем он отличается от тега .

Что такое тег

в HTML?

Тег - используется для выделения части текста полужирным шрифтом без особой важности.Вот пример использования тега -.

  
 Это пример  полужирного текста.

Согласно HTML Living Standard, тег может использоваться со следующими примерами:

ключевых слов в аннотации документа, названия продуктов в обзоре, ключевые слова в интерактивном текстовом программном обеспечении или в статье.

Вот пример использования

для названия продукта в обзоре.
  
 Наушники  Sennheiser IE 300  хорошо ложатся в уши и обладают невероятным звуком.

Тег предназначен для привлечения внимания пользователя к фрагменту текста. Он не должен иметь какого-либо значения или передавать тон срочности или серьезности.

Это было бы неправильным использованием тега .

  
  ВНИМАНИЕ !!  Эта зона опасна.

Подходящим тегом для этой ситуации будет тег , потому что он передает ощущение серьезности.

Различия между тегами

и в HTML

Когда я впервые начал изучать HTML, я подумал, что тег и тег - это одно и то же. Отчасти путаница заключается в том, что в большинстве браузеров они имеют одинаковый стиль жирного шрифта по умолчанию.

Одно из ключевых отличий заключается в том, что теги следует использовать, когда текст имеет большое значение, имеет ощущение срочности или серьезности. С другой стороны, теги следует использовать для привлечения внимания к диапазону текста без повышенной важности.

Этот пример тега сообщает пользователю, какой элемент списка следует прочитать первым и что он имеет большее значение, чем два других элемента списка.

  
 Список дел на понедельник: 


    
    
  •   Оплачивать аренду.  
     
    • 
    
  •  
     Начало курсовой работы. 
     
    • 
    
  •  
     Сходите за продуктами. 
     
    •

Еще одно ключевое отличие состоит в том, что теги не должны использоваться в заголовках и заголовках, тогда как теги могут.

Вот пример использования тега для придания важности названию главы.

   
 Глава 5: 
 Битва

Обычно в тег добавляют атрибут класса, чтобы добавить больше семантического значения.

Если у вас есть серия предложений, вы можете добавить такой класс к первому тегу

, и это пометит его как ведущее предложение.

  <статья>
     
 Мальчик воссоединился с биологической матерью 
 
    
  Шестилетний мальчик неожиданно встречает свою биологическую мать в местном продуктовом магазине.  

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

    [...]

Следует ли использовать тег

для стилизации текста в HTML?

В HTML 5 нецелесообразно использовать тег для стилизации текста.Предпочтительный метод стилизации - использовать свойство CSS font-weight .

Пример использования ключевого слова жирным шрифтом 

  
 Я использую CSS, чтобы сделать текст жирным. 

  
  .demo-para {
  font-weight: жирный;
}

Пример использования числовых значений 

  .demo-para {
  font-weight: 700;
}

Заключение

Хотя теги и могут выглядеть в браузере одинаково, они имеют разные значения.Важно знать разницу между ними, чтобы использовать их надлежащим образом.

теги используются для привлечения внимания к диапазону текста, но не имеют особого значения. С другой стороны, теги следует использовать, если текст передает ощущение важности, серьезности или срочности.

Надеюсь, вам понравилась эта статья и вы узнали, когда использовать теги .

HTML-тег

- GeeksforGeeks

Тег в HTML используется для обозначения важности текста.Текст написан внутри тега жирным шрифтом. Вы можете сделать это с помощью CSS. Также есть аналогичный тег tag, который оказывает аналогичное влияние на контент.
Синтаксис: 

  Содержание ...

Пример 1:

HTML

< html >

< корпус >

< h2 > GeeksforGeeks 000 000 000 000 000 < p > Это обычный абзац Текст тега p >

< b Текст тега / b >

корпус >

html >

Вывод:

Пример 2:



HTML

HTML

HTML

HTML

< html >

< корпус >

<9ee0005 000 Geo 000 000 000

< p > Это обычный абзац Текст тега p >

style = "font-weight: bold" > Полужирный текст с использованием CSS 900 04 p >

корпус >

000390

9089 :

Поддерживаемые браузеры:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

HTML Bold Tag Использование и примеры - POFTUT

HTML предоставляет различные теги для стилизации.Полужирный тег используется для выделения данного текста полужирным шрифтом, который является тикером, чем обычный. Тег Bold используется для начала и конца текста, чтобы указать текст, который мы хотим выделить жирным.

Жирный тег

Как указывалось ранее, тег жирного шрифта используется для указания начала и конца текстового блока, который мы хотим выделить жирным. Полужирный тег действует только в обычном тексте, что означает, что использование полужирного тега в тегах заголовков, таких как h2, h3, не имеет никакой разницы.

  
   
       
 
 Этот заголовок выделен жирным шрифтом   
       
 Этот заголовок не выделен жирным шрифтом 
 
       Этот текст выделен полужирным шрифтом 
      

      Этот текст не выделен жирным шрифтом
Жирный тег

Сделайте жирным с помощью CSS

Полужирный шрифт обычно используется в качестве тега внутри тела HTML, окружая текст.Но мы можем выделить выделенный жирным шрифтом текст с помощью CSS. Атрибут CSS называется font-weight , как показано ниже. В этом примере мы определим класс CSS с именем жирным шрифтом и применим его с помощью тега span , как показано ниже.

  
   
       Этот текст выделен полужирным шрифтом  

      Этот текст не выделен жирным шрифтом
      
 Содержимое этого блока выделено жирным шрифтом 

      Это содержимое div не выделено жирным шрифтом
Сделайте жирным с помощью CSS

HTML не имеет тега

Некоторые начинающие веб-программисты и дизайнеры предполагают, что существует тег с именем .Это неправда. Полужирный тег представлен как без . Если мы попытаемся использовать в качестве тега, он не будет работать, как показано ниже.

  
   
       Этот текст выделен полужирным шрифтом  

       Этот текст не выделен жирным шрифтом 
      

      Этот текст не выделен жирным шрифтом

Элементы форматирования текста

Тег

Bold называется элементом форматирования текста, и есть другие элементы форматирования текста, которые можно использовать для различных целей.Некоторые элементы или теги форматирования текста могут быть похожи на полужирный, но это не то же самое.

  • используется для полужирного текста.
  • используется для важного текста.
  • используется для курсивного текста, где текст будет наклонен
  • используется для выделенного текста
  • используется для выделения текста
  • используется для уменьшения текста
  • < del> удаленный текст
  • используется для вставленного текста
  • используется для подписанного текста
  • используется надстрочный индекс, как в формулах

Полужирный текст Альтернативы тегов Strong Tag, Emphasize, Mark, Head1

Есть некоторые теги, которые похожи на полужирный. Изучите их, которые используются для чего и отличия от тега .

  • используется для стилистического отличия от другого текста и не имеет дополнительной важности, ключевого слова, названия продукта.
  • используется для выделения акцента в его содержании. Это может быть ключевое слово, название продукта и т. Д.

  • ,

    ,

    ,… используются для создания заголовков, которые просто описывают текстовые разделы или части.

  • используется для ссылки на ключевое слово, имя, заголовок и т. Д. В конце документа.
  • используется для выделения некоторых важных моментов в данном тексте.
  
   
       Этот текст выделен полужирным шрифтом  

       Это длинный текст  

       Этот текст отмечен  

       
 Это текст h2 
 
      

       Это сильный текст
Альтернативы жирным тегам Сильный тег, выделить, пометить, заголовок1

HTML-тег b - изучение HTML

HTML-тег используется для выделения жирным шрифтом той части текста, которую мы хотим сделать более очевидной для пользователя.Тег выделяет только часть текста, он не имеет смысловой нагрузки (в том числе для поисковых систем).

В HTML 5 рекомендуется использовать тег только в крайнем случае, когда невозможно использовать другие теги.

Избегайте использования тега для заголовков и заголовков. Вместо этого вы можете использовать теги

-

. Этот тег предпочтительно использовать для пометки ключевых слов, названий продуктов или других фрагментов текста.

Синтаксис¶

Тег приходит попарно.Контент записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

: ¶
  

  
     Название документа 
  
  
    
  Этот раздел текста  выделен жирным шрифтом
Попробуйте сами »

Результат¶

Внешний вид содержимого контейнера определяется по умолчанию, но жирный шрифт можно изменить с помощью CSS.

Свойство CSS font-weight также можно использовать для выделения полужирного текста.

Пример свойства font-weight для выделения текста жирным: ¶ 

  

  
     Название документа 
    <стиль>
      .жирный текст {
        font-weight: 700;
      }
    
  
  
    

       Этот раздел текста 
      выделено жирным шрифтом.
Попробуйте сами »

vs

Оба элемента и отображают текст жирным шрифтом. Разница между ними в том, что тег обозначает текст определенной важности, а тег содержит любую информацию о тексте. Однако лучше избегать тега . Вместо этого вы можете использовать «жирный» значение свойства CSS font-weight.

Атрибуты¶

Тег поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать тег

?

Общие свойства для изменения визуального веса / акцента / размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
  • CSS свойство font-family определяет приоритетный список из одного или нескольких имён семейств шрифтов и / или родовых имён семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть жирным или толстым.
  • Свойство CSS text-transform управляет регистром текста и заглавными буквами.
  • Свойство CSS text-decoration задает украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста в теге

:
  • Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow определяет, как пользователь должен сообщить о переполненном содержимом, которое не отображается.
  • CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства, на которые стоит обратить внимание для тега

:

HTML b (полужирный) Тег - Studytonight

HTML тег или полужирный тег используется для выделения текста жирным на веб-странице. HTML предоставляет нам набор тегов / элементов, которые используются для форматирования текста или простыми словами, мы можем обеспечить базовый стиль текста, применив некоторые функции форматирования, такие как полужирный , курсив и т. Д.

Теперь мы узнаем о теге или жирным шрифтом , теге .

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

  • Текст, заключенный внутри начального и конечного тегов тега , отображается полужирным шрифтом в веб-браузере.

  • Этот тег может использоваться для выделения важного текста содержимого, отображаемого на веб-странице.

  • Кроме того, это встроенный элемент .

HTML

Тег - синтаксис и использование

Для тега требуются открывающий (начальный) тег и закрывающий (конечный) тег .

Требуемый синтаксис для этого же приведен ниже:

  
    текст для отображения жирным шрифтом

HTML

Базовый пример тега

Ниже приведен базовый пример для четкого понимания тега :

HTML

атрибуты тега

Этот элемент не имеет каких-либо конкретных атрибутов, хотя этот элемент поддерживает глобальные атрибуты и атрибуты событий.

очков, которые нужно помнить!