Нужно добавить текст на HTML-страницу, сделать отдельное слово жирным, изменить цвет или оформить несколько абзацев? Для этого используются HTML-теги и CSS: HTML задаёт структуру и смысл содержимого, а CSS управляет его внешним видом.
Если нужен самый простой вариант: обычный текст в HTML чаще всего размещают внутри тега <p>. Заголовки создают с помощью <h1>–<h6>, важные фрагменты выделяют <strong> или <em>, а цвет, размер, шрифт и выравнивание задают через CSS. Если нужно оформить только одно слово или часть строки, удобно использовать <span>.
<h1>Заголовок страницы</h1>
<p>Это обычный текст в HTML.</p>Есть простой ориентир, который помогает не путаться: HTML отвечает на вопрос «что это за фрагмент текста?», а CSS — «как он должен выглядеть?». Ниже разберём основные теги, разницу между <b> и <strong>, работу с абзацами и переносами, а также несколько способов форматирования текста через CSS.
Как добавить текст в HTML
Текст размещается внутри HTML-элементов. У большинства таких элементов есть открывающий и закрывающий тег, между которыми находится содержимое страницы.
Например, обычный абзац выглядит так:
<p>Это мой первый абзац.</p>Для разных частей текста используются разные элементы:
<p>— обычный абзац;<h1>–<h6>— заголовки разных уровней;<br>— перенос строки внутри одного блока;<strong>— важный по смыслу фрагмент;<em>— смысловой акцент;<span>— универсальный контейнер для части строки, когда её нужно отдельно оформить.
Технически текст можно написать прямо внутри <body>, но для полноценной страницы лучше использовать подходящие элементы. Так структура остаётся понятной, а оформление проще контролировать через CSS. Если вы только начинаете изучать разметку, сначала полезно разобраться, что такое HTML и как он используется на странице.
<h1>О компании</h1>
<p>Мы создаём сайты и веб-приложения.</p>
<p>Работаем с HTML, CSS и JavaScript.</p>На практике полезнее всего сначала определить роль фрагмента — заголовок, абзац, предупреждение, термин или просто часть строки — и только потом выбирать тег. Такой порядок избавляет от многих проблем с разметкой ещё до того, как дело дойдёт до CSS.
Как вывести HTML-код как обычный текст
Есть отдельная ситуация: иногда нужно не создать HTML-элемент, а показать сам тег пользователю. Например, вывести на странице запись <p>. Если написать её в исходном коде напрямую, браузер воспримет конструкцию как HTML-разметку.
Поэтому специальные символы заменяют HTML-сущностями:
<— символ<;>— символ>;&— символ&.
Например:
<p>Это абзац</p>В браузере пользователь увидит:
<p>Это абзац</p>Для коротких фрагментов кода обычно используют <code>, а для многострочных примеров — сочетание <pre> и <code>. Это особенно полезно в инструкциях и статьях об HTML, где код должен отображаться как текст, а не выполняться как разметка.
Основные теги для форматирования текста
Форматирование текста в HTML связано не только с внешним видом. Некоторые теги передают смысл: например, обозначают важность, акцент или удалённую часть документа. Поэтому два элемента могут выглядеть почти одинаково в браузере, но использоваться для разных задач.
| Что нужно сделать | HTML | Назначение |
|---|---|---|
| Выделить важный текст | <strong>Важно</strong> | Показывает повышенную важность, серьёзность или срочность |
| Привлечь внимание | <b>Термин</b> | Выделяет фрагмент, не придавая ему дополнительной смысловой важности |
| Добавить смысловой акцент | <em>Именно это</em> | Передаёт акцент в содержании фразы |
| Отделить особый фрагмент | <i>Термин</i> | Может использоваться для термина, иностранного выражения или другого фрагмента с особым контекстом |
| Добавить специальную пометку | <u>Текст</u> | Обозначает фрагмент с нетекстовой аннотацией; браузеры обычно отображают его подчёркнутым |
| Подсветить фрагмент | <mark>Текст</mark> | Выделяет фрагмент, актуальный или релевантный в текущем контексте |
| Показать неактуальную информацию | <s>Старая цена</s> | Показывает, что содержимое больше не актуально |
| Показать удалённый текст | <del>Удалено</del> | Обозначает удалённую часть документа |
| Верхний индекс | x<sup>2</sup> | Подходит для степеней, сносок и обозначений |
| Нижний индекс | H<sub>2</sub>O | Используется в формулах и специальных обозначениях |
С тегом <u> стоит быть осторожнее. Исторически его часто воспринимают просто как способ подчеркнуть текст, однако в современном HTML у элемента есть собственное семантическое назначение. Если требуется только декоративное подчёркивание, понятнее использовать CSS. Заодно это снижает риск того, что обычный подчёркнутый текст пользователь примет за ссылку.
<mark>, напротив, полезен именно тогда, когда фрагмент нужно подсветить по смыслу:
<p>Обратите внимание на <mark>этот параметр</mark>.</p>Как сделать текст жирным в HTML
Для жирного текста в HTML можно встретить <b>, <strong> и CSS-свойство font-weight. Выбор зависит от того, зачем нужен акцент.
Пример с <b>:
<p>Обычный текст и <b>выделенный фрагмент</b>.</p>Чем <b> отличается от <strong>
Это тот случай, где внешний вид легко сбивает с толку. Тег <b> привлекает внимание к части текста, но сам по себе не сообщает, что эта информация важнее окружающего содержимого. <strong> используется там, где важность, серьёзность или срочность являются частью смысла.
<p>В статье рассматривается <b>HTML-разметка</b> текста.</p>
<p><strong>Не публикуйте пароль на странице.</strong></p>По умолчанию браузер обычно показывает оба элемента жирным шрифтом, поэтому визуально разница может быть незаметна. Но выбирать тег только по внешнему виду не стоит.
Если жирность нужна исключительно как часть дизайна, лучше использовать CSS:
.bold-text {
font-weight: 700;
}Абзацы, заголовки и переносы строк
Форматирование текста начинается со структуры. Для самостоятельных абзацев используют <p>, а заголовки <h1>–<h6> помогают показать иерархию разделов.
<h1>Как выбрать ноутбук</h1>
<h2>Процессор</h2>
<p>Процессор влияет на скорость выполнения задач.</p>
<h2>Оперативная память</h2>
<p>Объём памяти стоит выбирать с учётом программ, которыми вы пользуетесь.</p>Уровень заголовка выбирают по структуре документа, а не потому, что один заголовок визуально крупнее другого. Размер всегда можно изменить отдельно через CSS.
Когда использовать <br>
<br> переносит текст на новую строку, но не создаёт новый абзац. Он нужен там, где строки остаются частью одного смыслового блока: например, в адресе или стихотворении.
<p>
ул. Примерная, 10<br>
Киев<br>
Украина
</p>Один из частых соблазнов у начинающих — использовать несколько <br> подряд вместо нормальных абзацев:
Первый абзац<br><br>
Второй абзац<br><br>
Третий абзацКорректнее разделить текст элементами <p>:
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>Тег <hr> также может использоваться между тематически разными частями страницы. Его смысл — разделение тем, а не просто рисование декоративной линии.
Как изменить цвет, размер и шрифт текста
Цвет, размер, семейство шрифта, толщина, курсив и большинство других визуальных параметров текста задаются через CSS.
Для быстрого примера CSS можно добавить непосредственно через атрибут style:
<p style="color: #2563eb; font-size: 20px; font-family: Arial, sans-serif; font-weight: 600;">
Синий текст размером 20 пикселей
</p>Здесь используются:
color— цвет текста;font-size— размер;font-family— семейство шрифтов;font-weight— толщина начертания;font-style— например, обычное или курсивное начертание.
Для одного примера inline-стиль вполне допустим. Проблемы начинаются, когда одинаковое оформление копируется в десятки элементов. В таком случае лучше создать CSS-класс. Такой подход особенно удобен при полноценной вёрстке страницы на HTML и CSS.
<style>
.note {
color: #334155;
font-size: 18px;
font-weight: 600;
}
</style>
<p class="note">Текст с общим стилем.</p>Как изменить часть текста в HTML с помощью <span>
Если нужно изменить не весь абзац, а только одно слово, цену, термин или небольшой фрагмент, удобно использовать <span>. Сам по себе этот элемент обычно не меняет внешний вид: к нему добавляют класс и CSS-правила.
<p>Цена: <span class="price">500 грн</span></p>.price {
color: #d32f2f;
font-weight: 700;
}В результате только «500 грн» получит красный цвет и жирное начертание, а остальная часть абзаца сохранит обычный стиль.
Полезно помнить, что <span> — не универсальная замена всем другим тегам. Он особенно удобен, когда для нужного фрагмента нет более подходящего семантического элемента. Если текст действительно важен, сначала стоит рассмотреть <strong>; если требуется смысловой акцент — <em>.
Почему не стоит использовать тег <font>
В старом HTML-коде ещё можно встретить конструкции вроде:
<font color="red" size="5">Красный текст</font>Тег <font> устарел и не должен использоваться в современном HTML. Если вы встретили его в старой вёрстке, это скорее повод перенести оформление в CSS, чем повторять такой подход в новом коде.
Цвет, размер и гарнитуру следует задавать через CSS. Это отделяет содержимое страницы от оформления и заметно упрощает дальнейшее изменение дизайна.
Выравнивание и оформление текстовых блоков
После создания структуры CSS позволяет настроить читаемость и внешний вид текстового блока. Для этого часто используются свойства text-align, line-height и text-decoration.
.article-text {
text-align: left;
line-height: 1.6;
text-decoration: none;
}text-align управляет выравниванием. Среди распространённых значений — left, right, center и justify. Последнее стоит использовать осознанно: выравнивание по ширине не всегда улучшает читаемость длинного текста, особенно на узких экранах.
line-height задаёт высоту строки. Если интервал слишком маленький, строки визуально слипаются; чрезмерно большой интервал, наоборот, разрушает связь между ними.
text-decoration используется для оформления линий вокруг текста, в том числе подчёркивания. В случае со ссылками важно учитывать привычное поведение интерфейсов: если полностью убрать их отличительные признаки, пользователь может не понять, что элемент кликабельный.
Шрифт также заметно влияет на восприятие текста. При выборе гарнитуры можно ориентироваться на популярные шрифты для веб-дизайна, а подключение собственных файлов шрифтов уже относится к отдельной теме CSS.
Примеры форматирования текста в HTML
Ниже три коротких сценария. Их проще разобрать и адаптировать под свою страницу, чем начинать с большого фрагмента кода.
Пример 1. Жирный и курсивный текст
<p>
HTML отвечает за <strong>структуру страницы</strong>,
а CSS — за <em>её оформление</em>.
</p>Здесь используются смысловые элементы: <strong> отмечает важную часть, а <em> создаёт смысловой акцент.
Пример 2. Заголовок и абзацы
<h1>О курсе HTML</h1>
<p>На курсе изучается структура веб-страниц.</p>
<p><strong>Первый шаг</strong> — освоить основные HTML-теги.</p>Такой вариант подходит для статьи, страницы услуги, инструкции или другого структурированного контента.
Пример 3. Часть строки со своим стилем
<style>
.accent {
color: #e11d48;
font-weight: 700;
}
</style>
<p>
Скидка действует только <span class="accent">сегодня</span>.
</p>Класс применяется только к содержимому <span>, поэтому остальной абзац не меняется.
Частые ошибки при работе с текстом
Большинство ошибок появляется в двух случаях: когда HTML пытаются использовать как инструмент дизайна или, наоборот, начинают писать CSS до того, как определили правильную структуру содержимого.
- Несколько
<br>вместо абзацев. Самостоятельные абзацы лучше оформлять через<p>. <b>вместо смысловой важности. Для предупреждений и действительно важных фрагментов используйте<strong>.- Выбор заголовка по размеру. Уровень
<h1>–<h6>определяется структурой, а размер — CSS. - Десятки одинаковых inline-стилей. Повторяющееся оформление лучше вынести в CSS-класс.
- Использование
<font>. Это устаревший элемент; для цвета, размера и шрифта используйте CSS. <span>вместо подходящего смыслового тега. Если элемент несёт значение важности или акцента, сначала рассмотрите<strong>или<em>.- Подчёркивание обычного текста без необходимости. Пользователь может принять его за ссылку.
- Слишком много визуальных акцентов. Жирность, курсив, подчёркивание, подсветка и разные цвета одновременно делают текст сложнее для чтения.
Есть хороший рабочий порядок: сначала смысл и структура, затем HTML-элемент и только после этого внешний вид через CSS. Если после вёрстки приходится постоянно «лечить» структуру стилями, стоит проверить, правильно ли изначально выбраны HTML-теги.
Памятка:
- HTML отвечает за структуру и семантику содержимого.
- CSS отвечает за цвет, размер, шрифт, выравнивание и другое визуальное оформление.
- Для отдельной части строки используйте подходящий смысловой тег или
<span>с CSS-классом.
FAQ
Какой тег отвечает за текст в HTML?
Единственного тега для всего текста нет. Обычные абзацы чаще всего оформляются с помощью <p>, заголовки — <h1>–<h6>, а для отдельных смысловых фрагментов используются <strong>, <em> и другие элементы.
Как сделать текст жирным в HTML?
Для важного по смыслу текста используйте <strong>. Тег <b> подходит для привлечения внимания без повышения смысловой важности. Если нужна только визуальная жирность, применяйте CSS-свойство font-weight.
Как изменить только одно слово в HTML?
Оберните слово или нужный фрагмент в <span>, добавьте класс и задайте для него CSS. Например: <span class="accent">слово</span>.
Как вывести HTML-тег на странице как текст?
Специальные символы нужно заменить HTML-сущностями. Например, вместо < в исходном коде используют <, а вместо > — >. Тогда браузер покажет тег пользователю, а не попытается обработать его как разметку.
Как изменить цвет текста?
Используйте CSS-свойство color. Например: color: red;. Для современного HTML не нужно применять устаревший тег <font>.
Как изменить размер текста в HTML?
Размер задаётся CSS-свойством font-size. Его можно указать через inline-стиль для единичного примера или, что удобнее для повторного использования, внутри CSS-класса.
Чем HTML-форматирование отличается от CSS?
HTML задаёт роль и структуру содержимого: абзац, заголовок, важный фрагмент и другие элементы. CSS определяет, как эти элементы выглядят: их цвет, размер, шрифт, отступы, выравнивание и другие визуальные свойства.
Что лучше: inline-стили или CSS-класс?
Inline-стиль удобен для быстрого примера или одного элемента. Если одинаковое оформление используется несколько раз, CSS-класс практичнее: изменение одного правила обновит все элементы с этим классом.
Источники
Если возникает спорный случай с семантикой конкретного HTML-тега, лучше сверяться с актуальной документацией. Старые учебники и примеры в интернете нередко описывают элементы так, как они использовались в предыдущих версиях HTML.
- MDN Web Docs — справочник HTML-элементов.
- WHATWG HTML Living Standard — действующая спецификация HTML.