HTML. Форматирование текста
Форматирование текста в HTML. Теги, задающие формат шрифта: полужирный, курсив, подчеркнутый, зачеркнутый, подстрочный, надстрочный, выделенный и другие.
Полужирный текст
Полужирный шрифт задается парным тегом <b>:
| Пример | Результат |
|---|---|
| <b>Полужирный текст</b> | Полужирный текст |
Тег <b> используется только для оформления внешнего вида текста.
Важный полужирный текст
Важный полужирный текст задается парным тегом <strong>:
| Пример | Результат |
|---|---|
| <strong>Важный полужирный текст</strong> | Важный полужирный текст |
Браузеры воспринимают текст, выделенный тегом <strong>, как важный. На html-странице он отображается полужирным шрифтом. Тег <strong>, в отличие от тега <b>, несет дополнительный смысл, придающий тексту важность.
Курсивный текст
Курсивный шрифт задается парным тегом <i>:
| Пример | Результат |
|---|---|
| <i>Курсивный текст</i> | Курсивный текст |
Тег <i> используется только для оформления внешнего вида текста.
Важный курсивный текст
Важный курсивный текст задается парным тегом <em>:
| Пример | Результат |
|---|---|
| <em>Важный курсивный текст</em> | Важный курсивный текст |
Тег <em> задает шрифту курсивное начертание, но в отличие от тега <i>, несет дополнительный смысл, придающий тексту важность.
Выделенный текст
Выделенный текст задается парным тегом <mark>:
| Пример | Результат |
|---|---|
| <mark>Выделенный текст</mark> | Выделенный текст |
Тег <mark> помечает текст как выделенный, который обычно отличается от остального текста цветом фона.
Удаленный текст
Удаленный текст задается парным тегом <del>:
| Пример | Результат |
|---|---|
| <del>Удаленный текст</del> |
Тег <del> обычно помечает текст зачеркиванием и используется для выделения ошибочного текста или текста, считающегося удаленным в новой версии документа.
Вставленный текст
Вставленный текст задается парным тегом <ins>:
| Пример | Результат |
|---|---|
| <ins>Вставленный текст</ins> | Вставленный текст |
Тег <ins> обычно помечает текст подчеркиванием и используется для выделения текста, который был добавлен в новую версию документа. Это позволяет отследить изменения, внесенные в документ.
Подстрочный текст
Подстрочный текст задается парным тегом <sub>:
| Пример | Результат |
|---|---|
| <sub>Подстрочный текст</sub> | Подстрочный текст Обычный текст |
Тег <sub> отображает текст в виде нижнего индекса. Его можно использовать при написании химических формул и уравнений, например, формулы бензола: C6H6.
Надстрочный текст
Надстрочный текст задается парным тегом <sup>:
| Пример | Результат |
|---|---|
| <sup>Надстрочный текст</sup> | Надстрочный текст Обычный текст |
Тег <sup> отображает текст в виде верхнего индекса. Его можно использовать при указании сносок или написании математических формул и уравнений, например: y = x2.
Подчеркнутый текст
Подчеркнутый текст может быть задан парным тегом <u>:
| Пример | Результат |
|---|---|
| <u>Подчеркнутый текст</u> | Подчеркнутый текст |
Обычно, тег <u> отображает текст с нижнем подчеркиванием.
Атрибут text-decoration
С помощью стилей, а конкретнее — атрибута text-decoration, можно добавить линию, которая будет подчеркивать, зачеркивать или располагаться над текстом:
| Пример | Результат |
|---|---|
| <span>Подчеркнутый текст</span> | Подчеркнутый текст |
| <span>Зачеркнутый текст</span> | Зачеркнутый текст |
| <span>Линия над текстом</span> | Линия над текстом |
Эффекты текста в HTML: подчеркивание, зачеркивание и другие
Форматирование текста и визуальные эффекты — это база HTML.
В этом небольшом туториале вы можете найти коды HTML, которые видоизменяют визуально ваш текст. Итак, поехали.
- Зачеркивание текста
- Подчеркивание текта
- Жирный текст
- Увеличенный текст
- Наклоненный текст
- Верхний и нижний регистр
- Текст разного размера
- Подчеркивание пунктиром
- Текст с цветным фоном
- Двойное подчеркивание
- Текст в 3D рамке
- Разбитие текста на колонки
- Буквица
Зачеркивание текста
Что мы сделаем: Ваш текст будет здесь.
Зачем это может понадобиться — решать вам, а я приведу код, который поможем вам отобразить текст таким образом:
<s>Ваш текст будет здесь</s>
Подчеркивание текта
Что мы сделаем: Ваш текст будет здесь.
Здесь уже проще с применением: таким образом можно выделить ссылку, просто важный участок текст, на который читателю следует обратить внимание и так далее. Вот код подчеркивания текста:
<u>Ваш текст будет здесь</u>
Жирный текст
Жирный текст будет выглядеть таким образом: Ваш текст будет здесь.
И вот код HTML которым можно вывести такой тип текста:
<b>Ваш текст будет здесь</b>
Увеличенный текст
Вот как такой текст можно сделать:
<big>Ваш текст будет здесь</big>
Наклоненный текст
Один из базовых типов изменений текста выглядит так: Your text.
Выводится в HTML он таким образом:
<i>Ваш текст будет здесь</i>
Верхний и нижний регистр
Верхний регистр: Какой-то текст тут тоже текст
Нижний регистр: Какой-то текст тут тоже текст
Верхний регистр на HTML можно вывести таким образом:
Здесь будет основной текст<sup>а тут верхний регистр</sup>
А нижний можно сделать так:
Здесь будет основной текст<sub>а тут нижний регистр</sub>
Текст разного размера
Полезная штука, без большого количества кодов и примеров он выводится таким образом:
<font size="+3">Ваш текст будет здесь</font>
Число можно изменить на свое.
Можно вставить и отрицательное значение — это допустимо и, как не сложно догадаться, уменьшает размер вашего текста.
Подчеркивание пунктиром
Тоже довольно распространенный эффект, который выводится в HTML таким образом:
<span>Текст, подчеркнутый пунктиром</span>
Текст с цветным фоном
Код будет выглядеть таким образом:
<span>Цветной текст с цветным фоном</span>
Результат исполнения кода будет таким:
Цветной текст с цветным фоном
Двойное подчеркивание
Код такого текста выглядит таким образом (значения можно менять на свои):
<span>Текст, подчеркнутый двойной чертой</span>
Исполнение кода:
Текст, подчеркнутый двойной чертой
Текст в 3D рамке
Очень интересный визуальный эффект и мне кажется он может найти свое применение на вашем сайте:
<span> Ваш текст в объемной 3D-рамке</span>
Результат исполнения будет выглядеть так:
Ваш текст в объемной 3D-рамке
Разбитие текста на колонки
Код выглядит таким образом:
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>
Исполнение кода:
| текст левой колонки | текст правой колонки |
Примечательно, что WordPress, на котором работает этот блог, в этом случае добавляет таблицу.
Буквица
Напоследок я решил оставить буквицу. Вот код (опять же, значения можете изменять по своему усмотрению):
<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>
Вот исполнение:
Внекотором царстве…
Как подчеркивать в HTML
html10 месяцев назад
от Naima Aftab
При размещении контента на веб-страницах разработчики часто хотят подчеркнуть определенный текст по нескольким причинам, например, чтобы привлечь внимание пользователей, изменить стиль текста или, возможно, представить текст с ошибкой. Какова бы ни была причина, если вы хотите подчеркнуть что-то в html, существуют различные способы выполнения этой задачи. Эти подходы обсуждались в этом блоге.
Как подчеркивать текст с помощью тега
Чтобы подчеркнуть текст с помощью тега , просто поместите подчеркиваемый текст внутри этого тега. Назначение этого тега состоит в том, чтобы в основном представить текст, который является неявным, имеет другой стиль или написан с ошибками.
Первоначально этот тег был исключен из HTML, но снова был включен в HTML5.
HTML
Это заголовок
Это абзац.
В приведенном выше коде мы просто делаем заголовок и абзац. Однако мы хотим подчеркнуть одно слово внутри абзаца, поэтому мы заключаем это конкретное слово в тег .
Вывод
Вот как можно подчеркнуть текст с помощью тега .
Существует еще один способ подчеркивания текста, который обсуждался в следующем разделе.
Как подчеркивать текст с помощью атрибута стиля
Другой способ подчеркивания текста в HTML — использование атрибута стиля, который определяет встроенный стиль для определенного элемента.
HTML
Это заголовок
Это абзац.
В приведенном выше коде вы заметит, что мы используем элемент для подчеркивания слова и устанавливаем для его атрибута стиля значение «text-decoration: underline». Таким образом, нужное нам слово будет подчеркнуто.
Вывод
Слово было успешно подчеркнуто с использованием атрибута стиля.
Если вы хотите подчеркнуть текст с помощью CSS, см. фрагмент кода ниже.
HTML
Это заголовок
Это абзац.
Здесь мы, прежде всего, заключаем подчеркиваемое слово в элемент , а затем с помощью внутреннего CSS устанавливаем для свойства text-decoration элемента значение подчеркнуть.
Приведенный выше код будет генерировать тот же результат, что и выше.
Заключение
Для подчеркивания текста в html используйте тег или атрибут стиля. Просто оберните подчеркиваемый текст внутри тега или при использовании атрибута стиля установите для свойства text-decoration значение подчеркивания. Назначение тега
Об авторе
Naima Aftab
Я профессионал в области разработки программного обеспечения и очень люблю писать. Я занимаюсь техническим письмом как своей основной карьерой и делюсь своими знаниями через слова.
Посмотреть все сообщения
html — Какой тег следует/можно использовать для подчеркивания текста?
Задавать вопрос
спросил
Изменено 5 лет, 1 месяц назад
Просмотрено 2к раз
Прежде всего, я понимаю, что стили в HTML должны обрабатываться CSS, и я не хочу это менять.
Мне просто нужен сплошной тег, который я могу использовать для подчеркивания, тег означает для подчеркнутого текста или такой, который имеет смысл использовать как таковой. Затем я могу стилизовать его с помощью CSS.
Где же этот тег?
Почему strong , b , em , i и т. д. прекрасно подходят (и часто автоматически стилизуются в браузерах), но подчеркнутое является запретным плодом?
Я бы не хотел писать
подчеркнутый текст ИЛИ некоторый текст
когда я могу просто использовать
привет
и стиль?
- html
- семантическая разметка
- подчеркивание
1
Элемент u предназначался для подчеркивания, начиная с HTML 3.2. HTML 4.01 не одобряет его, «объявив его устаревшим», а HTML5 предлагает неясным образом переопределить его значение.
Следует ли подчеркивать что-либо, кроме ссылок на веб-страницах, — это другой вопрос. Так же и вопрос, следует ли вам думать с точки зрения логической структуры, а не визуального рендеринга.
2
Подчеркивание текста — плохая идея, потому что оно должно быть зарезервировано исключительно для ссылок. Пользователи обычно ожидают, что смогут отслеживать подчеркнутый текст и что-то произойдет.
Тем не менее, есть одно главное исключение, о котором я могу думать:
Цена:12,34£9,87£!
Большинство, если не все браузеры отобразят новую цену там с подчеркиванием, и люди поймут, что это вставка.
2
Я думаю, что лучше подойти ко всей проблеме, если мы попытаемся понять, чего пытаются достичь разработчики спецификаций HTML.
В первые дни HTML был практически единственным инструментом для создания гипертекстовых документов, поэтому он пытался предоставить все необходимое. По мере роста Интернета вскоре стало очевидно, что это комплексное решение не масштабируется. Смешивание контента и презентации не давало полного контроля ни над тем, ни над другим. Итак, было сделано два шага:
- Создан новый язык для работы с визуальными элементами
- Сам HTML был очищен, чтобы сосредоточиться на определении содержимого
Проблема с подчеркиванием в том, что оно само по себе не имеет никакого значения. Он будет иметь значение, если вы назначите его в контексте вашего приложения (например, вы можете решить, что подчеркнутый текст будет использоваться для авторов книг в каталоге вашей онлайн-библиотеки). Поэтому, когда ребята из W3C создали HTML-теги для нескольких типов контента (заголовки, аббревиатуры, даты…), они просто не подумали о подчеркивании: оно намеренно выходило за рамки языка.
Конечно, на самом деле есть тег , но подчеркивание — это только служебное предложение, потому что важной частью является семантика — например, печать крупным шрифтом.
2
Это не запрещено, но лучше не использовать его, так как тег подчеркивания устарел в HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U, поэтому не будет подтверждать.
6
Подчеркивание элемента — это скорее вопрос стиля. Так что лучше дать класс типа «underline_style» и в CSS дать правильные правила.
3
Элемент u вы все еще можете использовать для подчеркивания, но поскольку он сложнее, чем b , i , strong и em , вам потребуется CSS для его стилизации в деталях.