Как сделать жирный шрифт в блокноте html

Как сделать жирный шрифт в HTML

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

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

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

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

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

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

Пример как сделать жирный шрифт HTML тегом :

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

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

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

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

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

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

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

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

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

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

How do I make text bold in HTML?

I’m trying to make some text bold using HTML, but I’m struggling to get it to work.

Here’s what I’m trying:

Could someone tell me what I’m doing wrong?

10 Answers 10

use or tag

also, you can try with css text

HTML doesn’t have a <bold> tag, instead you would have to use . Note however, that using is discouraged in favor of CSS for a while now. You would be better off using CSS to achieve that.

The tag is a semantic element for strong emphasis which defaults to bold.

The Styling Way:

From: http://www.december.com/html/x1/



This element encloses text which should be rendered by the browser as boldface. Because the meaning of the B element defines the appearance of the content it encloses, this element is considered a «physical» markup element. As such, it doesn’t convey the meaning of a semantic markup element such as strong.



Description This element brackets text which should be strongly emphasized. Stronger than the em element.

Some text that I want emboldened.
Some text that I want emboldened.

Some text that I want emboldened.

Could someone tell me what I’m doing wrong?»

«bold» has never been an HTML element («b» is the closest match).

HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can’t see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:

Want to distinguish headings from other text? Use heading elements («h1» to «h6») and suggest a bold style for them within your CSS («h1, h2, h3, h4, h5, h6 «.

Want to embolden labels for form fields? Use a «label» element, programmatically associate it with the the relevant «select», «input» or «textarea» element by giving it a «for» attribute matching an «id» attribute on the target, and suggest a bold style for it within your CSS («label ).

Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a «fieldset» element, give it a «legend» element, and suggest a bold style for it within your CSS («legend «).

Want to distinguish a table caption from the table it captions? Use a «caption» element and suggest a bold style for it within your CSS («caption «).

Want to distinguish table headings from table data cells? Use a «th» element and suggest a bold style for it within your CSS («th «).

Want to distinguish the title of a referenced film or album from surrounding text? Use a «cite» element with a class («cite ), and suggest a bold style for it within your CSS («.movie-title «).

Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a «dfn» element and suggest a bold style for it within your CSS («dfn «).

Want to distinguish some computer code from surrounding text? Use a «code» element and suggest a bold style for it within your CSS («code «).

Want to distinguish a variable name from surrounding text? Use a «var» element and suggest a bold style for it within your CSS («var «).

Want to indicate that some text has been added as an update? Use an «ins» element and suggest a bold style for it within your CSS («ins «).

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

Рассмотрим все способы как можно сделать жирный шрифт через 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 для придания шрифту «толщины».

font-weight

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Интерактивный пример

Синтаксис

Значения

Нормальное начертание. То же, что и 400 .

Полужирное начертание. То же, что и 700 .

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

Недоступность заданного значения

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

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

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

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

наследуемое значение	жирнее	светлее
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение	Общее название
100	Тонкий (Волосяной) Thin (Hairline)
200	Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300	Светлый Light
400	Нормальный Normal
500	Средний Medium
600	Полужирный Semi Bold (Demi Bold)
700	Жирный Bold
800	Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900	Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.