Выделить текст жирным в html: Как сделать текст жирным? | WebReference

Как выделить текст жирным в css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS урок 9. Выделение текста жирным шрифтом

Казалось бы, зачем использовать CSS для задания жирного шрифта, ведь в html есть специальный тег — <strong>, отвечающий за плотность текста. Более того, имеется его альтернатива — тег <b>.

Но мы ведь знаем, что внешнее оформление сайта нужно выполнять через CSS, а HTML нужен только для структурирования данных веб-страницы. Более того, принято считать что поисковики передают больший вес словам помеченным вышеназванными тегами, а также тегами <em> и <i>.

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

Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]

Свойство, отвечающее за плотность текста

Плотность текста мы меняем при помощи свойства font-weight. Оно имеет довольно много значений, и среди них есть лишь два более или менее толковых. Я говорю так, потому что на практике вы чаще всего будете использовать два значения — normal и bold. Первое отвечает за отображение текста с нормальной, привычной толщиной, а второе — с полужирной. Например, давайте выделим все параграфы полужирным шрифтом.

Как видите, все довольно просто. А теперь, давайте отобразим заголовки второго и третьего уровней шрифтом нормальной толщины.

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

Когда тебе говорят о необходимости мыслить нестандартно

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

Толщина шрифтов

Как вы помните из урока по подключению шрифтов, они у нас бывают разной толщины и наклона. По плотности шрифты имеют показатели от 100 до 900, где 100 — самый тонкий, а 900 — самый жирный.

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

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

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

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

Для наглядности можно перейти к сервису google.com/fonts и подключить через директиву @import какой-нибудь шрифт только с нормальной и полужирной толщиной.

Затем попробовать вывести ее на экран в плотности равном 300.

Однако, это ничего не дает, так как на сервере и на компьютере пользователя отсутствует файл шрифта Open Sans с тонким начертанием. Для пущей убедительности давайте подключим файл шрифта с толщиной в 300 (тонкий) и применим его ко всем параграфам.

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

Но если вдруг появится необходимость задействовать какую-нибудь из них, теперь вы знаете как это сделать. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. [popup_trigger tag=»span»] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

font-weight

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

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

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

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

Как отформатировать текст Html жирным шрифтом

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

• Теги
• CSS

Метод 01: стиль тегов

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

Физический тег:

Эти теги обеспечивают физическую структуру контента. Физический тег для выделения текста в html будет …. Хотя mark действительно является структурным элементом макета, он не имеет семантического значения.

Логический тег: такие теги используются для придания тексту дополнительной логической или контекстуальной значимости. Мы можем использовать … теги в HTML для выделения текста полужирным шрифтом. То тег придает семантическую значимость содержимому.

Простой формат HTML:

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

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

…

чтобы выяснить, что текст, написанный в нем, представлен как абзац. В конце концов, и тег был использован для завершения кода. Всякий раз, когда вы используете какой-либо открывающий тег, обязательно используйте его закрывающий тег. Чтобы сохранить этот файл, нажмите Ctrl+S. При сохранении этого файла не забудьте добавить расширение «.html» к имени файла. Таким образом, мы можем легко сделать наш файл работоспособным и открыть его в нашем браузере.

<HTML>

<голова><заглавие> Название здесь </заглавие></голова>

<тело> Текст здесь </тело>

</HTML>

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

Пример 01:

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

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

Пример 02:

Мы использовали … пометьте жирным шрифтом одно предложение в приведенном выше примере. Теперь мы будем использовать тот же тег, чтобы выделить жирным шрифтом весь абзац. Следовательно, внутри тега абзаца мы начали тег жирного шрифта . Затем мы добавили текст абзаца и закрыли полужирный тег . После этого мы закрыли тег абзаца, а все остальное так же, как в приведенных выше примерах. Сохраните файл и откройте его, дважды щелкнув по нему.

Вывод ниже показывает, что весь текст абзаца был отформатирован жирным шрифтом.

Пример 03:

В приведенных выше примерах мы видели, как выделить жирным шрифтом одно предложение и абзац. Мы также можем использовать полужирный тег … в нашем HTML-коде, чтобы выделить некоторые слова или фразы жирным шрифтом. Итак, в одном и том же файле HTML мы использовали жирный тег … выделить жирным шрифтом некоторые слова или важные фразы. Мы использовали жирный тег в начале и в конце слов, например, Aqsa Yasin, Content Writer, CSS Officer и 25. Остальное воспринимается как простой текст. Сохранил файл и дважды щелкнул по нему для запуска.

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

Пример 04:

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

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

Метод 02: CSS-стилизация

Имейте в виду, что очень похожий эффект может быть достигнут в HTML с помощью CSS-атрибута font-weight. Этот атрибут можно использовать в html-файле внутри основного тега. Следовательно, мы использовали приведенный ниже HTML-код в нашем файле. Мы использовали стиль «font-weight=bold», чтобы сделать весь абзац полужирным внутри основного тега

…

.

Вывод вполне понятен.

Другой способ использовать стиль CSS для выделения текста полужирным шрифтом — через … тег. Мы использовали этот тег в тексте первой и третьей строки, чтобы выделить важную фразу жирным шрифтом, например, Aqsa Yasin и Content Writer.

Вывод показывает фразы жирным шрифтом на изображении ниже.

Вывод:

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

Как выделить текст жирным с помощью HTML: 9 шагов

‘).insertAfter(«#intro»),$(‘

‘).insertBefore(«#quiz_container»),$(‘

‘).insertBefore(«#newsletter_block_main»),fa(! 0),b=document.getElementsByClassName(«scrolltomarker»),a=0;a

В этой статье:

Создание жирного текста с помощью HTML

Создание жирного текста с помощью CSS

Дополнительные статьи

Источники

Язык разметки HTML позволяет выделить текст жирным без особых проблем, причем даже сразу несколькими способами. Впрочем, будет лучше, если вы потратите пару минут, изучая базовые правила каскадных таблиц стилей — CSS, и добавите их в документ, чтобы уже потом работать именно там. Суть в том, что куда проще управлять внешним видом веб-страницы из CSS, в том числе и тогда, когда что-то нужно выделить жирным.

Шаги

1. 1

   <strong>Используйте тег strong</strong>. В HTML5, согласно спецификации, выделять текст лучше именно так. Почти всегда этот тег выделит текст жирным.

   • Поместите текст, который нужно выделить, внутри тегов: <strong>именно тут</strong>.

2. 2

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

   Как правило, их размещают в верхних частях страницы или в начале нового раздела. По умолчанию, заголовки отображаются крупнее и жирнее обычного текста, хотя и тут не без тонкостей. Есть шесть уровней заголовков, от 1 до 6:<h2> — <h6>. Follow these guidelines when using them:
   • Заголовок h2 пишется так: <h2>заголовок первого уровня</h2>, и это самый важный, крупнейший заголовок страницы.
   • <h3>Заголовок h3</h3> — для второго по значимости заголовка, ну и так далее вплоть до самого <h6>заголовка h6, самого мелкого из всех</h6>.
   • Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы.^{[1] X Источник информации} Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
   • Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после <h2> сразу <h4>. Так форматирование страницы при конвертации в иной формат не собьется.^{[2] X Источник информации}

3. 3

   <b>В крайнем случае, используйте тег b</b>.

   Тег <b> все еще поддерживается в HTML5, но <strong> куда как лучше. Использовать <b> можно в том случае, когда текст выделяется в стилистических, не семантических целях — например, для выделения ключевых или словарных слов, названий товаров и так далее.^{[3] X Источник информации}
   • Как и большинство тегов, <b> — парный, управляющий помещенным внутрь него текстом</b>.

   Реклама

1. 1

   Запомните, когда стоит использовать CSS.

   CSS — очень мощный и удобный инструмент редактирования внешнего вида страницы. Собственно, CSS — это то, как страница «выглядит», тогда как HTML – то, что она «значит». Конечно, в тегах HTML нет ничего плохого, ими можно пользоваться, но лучше все же работать с CSS — вы получите больше контроля над тем, как именно будет выглядеть ваш текст.
   • Откройте простую HTML-страницу в разных браузерах. Заметили, что она отображается слегка по-разному в каждом? С помощью CSS можно свести эту разницу к минимуму.

2. 2

   Добавьте к тексту тег <span>.

   Если вы еще не владеете CSS, то начать стоит с так называемого «inline CSS» — «встроенных таблиц стилей», если угодно. Этим, конечно, можно пользоваться, чтобы менять вид тегов вроде <p> или <h2>, но порой так можно поменять и такой текст, который еще не взят в какие бы то ни было теги.^{[4] X Источник информации} Тег <span></span> — это как бы обертка, которая сама по себе никакого эффекта или влияния не оказывает, но дает нам возможность привнести нужные изменения на страницу. Вот пример:
   • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>

3. 3

   Добавьте атрибут style.

   Атрибуты в HTML пишутся прямо в теге, прямо в галочках < >. Атрибут style необходим для вставки CSS-кода в HTML-тег, так что вставьте style= в тег span:
   • <span style=>Я учусь выделять текст жирным с помощью inline CSS. .</span>
   • Зачем добавлять атрибут style, если не добавлять сам стиль? Мыслите верно. Но мы здесь излагаем все пошагово!

4. 4

   Добавьте свойство font-weight. Свойства CSS добавляются как часть атрибута, в нашем случае — как часть атрибута style, а именно «font-weight» (жирность шрифта, если буквально). Это свойство может быть использовано для задания начертания шрифта, причем не только жирного, но и экстра-жирного, тонкого или нормального. После знака = напишите

   «font-weight: «. Должно получиться примерно так:
   • <span>Я учусь выделять текст жирным с помощью inline CSS..</span>
   • Пока сделайте паузу, ничего больше не пишите (и да, еще не все).
   • Не забудьте поставить кавычки до и после font-weight:.

5. 5

   Добавьте значение bold. Что осталось? Правильно, задать свойству атрибута значение! Куда его вставить? Правильно, между

   font-weight: и закрывающей кавычкой. У этого свойства есть несколько разновидностей, отличающихся жирностью начертания, и проще всего будет воспользоваться значением bold:^{[5] X Источник информации}
   • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>

6. 6

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

   [6] X Источник информации
   • <span>»Bolder» — так текст всегда будет жирнее родительского элемента, сколь бы жирным тот ни был сам по себе.</span> Если весь параграф выделен с помощью «bold,» то «bolder» поможет выделить еще жирнее, скажем, отдельное предложение, находящееся в нем.
   • <span>»Normal» — такой текст будет выглядеть как обычно, даже когда находится внутри тега, выделяющего текст жирным. </span>
   • <span>Для задания жирности текста можно использовать значения от 100 до 900. 400 — обычное начертание, жирное — от 700 и выше.</span>
     [7] X Источник информации

   Реклама

Советы

• Используя в CSS для задания жирности цифровые значения, используйте те, что кратны 100. Все иные значения все равно будут округляться в большую сторону.^{[8] X Источник информации}
• Внешний CSS-файл, что и говорить, куда удобнее того, о чем рассказывается в этой статье — так можно будет из одного файла управлять внешним видом всех страниц сайта сразу!
• Нельзя сделать шрифт жирнее, чем заложено в него изначально типографами. Работая с CSS, помните — шрифт будет меняться согласно стандарту. Соответственно, разницы между двумя жирными вариантами шрифтов вы не увидите (точнее, можете и увидеть — но это уже зависит от шрифта).

Реклама

Источники

1. ↑ http://static. googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
2. ↑ http://www.hobo-web.co.uk/headers/
3. ↑ http://www.quackit.com/html/codes/bold/
4. ↑ http://reference.sitepoint.com/html/core-attributes/style
5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
6. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
7. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
8. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Об этой статье

На других языках

Как выделить текст жирным с помощью HTML — Wiki How Русский

Язык разметки HTML позволяет выделить текст жирным без особых проблем, причем даже сразу несколькими способами. Впрочем, будет лучше, если вы потратите пару минут, изучая базовые правила каскадных таблиц стилей — CSS, и добавите их в документ, чтобы уже потом работать именно там. Суть в том, что куда проще управлять внешним видом веб-страницы из CSS, в том числе и тогда, когда что-то нужно выделить жирным.

Эту страницу просматривали 45 100 раз.

Реклама

HTML выделение: Выделение текста жирным, курсивом и цветом.

Приветствую, Друзья.

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

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

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

Выделение текста жирным начертанием.

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

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

Пример кода:

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

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

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

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

Пример кода:

<p><strong>текст, на котором мы сделали акцент</strong></p>

Результат:

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

Все довольно просто, не правда ли?

Выделение текста курсивом.

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

Чтобы выделить текст курсивом мы воспользуемся тегом <i>. Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа <p>.

Пример кода:

<p><i>текст курсивом</i></p>

Результат:

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

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

Пример кода:

<p><em>текст, на котором мы сделали акцент</em></p>

Результат:

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

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

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

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

<p>текст, который нужно выделить <span>цветом</span></p>

В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег <span> является парным, и мы должны его закрыть там, где свойство должно закончиться.

Результат:

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

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая  у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…

#HTML & CSS

21 января 2014

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

Содержание

• 1 Жирный шрифт как способ выделить главное
• 2 Другие варианты выделения
• 3 Использование нескольких шрифтов
• 4 Выводы
• 5 Выделение текста полужирным шрифтом
• 6 Жирный текст: тег Тег b HTML применяется следующим образом: Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т. д.) Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
• 7 Жирный текст: тег Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы. Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный. Используется тег strong аналогичным образом: Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
• 8 Жирный текст при помощи CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

В приложении Word, можно выделить текст полужирным шрифтом тремя способами: с помощью кнопки Полужирный на мини-панель инструментов, используйте кнопку » Полужирный » на вкладке » Главная » или нажмите сочетание клавиш.

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

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

Наведите указатель мыши на мини-панели инструментов над выделения и нажмите кнопку Полужирный .

Нажмите кнопку Полужирный в группе » Шрифт » на вкладке » Главная «.

Введите сочетание клавиш: CTRL + B.

Примечание: Нажмите кнопку Полужирный или введите сочетание клавиш еще раз, чтобы unbold выделенного текста.

В 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. Основные теги форматирования

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

В HTML присутствуют возможности форматирования текста аналогичные любому текстовому процессору (например: MS Word). Это выделение текста полужирным начертанием, курсивным начертанием, позволяет сделать подчеркнутый и зачеркнутый текста, определить шрифт для текста, его цвет, размер и тд.

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

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

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

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

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

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

<small></small> — данный тег используется для уменьшения размера расположенного внутри него текста в отношении размера основного текста. Подходит для использования в качестве комментария или пояснения для основного текста.

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

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

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

<pre></pre> — текст находящийся внутри данного тега будет отображен браузером в таком виде в каком он написан в данном теге, со всеми пробелами и со всеми отступами.

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

<blockquote></blockquote> — используется для оформления цитат, располагает текст расположенный внутри данного тега в новом блоке и добавляет ему некоторое форматирование.

Так же для форматирования текста используется тег <FONT></FONT> который позволяет задать размер, цвет и шрифт тексту с помощью соответствующих атрибутов: 1. SIZE — позволяет задать размер текста, принимает значения от 1 до 7. 2. COLOR — позволяет задать цвет тексту находящемуся в данном теге, использует стандартные цвета палитры RGB или имя цвета. 3. FACE — позволяет задать тип шрифта или несколько шрифтов через точку с запятой.

ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА <FONT>:

<font size=3 color=red face=Arial> Данный текст будет выведен красным цветом, размером 3, шрифтом Arial </font>

Пример использования тегов форматирования текста

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой первый сайт</title>
  </head>
  <body>

   <h2 align="center"> Привет МИР!!!</h2>

<p><b>Дорогой</b> друг я рад <i>видеть</i> тебя на моем <big><b><i>первом сайте!</i></b></big</p>
  </body>
</html>

Результат отображения данного кода в браузере будет таким:

Лабораторная работа 4. Форматирование текста (pdf)

HTML тег — GeeksforGeeks

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 20 июл, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Пример: Этот простой пример кода иллюстрирует выделение текста жирным шрифтом в HTML.

HTML

< html > < body >      < h2 >GeeksforGeeks H2 > < H4 > HTML B TAG H4 > > > 76 > 76 > 76 > 76 . 0038 < P > A < B > Портал компьютерных наук B > для Geeks. Он содержит хорошо написанную, хорошо продуманную и хорошо объяснено < B > Интерактивные науки и Прогнозируются.0038 b >      p >     body > html >

Вывод:

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

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

до

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

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