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

Выделяем важные слова или оформляем текст html страницы! : WEBCodius

Оглавление:

1. Теги strong и em
2. Разрыв строк
3. Вставка специальных символов
   

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

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

Выделение фрагментов текста. Теги strong и em.

Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег STRONG. Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег «b». Хоть теги «strong» и «b» похожи по своему действию, но они не являются эквивалентными.

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

Для курсивного выделения фрагментов текста применяются теги «i» и «em». Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.

При разработке web-сайтов для выделения текста чаще применяются теги «strong» и «em», чем теги «b» и «i». Пример использования тегов «strong», «b»,
«em» и «i» для оформления текстов:

И выглядит это так:

Применим теги «strong» и «em»; на нашей страничке из предыдущих статей:

Результат:

Кроме элементов strong, b, em и i в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:

• abbr — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
• acronym — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
• cite — небольшая цитата, отображается курсивом;
• code — фрагмент исходного кода программы, отображается моноширинным шрифтом;
• del— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
• dfn — обозначает новый термин в документе, отображается курсивом;
• ins — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
• kbd — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
• q — используется для выделения цитат, содержимое автоматически помещается в кавычки;
• samp — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
• tt — фактически тоже самое что и «samp», только является тегом физической разметки, а «samp» — логической. отображается моноширинным шрифтом;
• var — выделение имени переменной в исходном коде программы, отображается курсивом.

И вот так они отображаются в браузере:

Разрыв строк

Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег «p», выделяющий абзац.

Давайте поместим на нашу web-страницу сведения об авторских правах:

Сайт об автомобилях.

Результат:

И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег br. Этот тег устанавливает перенос строки, но в отличие от тега «p», не устанавливает отступ перед строкой. Применим тег «br» на нашей страничке:

Так гораздо лучше:

Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег «br».

Вставка специальных символов.

Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы:

Для вставки специальных символов в HTML используются литералы. Литерал

Вставим на нашу страницу в блок об авторских правах символ копирайта:

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

Ниже привожу названия наиболее часто используемых символов:

Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел».

Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег

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

И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.

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

Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск — Все Программы — Стандартные — Служебные — Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».

Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt + код символа». Берете это код символа и вставляете в литерал.

Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала «copy» вставляем:

И убеждаемся, что на странице отображается все правильно.

На сегодня у меня все. Как всегда подведу итоги:

• мы рассмотрели теги для оформления текста html страницы. Наиболее важные из них тег «strong» — жирное выделение текста и тег «em» — курсивное начертание;

• для разрыва строк без отступов применяем

  тег «br»;

• и для вставки специальных символов используем литералы вида:

В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))

Использование CSS для управления выделением текста

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

Выделить всё

Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).

Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!

div {
  -webkit-user-select: all; /* для Safari */
  user-select: all;
}

Например, так:

See this code Select All on x.xhtml.ru.

Выделить всё… Затем выделить часть

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

Во-первых, надо использовать tabindex, чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.

<code tabindex="0">Это фрагмент кода</code>

Теперь немного CSS.

code {
  -webkit-user-select: all;
  user-select: all;
}
code:focus {
  animation: select 100ms step-end forwards;
}
@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all, а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text, чтобы текст можно было выбирать по частям. Выбор времени переключения – дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на

label {
  -webkit-user-select: none;
  user-select: none;
}

p::selection {
  color: #fffb07;
  background-color: #ff063b;
  text-shadow: 2px 2px #028e4a;
}