Как в html выделить текст

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

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

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

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

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

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

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

Пример кода:

жирный текст

жирный текст

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

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

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

Пример кода:

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

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

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

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

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

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

.

Пример кода:

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

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

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

Пример кода:

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

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

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

HTML выделение цветом.

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

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

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

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

Пример кода.

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

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

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

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

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

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

Тег HTML выделение текста, подсветка фона

Тег используется для выделения фрагмента текста (обычно с помощью подсветки фона).

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

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

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

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

Синтаксис

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

Отображение в браузере

Кто ценит свое время, тот читает справочник GuruWeba 😉

Пример использования в HTML коде

 
 
 
 
Кто ценит свое время, тот читает справочник GuruWeba ;-).
 

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

Тег
	Да	9+	Да	Да	Да

Выделение текста с помощью HTML-тега mark

От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли?

text with HTML < mark > tag

Стиль mark по умолчанию

Цвет фона mark по умолчанию — желтый.

< mark >Default Yellow Highlight < / mark >

Пользовательские стили с помощью CSS

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

.

background : red ;
color : white ;

mark в сравнении с другими текстовыми тегами HTML

strong

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

b

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

em

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

mark

mark просто подчеркивает актуальность определенного фрагмента текста. До существования этого тега многие использовали em или strong для придания выделенному контенту некоторого семантического значения. Ну, больше можно этого не делать! Если вам нужно выделить текст, используйте этот тег.

Почему семантический HTML-тег важен

Причина, по которой вы не просто используете везде теги div, заключается в том, что они не являются семантическими. Возможно, вы похожи на меня, когда я впервые начал изучать программирование — кому нужна семантика? Неправильно. На самом деле, она нужна поисковым системам, таким как Google! Потому что семантика передает смысл о вашем сайте. Когда поисковые роботы просматривают сайт, благодаря ей, они узнают, что здесь происходит. Другими словами, это важно для SEO или поисковой оптимизации.

Другая причина, по которой семантика важна — это доступность. Многие инструменты специальных возможностей полагаются на семантику тегов, чтобы представить ваш сайт для пользователя, использующего его, например, с помощью программы чтения с экрана. Вот аналогия. Помните, те времена, когда появился компьютер, читающий текст с сайта. Это звучало супер странно. Без правильной семантики это так. Это работает, конечно — но опыт прослушивания ужасен. Однако, когда вы используете правильную семантику, это все равно что слушать Siri. Это звучит гораздо более по-человечески, потому что у нее в речи есть разные переходы, изменения высоты голоса, и она даже знает, когда нужно остановиться. И это тот же самый тип улучшения, которого вы можете достичь, используя семантически правильные теги HTML.

Теги HTML5 и SEO

Я хочу отметить еще одну вещь. Джон Мюллер из Google упомянул это в своем ответе в Twitter: Конечно, имеет смысл использовать HTML5 правильно, если вы можете, это точно не повредит SEO :).

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

Проблемы доступности

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

Но! Есть некоторые проблемы с доступностью. К сожалению, использование тега mark не объявляется большинством программ чтения с экрана в настройках по умолчанию. Но хорошие новости — есть способ обойти это. Вы можете использовать свойство CSS content и псевдо-элемент, чтобы создать объявление.

— жирное выделение текста

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

Content categories (en-US)	Flow content (en-US) , phrasing content (en-US) , palpable content.
Разрешённый контент	Phrasing content (en-US) .
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Permitted parents	Any element that accepts phrasing content (en-US) .
Permitted ARIA roles	Any
DOM interface	HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.

Атрибуты

Указания по применению

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

Пример

.keywords  color: red; > 

p> В этой статье описывается элемент для форматирования b class="keywords">текстаb>. Она объясняет его использование в документе b class="keywords">HTMLb>. p> 

Ключевые слова с тегом , отображаемые со стилем, выделены жирным шрифтом.

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

Specification
HTML Standard # the-b-element

Браузерная совместимость

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.