Тег для подчеркивания текста html: Тег | htmlbook.ru

Основные html теги для текста и css-свойства для его оформления

От автора: пишете вы статью на своем блоге и надо как-то оформить ее, чтобы привлечь внимание посетителей. В этом вам помогут html теги для текста, а также нужные свойства в css.

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

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

Чаще всего текст на страничке выделяют жирным шрифтом или курсивом. Для этого есть специальные теги <strong> и <b> (выделяют жирным), а также <em> и <i> (курсивом). Все они парные, то есть нужные слова нужно поместить между открывающим и закрывающим тегом. Казалось бы, зачем придумали два тега для одного и того же действия?

На самом деле в html они выполняют не только оформительскую роль, но и смысловую. Так, тег b просто выделяет тег жирным, не придавая ему большего смысла, а вот strong помимо простого выделения еще и придает словам особую важность. Поэтому этим тегом не стоит выделять полтекста, а использовать разумно.

В CSS также есть свойства, которые обладают таким же эффектом, что и перечисленные теги. Например, свойство font-weight: bold делает текст жирным, а font-style: italic – курсивным.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Подчеркивание и зачеркивание текста

Для подчеркивания и зачеркивания тоже есть свои теги. <ins> подчеркивает слова, а <del> — зачеркивает их. Чтобы добиться такого же эффекта через css, применяют свойство text-decoration. У него есть несколько значений:

Underline – подчеркивание снизу;

Overline – подчеркивание сверху;

Line-through — зачеркивание;

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

В HTML 5 ввели еще один тег — mark, который позволяет просто выделить текст. По умолчанию он выделяется желтым цветом, хотя через css вы можете легко переназначить это и создать свое выделение, которое соответствует дизайну вашего сайта.

Вывод текста в верхнем и нижнем индексе

Немного разобрались, но что если вам надо написать формулу или что-то другое, где нужно вывести некоторые цифры или буквы в верхнем или нижнем индексе. Конечно, html предоставляет нам для этого нужные средства. Тег sub отображает шрифт в виде нижнего индекса, а sup — в виде верхнего. Также это можно сделать через css. Для этого нужному тексту надо прописать:

vertical-align: sub | super

Font-size: размер шрифта, чуть меньший, чем у обычного текста

Как оформить текст с помощью CSS?

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

Соответственно, нужный вам для оформления фрагмент заключаем в span, привязываем к нему произвольный стилевой класс и пишем стили без каких-либо проблем!

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

В html существует тег pre, который позволяет вывести информацию так, как написано в текстовом редакторе. Это может пригодиться, если вы пишете стих или нужно поставить несколько пробелов. Нор через css тоже можно управлять форматированием текста. Для этого существует свойство white-space. Его значения:

Nowrap – слова отображаются одной строкой без переносов. Если они не влезают в строку, появится горизонтальная прокрутка.

Pre – действует аналогично тегу pre

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Pre-wrap – аналогично предыдущему значению, но автоматически переносит текст на новую строку, когда он перестает помещаться (пожалуй, самое лучшее значение)

Выравнивание текста

Мы уже рассмотрели некоторые html теги для текста, но еще стоит упомянуть выравнивание. Оно задается не тегами, а через css-свойство text-align:

Right – по правому краю.

Left – по левому.

Center – по центру (например, для заголовков)

Justify – по ширине. Это значение означает, что слова в строке будут растянуты так, чтобы занять всю ее ширну.

Цвет и фон текста

Опять же, это уже невозможно задать с помощью html-тегов, зато можно через css. Мы опять же приходим к выводу, что использовать теги для редактирования текста html не очень удобно. Для цвета самого текста есть свойство color, которое имеет много значений. Цвет можно задавать как с помощью ключевых слов (orange, black, red), так и с явным указанием цветового режима: color: rgb(130, 100, 12). Фон задается абсолютно также, но только с помощью свойства background.

Размер и шрифт текста

Свойство Font-size задает размер шрифта, а font-family позволяет выбрать сам шрифт или его семейство. Например:

Если название шрифта состоит из нескольких слов, то нужно заключать его в кавычки.

Тени для текста

К тексту также можно применить тень, которая задается свойством text-shadow:

text-shadow: 2px 2px 0 red

где:

Смещение по горизонтали | смещение по вертикали | размытие тени | цвет тени.

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

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

Хотите и дальше изучать html и css? Тогда подписывайтесь на наш блог, потому что здесь вы найдете все для сайтостроения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

HTML теги оформления текста | Vaden Pro

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

Сразу отмечу, что все элементы для форматирования текста рассмотренные в данной статье (кроме br) являются парными. Тоесть для обрамления содержимого тегом должен присутствовать как открывающий тег , так и закрывающий Ваш_тег>. Пример:

<h4>Правильно написанный заголовок текста</h4>
<p>Абзац с переносом строки посреди абзаца.<br> Пример использования непарного тега внутри парного.</p>

Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.

Теги h2-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут.

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

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

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

HTML теги для разметки текста (строчные элементы)

• span — схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
• br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
• strong — выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить – если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
• b — визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
• em — делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
• i — визуально ничем не отличается от <em>. Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега <b>, только для курсива.
• ins— используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
• u — визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
• tt — выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
• pre — блочный элемент. Используется для того, чтобы сделать моноширинными  большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
• sub — выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
• sup — выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
• strike (s) – делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.

Использование нескольких тегов одновременно

Мы ознакомились с основными тегами для оформления текста. Их можно применять не только по-отдельности а и один внутри другого, главное при этом помнить основной принцип вложенности тегов – тег, который был открыт первым должен быть закрыт последним. Тобишь:

<p><b><i>Жирный текст написанный курсивом</i></b></p> <!--Верно-->
<p><b><i>Жирный текст написанный курсивом</b></i></p> <!--Не верно-->

Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.

ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.

Вопросы для самоконтроля:

• Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
• Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
• Какие существуют способы выделения текста курсивом? В чем между ними разница?
• Как правильно переносить строки в html?
• Как формируется порядок вложенности тегов?

Оценок: 3 (средняя 3.7 из 5)

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

HTML — Жирный, Курсив и Подчеркивание

пример

Жирный текст

Для полужирного текста используйте теги <strong> или <b> :

<strong>Bold Text Here</strong>

или же

<b>Bold Text Here</b>

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

Если бы вы использовали <b> программа «текст в речь» не произносила бы слово (слова) не иначе, как любое из других слов вокруг него — вы просто обращаете на них внимание, не добавляя никакой дополнительной важности. Используя <strong> , тем не менее, одна и та же программа хотела бы произнести эти слова другим голосом, чтобы передать, что текст в какой-то мере важен.

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

Для наложения курсивом используйте теги <em> или <i> :

<em>Italicized Text Here</em>

или же

<i>Italicized Text Here</i>

Какая разница? Семантика. <em> используется, чтобы указать, что текст должен иметь дополнительный акцент, который следует подчеркнуть, а <i> просто представляет текст, который должен быть удален из обычного текста вокруг него.

Например, если вы хотите подчеркнуть действие внутри предложения, можно сделать это, выделив его курсивом через <em> : «Вы уже представили бы редактирование уже?»

Но если бы вы идентифицировали книгу или газету, которую обычно выделяли стилистически, вы просто использовали бы <i> : «Я был вынужден читать Ромео и Джульетту в старшей школе.

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

Хотя сам элемент <u> устарел в HTMl 4, он был повторно введен с альтернативным смысловым значением в HTML 5 — для представления неаркулированной, нетекстовой аннотации. Вы можете использовать такой рендеринг для обозначения текста с ошибками на странице или для отметки имени пользователя в Китае.

<p>This paragraph contains some <u>mispelled</u> text.</p>

Тег | htmlbook.ru

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

Описание

Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис

<font>Текст</font>

Закрывающий тег

Обязателен.

Атрибуты

color

Устанавливает цвет текста.

face

Определяет гарнитуру шрифта.

size

Задает размер шрифта в условных единицах.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FONT</title>
 </head>
 <body>
  <p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения 
    написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Изменение вида текста

HTML теги для текста. Как вставить текст в HTML

Заголовки

Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов <h2> — <h6>. При этом <h2> это заголовок первого уровня, он самый большой.

Пример создания заголовков:

+

<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвёртого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

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

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

На работу страницы количество тэгов <h2> никак не влияет. Можно их добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах, то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому, чтобы не ставить больше одного тэга <h2> на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг <h2> только для одного заголовка.

Абзац

Тэг <p> создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

<p>Абзац текста</p>

Тэг <br>

Тэг <br> это не совсем текстовый тэг. Он производит перевод строки. Если он находится внутри текста, то последующий текст переходит на новую строку. А если он находится между блоками, то он добавляет пустую строку.

Пример перевода строки:

<p>Начало текста<br>новая строка</p>

Тэг <span>

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

Для примера выделим часть текста красным цветом.

<p>Начало текста <span>красный текст</span>
продолжение текста</p>

Нужная часть текста находится внутри тэга <span>. Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг <pre>

Тэг <pre> используется для особых видов текста, в которых важно сохранить форматирование. Текст внутри этого тэга отображается на странице именно так, как он выглядит в коде страницы. В нём сохраняются все пробелы и переносы строки. Текст отображается моноширинным шрифтом, но это можно изменить с помощью стилей.

<pre>текст       текст после пробелов
следующая строка
следующая строка</pre>

Выделение текста

В HTML есть тэги для выделения текста. Тэги <b> и <strong> создают жирный шрифт. Хотя эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги <i> и <em> выделяют текст курсивом. Существует тэг <u>, который делает текст подчёркнутым, но использование его нежелательно.

Пример выделения текста:

<b>Жирный шрифт</b>
<strong>Жирный шрифт</strong>
<i>Курсивный шрифт</i>
<em>Курсивный шрифт</em>

Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов или стилей.

Другие тэги

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

text-decoration-line | htmlbook.ru

Краткая информация

Версии CSS

Описание

Определяет, как должна добавляться декоративная линия к тексту — подчеркивание, перечеркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.

Синтаксис

text-decoration-line: [ line-through || overline || underline ] | none

Значения

line-through

Создает перечеркнутый текст (пример).

overline

Линия проходит над текстом (пример).

underline

Устанавливает подчеркнутый текст (пример).

none

Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-line</title>
  <style>
   a {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: wavy;
    -moz-text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

Браузеры

Firefox поддерживает свойство -moz-text-decoration-line.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Тег | htmlbook.ru

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

Описание

Тег <strike> отображает текст как перечеркнутый. Этот тег аналогичен тегу <s>, который имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. В любом случае, теги <strike> и <s> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Синтаксис

<strike>Текст</strike>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 использование <strike> запрещено.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег STRIKE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <p><b>Список должников</b></p>
  <p><strike>Чебурашка</strike><br>
   <strike>Крокодил Гена</strike><br>
     Шапокляк</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <strike>

html — Как подчеркнуть текст без маркеров

1. Около
2. Товары
3. Для команд

1. Переполнение стека Общественные вопросы и ответы
2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
5. Реклама Обратитесь к разработчикам и технологам со всего мира
6. О компании

html — интервал между текстом и подчеркиванием

1. Около
2. Товары
3. Для команд

1. Переполнение стека Общественные вопросы и ответы
2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
5. Реклама Обратитесь к разработчикам и технологам со всего мира

HTML — полужирный, курсив и подчеркивание

Пример

Полужирный текст

Чтобы выделить полужирный текст, используйте теги или :

   Здесь полужирный текст 
  

или

   здесь полужирный текст 
  

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

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

Курсив

Чтобы выделить текст курсивом, используйте теги или :

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

или

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

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

Например, если вы хотите выделить действие внутри предложения, это можно сделать, выделив его курсивом с помощью : «Не могли бы вы уже отправить редактирование?»

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

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

В то время как сам элемент был объявлен устаревшим в HTMl 4, он был повторно введен с альтернативным семантическим значением в HTML 5 — для представления неартикулированной, нетекстовой аннотации. Вы можете использовать такую ​​визуализацию для обозначения текста с ошибками на странице или для обозначения собственного имени на китайском языке.

  
 Этот абзац содержит некоторый  неверный  текст.