Коды html для текста: Форматирование текста | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTMLОписаниеПример
<b>Текст</b>Жирное начертание текстаТекст
<i>Текст</i>Курсивное начертание текстаТекст
<sup>Текст</sup>Верхний индексe=mc2
<sub>Текст</sub>Нижний индексH2O
<pre>Текст</pre>Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em>Курсивный текстТекст
<strong>Текст</strong>Жирное начертание текстаТекст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

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

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

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

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.

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

текст

HTML по теме

  • Тег <b>
  • Тег <em>
  • Тег <i>
  • Тег <strong>
  • Тег <sub>
  • Тег <sup>

Статьи по теме

  • Форматирование текста

HTML теги для форматирования текста

❮ Назад Вперед ❯

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

Рассмотрим подробно теги форматирования и объясним нюансы их применения.

Теги <h2>-<h6> используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от <h2> до <h6>. <h2> используется для обозначения самого важного, а <h6> наименее важного заголовков.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы </title>
  </head>
  <body>
    <h2>Заголовок первого уровня</h2>
    <h3>Заголовок второго уровня</h3>
    <h4>Заголовок третьего уровня</h4>
    <h5>Заголовок четвертого уровня</h5>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мы использовали тег &lt;strong&gt;, чтобы выделить <strong> этот важный фрагмент текста</strong>.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <body>
    <p>Это обычный абзац</p>
    <p>Важный фрагмент текста выделяется <em>курсивным начертанием</em></p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста. Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <pre>Крошка сын
               к отцу пришёл,
               и спросила кроха:
               — Что такое 
                хорошо
                и что такое 
                плохо? —</pre>
  </body>
</html>

Попробуйте сами!

Результат

Как вы заметили, все пробелы и переносы строк сохранены в браузере.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега SMALL</title>
  </head>
  <body>
    <p>Процентная ставка всего 10%*</p>
    <small>* - в день</small> /
  </body>
</html>

Попробуйте сами!

Результат

Тег <del> выделяет часть текста, которая была удалена из документа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мой любимый цвет <del>зеленый</del> <ins>синий</ins>!</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <s> используется для определения текста, который больше не актуален.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><s>Я учусь в школе</s></p>
    <p>Я учусь в институте.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Ее любимые цветы <del>фиалки</del> <ins>подснежники</ins>․</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Здесь мы использовали <u>элемент &lt;u&gt;</u>.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Формула воды -H<sub>2</sub>O,  а формула спирта - C<sub>2</sub>H<sub>5</sub>ОН </p>
    <p>E = mc<sup>2</sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. </p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (от англ.  HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <p> определяет абзац в тексте. Друг от друга абзацы отделяются пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Это первый абзац</p>
    <p>Это второй абзац</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <br> устанавливает перевод строки, то есть все написанное после него, будет перенесено на новую строку. В отличие от тега <p> перед строкой пустой отступ не добавляется.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример использования тега &lt;br&gt;</h2>
    <p> Внутри абзаца мы можем вставить тег &lt;br /&gt;, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h2>Футбол</h2>
    <p>Командный вид спорта, в котором целью является забить мяч в ворота соперника. </p>
    <hr>
    <h2>Баскетбол</h2>
    <p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника.</p>
  </body>
</html>

Попробуйте сами!

Результат

Форматирование HTML — javatpoint

следующий → ← предыдущая

Форматирование HTML — это процесс форматирования текста для улучшения внешнего вида. HTML дает нам возможность форматировать текст без использования CSS. В HTML много тегов форматирования. Эти теги используются для выделения текста жирным шрифтом, курсивом или подчеркиванием. Доступно почти 14 вариантов того, как текст отображается в HTML и XHTML.

В HTML теги форматирования делятся на две категории:

  • Физический тег: Эти теги используются для придания визуального вида тексту.
  • Логический тег: Эти теги используются для добавления к тексту некоторого логического или семантического значения.
ПРИМЕЧАНИЕ. Некоторые физические и логические теги могут выглядеть одинаково, но их семантика будет разной.

Здесь мы изучим 14 тегов форматирования HTML. Ниже приведен список форматирования текста HTML.

Имя элемента Описание
Это физический тег, который используется для выделения текста между ними жирным шрифтом.
<сильный> Это логический тег, который сообщает браузеру, что текст важен.
<я> Это физический тег, который используется для выделения текста курсивом.
Это логический тег, который используется для отображения содержимого курсивом.
<знак> Этот тег используется для выделения текста.
<у> Этот тег используется для подчеркивания текста, написанного между ним.
Этот тег используется для отображения текста в телетайпе. (не поддерживается в HTML5)
<забастовка> Этот тег используется для зачеркивания части текста. (Не поддерживается в HTML5)
Отображает содержимое немного выше обычной строки.
Отображает содержимое чуть ниже обычной строки.
<удалить> Этот тег используется для отображения удаленного контента.
Этот тег отображает добавленный контент
<большой> Этот тег используется для увеличения размера шрифта на одну условную единицу.
<маленький> Этот тег используется для уменьшения размера шрифта на одну единицу по сравнению с базовым размером шрифта.

1) Жирный текст

Элементы форматирования HTML и

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

См. этот пример:

Напишите первый абзац жирным шрифтом.

Протестируйте сейчас

Вывод:

Напишите первый абзац жирным шрифтом.

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

См. этот пример:

Это важный контент, и это обычный контент

Протестируйте сейчас

Вывод:

Это важный контент, и это обычный контент

Пример

<голова>элементы форматирования <тело>

Объяснение элемента форматирования

Это важный контент, и это обычный контент

Протестируйте сейчас

2) Курсив

Элементы форматирования HTML и

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

См. этот пример:

Напишите первый абзац курсивом.

Протестируйте сейчас

Вывод:

Напишите первый абзац курсивом.

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

См. этот пример:

Это важный контент, который отображается курсивом.

Протестируйте сейчас

Вывод:

Это важный контент , который отображается курсивом.

<голова>элементы форматирования <тело>

Объяснение элемента форматирования курсивом

Это важный контент, который отображается курсивом.

Протестируйте сейчас

3) Форматирование с пометкой HTML

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

См. этот пример:

Я хочу поставить

Метку на твое лицо

Протестируйте сейчас

Вывод:

Я хочу поставить

Знак на твое лицо

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

Если вы пишете что-либо внутри элемента ........., отображается подчеркнутым текстом.

См. этот пример:

Напишите первый абзац подчеркнутым текстом.

Протестируйте сейчас

Вывод:

Напишите первый абзац подчеркнутым текстом.

5) Текст предупреждения

Все, что написано в элементе .........., отображается с зачеркиванием. Это тонкая линия, которая пересекает заявление.

См. этот пример:

Напишите первый абзац с зачеркиванием.

Протестируйте сейчас

Вывод:

Напишите свой первый абзац с зачеркиванием.

6) Моноширинный шрифт

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

Примечание. Мы знаем, что большинство шрифтов известны как шрифты переменной ширины, потому что разные буквы имеют разную ширину. (например: «w» шире, чем «i»). Моноширинный шрифт обеспечивает одинаковое пространство между каждой буквой.

См. этот пример:

Здравствуйте, Напишите свой первый абзац моноширинным шрифтом.

Протестируйте сейчас

Вывод:

Здравствуйте, напишите свой первый абзац моноширинным шрифтом.

7) Надстрочный текст

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

См. этот пример:

Здравствуйте, Напишите свой первый абзац в верхнем индексе.

Протестируйте сейчас

Вывод:

Привет Напишите свой первый абзац в верхнем индексе.

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

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

См. этот пример:

Здравствуйте, Напишите свой первый абзац в нижнем индексе.

Протестируйте сейчас

Вывод:

Привет Напишите свой первый абзац в нижнем индексе.

9) Удален текст

Все, что помещается в пределах ........., отображается как удаленный текст.

См. этот пример:

Здравствуйте, Удалите первый абзац.

Протестируйте сейчас

Вывод:

Привет

10) Вставленный текст

Все, что помещается в пределах . ........, отображается как вставленный текст.

См. этот пример:

Удалите первый абзац.Напишите еще один абзац.

Протестируйте сейчас

Вывод:

Удалите первый абзац. Напишите еще один абзац.

11) Крупный текст

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

См. этот пример:

Здравствуйте, Напишите абзац более крупным шрифтом.

Протестируйте сейчас

Вывод:

Здравствуйте Напишите абзац более крупным шрифтом.

12) Мелкий текст

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

См. этот пример:

Здравствуйте, Напишите абзац более мелким шрифтом.

Протестируйте сейчас

Вывод:

Привет Напишите абзац более мелким шрифтом.

Следующая темаHTML Заголовок

← предыдущая следующий →

Преобразование HTML в текст

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

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

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

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

Конвертер HTML в текст

Вставьте свой HTML-код в поле ниже и нажмите кнопку конвертировать.

Новый чистый текст появится в поле внизу страницы.

Новый текст без тегов HTML

Скопируйте отформатированный текст из поля ниже.

Скачать новый текст

HTML to Text Tool Revisions

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

Сегодня праздник?

Узнайте на нашем новом сайте: All Holidays

Дополнительные бесплатные инструменты для проверки!

  • Преобразование содержимого документа Word в код HTML
  • Автоматически расположить текст в алфавитном порядке
  • Заглавные буквы или Caps Lock
  • Генератор случайных чисел
  • Преобразование десятичного числа в двоичное

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

  • Удалить разрывы строк: удалите ненужные разрывы строк из текста.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *