Тег жирный: Тег | htmlbook.ru

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

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

Описание

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

Мы уже отмечали важность тега

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

HTML-теги для текста

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

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

Давайте, для начала разберёмся с начальными данными, если можно так выразиться, а именно со страницей, которая у нас имеется. Пусть она будет такой:

Собственно, здесь уже имеются элементы форматирования: тег <h2>, который делает текст внутри тега крупным, более того, это идёт, как заголовок, поэтому дальнейшие элементы располагаются уже под ним. Также мы здесь задали цвет текста (green) в атрибуте text тега <body>.

Теперь поговорим о других возможностях по форматированию текста.

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

Начнём с курсива. Текст будет курсивным, если он находится внутри тега <i>. Поэтому давайте напишем так:

Также текст может быть жирным. Делается это с помощью тега <b>. Например, так:

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег <u>.

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

Также можно записать и так:

Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным. Суть, думаю, понятна. Единственное правило, но ОЧЕНЬ важное правило — это соблюдать принцип вложенности. То есть сначала закрываются все внутренние теги, и только потом закрываются внешние теги. Таким образом,

Думаю, понятно, что работать это не будет. Ведь мы не закрыли ещё тег <b>, а уже закрываем тег <i>. Всегда помните о принципе вложенности — это одно из немногих правил HTML, соблюдение которого обязательно!

Теперь поговорим о размере шрифта текста. Изменить размер текста можно с помощью тега <font>, а, точнее, с помощью его атрибута «size«, значение которого и означает размер шрифта. Давайте перейдём на следующую строку с помощью тега <br> и напишем такую строчку:

Обновив страницу в браузере, Вы увидите, что текст стал крупнее, чем раньше. Это и сделал атрибут «size» тега <font>. Чем больше значение атрибута «size

Цвет текста можно задавать также с помощью тега <font>, так как у этого тега имеется ещё один атрибут — «color«. Значение данного атрибута может быть любой цвет. Давайте напишем так:

Вот это и были основные способы по изменению внешнего вида текста.

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

Таким образом, код нашей страницы стал таким:

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

Всего Вам доброго, увидимся в следующей статье.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

• Создано 26.04.2010 17:56:24
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

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

Прошлым летом я прочитал полную спецификацию 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, чтобы подчеркнуть ваш список тем.

Заголовки

Теги заголовков — это самый простой способ разделить ваш документ. Если вы думаете о своем сайте как о газете, тогда заголовки — это заголовки в газете. Основной заголовок — это h2, а последующие заголовки — от h3 до H6.

Используйте следующие коды для создания HTML.

<h2> Это заголовок 1 </ h2> 
<h3> Это заголовок 2 </ h3> 
<h4> Это заголовок 3 </ h4> 
<h5> Это заголовок 4 </ h5> 
<h5> Это заголовок 5 </ h5> 
<h6> Это заголовок 6 </ h6>

Держите заголовки в логическом порядке — h2 предшествует h3, который предшествует h4, и так далее.

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

Жирный и Курсив

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

• <strong> и <b> для жирного
• <em> и <i> для курсива

Неважно, какой вы используете. В то время как некоторые предпочитают <strong> и <em>, многие люди находят <b> для «жирный» и <i> для «курсив» легче запомнить.

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

<b> полужирный </ b> 
<i> курсив </ i>

Вы можете вложить эти теги (что означает, что вы можете сделать текст как жирным, так и курсивом), и не имеет значения, какой это внешний или внутренний тег.

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

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

Этот текст выделен курсивом

<em> Этот текст выделен курсивом </ em>

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

<strong> <em> Этот текст выделен жирным шрифтом и курсивом </ em> </ strong>

Почему есть два набора тегов жирным шрифтом и курсивом

В HTML4 теги <b> и <i> считались тегами стиля, которые влияли только на внешний вид текста и ничего не говорили о содержимом тега, и их использование считалось плохой формой. Затем в HTML5 им было дано семантическое значение вне внешнего вида текста.

В HTML5 эти теги используют определенные значения:

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

Курсив в заголовках

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

Акцентирование (выделение) текста в HTML — Разметка текста — codebra

Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег <b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов <i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Код HTML

<b>Жирный текст</b>

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

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Код HTML

<u>Подчеркнутый текст</u>

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

<strike>Зачеркнутый текст</strike>

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же выгодно использовать всегда стили CSS. Далее пример:

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900. Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style. Далее пример:

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span>

Код CSS

.u {
text-decoration: underline;
}

Акцентирование (выделение) текста в HTML. Как сделать жирный шрифт в HTML

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

Жирное начертание шрифта Сильное выделение текста

Курсивное начертание

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

Курсивное начертание шрифта Выделение текста

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

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

Пример 7.5. Теги и

Этот текст красного цвета
Этот текст имеет шрифт Arial
Этот текст красного цвета и размера 5px
А вот что вы увидите, после обработки написанного кода: 

 
Блочные элементы оформления текста — заголовки 
 
Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов 

Цифра после слова заголовок соответствует цифре в теге . Заголовки оказывают огромное влияние на на внутреннюю оптимизацию, поэтому заключайте в теги  ключевые слова. Особенностей этого дела довольно много, о чем я расскажу в последующих статьях.
А теперь поговорим про тег выделения абзаца 
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа
. Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!

 
Приветствую, Друзья.
После очередного долгого перерыва вспомнил, что давно уже не писал ни строчки. Конечно, на это есть свои причины, ведь какая-нибудь причина придумать себе оправдание всегда найдется, правда? На самом деле, каждый день занимаюсь ВидеоКурсом, о котором уже упоминал пару раз, но пока больше об этом ничего говорить не буду, скоро все узнаете.
Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.
Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.
 
Выделение текста жирным начертанием.
 
Чтобы выделить текст жирным начертанием не нужно ничего мудрить со стилями CSS или придумывать еще какие-либо сложности. В HTML уже есть такая возможность. При этом, мы можем не просто выделить текст жирным, но и сделать на нем некий акцент с помощью выделения. Акцент может делаться для поисковых систем или каких-либо специальных браузеров или программ. Главное это не переборщить с акцентированием текста в статье или на странице с как-то информацией, так как это может губительно сказаться как минимум на продвижении данной HTML-страницы.
Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом  . Данный тег относится к элементам физической разметки, при этом устанавливая жирное начертание текста, не делая на нем какого-либо акцента. Этот тег является парным, что говорит о том, что он имеет, как открывающий тег, так и закрывающий. Кроме того, так как элемент встроенный, он должен находиться в каком-либо блочном элементе, например
Пример кода:
жирный текст
Результат:

жирный текст

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

Результат:


Все довольно просто, не правда ли?
 
Выделение текста курсивом.
 
В этом случае все не сложнее, чем в первом. И ситуация у нас абсолютно та же. Мы можем выделить текст двумя вариантами в HTML. Опять же, используя либо тег физической разметки или же тег логической, с помощью которого мы опять же делаем акцент на выделенный текст.
Чтобы выделить текст курсивом мы воспользуемся тегом  . Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа
Пример кода:
текст курсивом
Результат:

текст курсивом

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

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.
К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.
Итак, чтобы выделить определенную часть текста цветом, мы можем обернуть нужную часть текста тегом  , который является универсальным тегом, и используется внутри блочного элемента. В нашем случае блочным элементом является тег 
Но добавить  недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти .
Теперь чтобы было понятней рассмотрим пример.
Пример кода.
текст, который нужно выделить цветом
В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег  является парным, и мы должны его закрыть там, где свойство должно закончиться.
Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.
Надеюсь, я все понятно объяснил.
Удачи, Друзья. Скоро… Будут интересные новости…
Один из наиболее простых способов выделить в тексте слово или фразу — использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный страницы с легкостью позволяет выделять слова с помощью различного начертания — курсивного, подчеркнутого, жирного.
 
Жирный шрифт как способ выделить главное
Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга .
Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг . После последней буквы в тексте, который следует выделить, ставится закрывающий тэг . Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.
Другие варианты выделения
Итак, мы выяснили, что можно выделить текст с помощью другого начертания. Определились, что наиболее просто и в то же время эффективно использовать жирный шрифт HTML. Теперь поговорим о других вариантах выделения.
Так, можно выделить текст курсивом с помощью парного тэга  , подчеркнуть его с помощью  . Это наиболее простые способы выделения текста.
Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать  . Сделать текст моноширным поможет парный тэг  . Если вам нужно создать верхний индекс, используйте , нижний — .
При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное — запомнить данные коды или записать их.
Использование нескольких шрифтов
 
Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.
При этом надо помнить одно — все тэги должны закрываться последовательно. Например, правильная запись может быть такой:
 выделенный текст .
Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:
 выделенный текст .
В таком случае браузер запутается и не поймет, что именно вы от него хотите.
Кстати, тут можно отметить, что три варианта начертания — жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.
Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.
 
Выводы
 
Для выделения текста широко используются не только разнообразные цвета и оттенки, разный размер и тип шрифта, но и его начертание. Причем именно с помощью другого очертания можно красиво и легко выделить тот или иной фрагмент текста.
Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы — наиболее яркий и заметный, а потому используется наиболее часто для выделения.
Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.
Для выделения определенного текста жирным используются специальные HTML теги —  и . Например следующий код:
 
Обычный текст.
Жирный текст.
Жирный текст strong.

Обычный текст.
Жирный текст.
Жирный текст strong.
На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег  задает простое стилистическое выделение слова жирным шрифтом, тогда как  добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .
Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:
Пример жирного текста.
Пример текста с жирным словом.
На сайте это отображается так:

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

 
Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:
bold (жирный) — 700 по умолчанию;
normal (обычный) — 400 по умолчанию.
Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.
Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:
Обычный текст с жирным выделением по центру.

strong {
 font-weight: bold;
}
Тут хотелось отметить один небольшой нюанс, который мне рассказали на — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.
В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

 
Курсив и жирный шрифт CSS — учебник CSS
 
        
Чтобы сделать шрифт жирным в CSS либо задать ему курсивное начертание, вам пригодятся такие свойства, как font-weight и font-style. Ниже мы разберемся, какие значения могут быть использованы для этих свойств.
 
Жирный шрифт в CSS: свойство font-weight
 
Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight:
bold
Полужирный шрифт
normal
Обычный шрифт
bolder
Более жирный шрифт, чем у родителя
lighter
Менее жирный шрифт, чем у родителя
inherit
Наследует значение родителя
Числовое значение от 100 до 900
От очень тонкого до очень жирного шрифта
Пример записи:
p {
font-weight: bold;
}
Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900, настраивая жирность шрифта от самого тонкого до самого плотного.
Примечание: числовые значения от 100 до 900, означающие толщину шрифта, сработают только в том случае, если у шрифта, с которым вы работаете, предусмотрены эти варианты начертания. Данные значения используются в основном с веб-шрифтами, о которых мы говорили в первой подглаве.
Курсив в CSS: свойство font-style
Задать курсивное начертание шрифта можно при помощи значений свойства font-style:
italic
Курсивный шрифт
oblique
Наклонный шрифт
normal
Обычный шрифт
inherit
Наследует значение родителя
Пример записи:
p {
font-style: italic;
}
Чтобы сделать курсив в CSS, используйте значение italic. Второе значение в таблице – oblique – означает наклонное начертание и отличается от курсива тем, что все символы с обычным начертанием просто наклоняются вправо, в то время как курсив – это отдельно созданный вариант начертания шрифта, похожий на рукописный.
Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.
Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.
 HTML-тег 
 Тег HTML    используется для создания элемента «b», который представляет полужирный текст в документе HTML.
 Тег    следует использовать для разметки текста как полужирного без придания дополнительной важности, например, в аннотациях статей, где начало статьи выделено полужирным шрифтом. Следует использовать , а не  для обозначения особой важности. Чтобы подчеркнуть особую важность, используйте тег   .Чтобы выделить текст, используйте тег   .
 Синтаксис 
 Тег    записывается как       с текстом, который будет вставлен полужирным шрифтом между начальным и конечным тегами.
 Как это:
  полужирный текст 
 Примеры 
 Наименования продуктов 
 Вот пример использования элемента    для разметки названий продуктов в обзоре двух продуктов.
  iPhone 5s  немного обогнал  Samsung Galaxy S4  во всех наших тестах, однако мы рекомендуем покупать оба.
 Артикул Lede 
 Вот пример использования элемента    для разметки первого абзаца статьи.
 Артикул  lede  (или  lead ) обычно используется вместе с заголовком или заголовком. Он предшествует основной части статьи и дает читателю основное представление о том, о чем рассказывается.
 Журналистские статьи делают упор на привлечение внимания читателя, тогда как статьи в эссе резюмируют схему аргументов и выводов, которые следуют в основной части эссе.
 <статья>
 Ученый утверждает, что наука догматична 
  Биолог Руперт Шелдрейк утверждает, что современная наука сдерживается системами убеждений ученых, и что многие ученые не знают о своих собственных предположениях.
 В своей книге  Science Set Free  (известной в Великобритании как  The Science Delusion ) Шелдрейк излагает десять догм основной науки. Он утверждает, что самое большое научное заблуждение состоит в том, что наука уже знает ответы. Детали еще требуют проработки, но, в принципе, принципиальные вопросы решены.
 Шелдрейк отмечает, что современная наука основана на утверждении, что вся реальность материальна или физическая.Нет реальности, кроме материальной реальности …