Главная страница » HTML » 15. Форматированный текст

15. Форматированный текст

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

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

Жирный текст

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

				
					<p>Это <b>жирный текст</b>, а это <strong>очень важный текст</strong>.</p>

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

Для отображения текста курсивом используйте тег  или . Тег  указывает на выделение текста с акцентом.

				
					<p>Это <i>курсивный текст</i>, а это <em>текст с акцентом</em>.</p>

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

Тег  используется для подчеркивания текста.

				
					<p>Это <u>подчеркнутый текст</u>.</p>

Зачеркнутый текст

Тег <s> или <del> используется для зачеркнутого текста.

				
					<p>Это <s>зачеркнутый текст</s> или <del>удаленный текст</del>.</p>

Сверхстрочный и подстрочный текст

Для создания сверхстрочного текста используйте тег , а для подстрочного — тег .

				
					<p>Это текст с <sup>сверхстрочным</sup> и <sub>подстрочным</sub> форматированием.</p>

Цитаты

Для кратких цитат используйте тег <q>, который автоматически добавляет кавычки.

				
					<p>Аристотель сказал: <q>Мы есть то, что мы постоянно делаем.</q></p>

Жирный текст

Тег  делает текст жирным и подчеркивает его важность.

				
					<strong>Это жирный и важный текст.</strong>

Преформатированный текст

Тег <pre> сохраняет пробелы и переводы строк, как они есть в исходном коде.

				
					<pre>
Это пример преформатированного текста.
  Он сохраняет все пробелы и переводы строк.
</pre>

Распространённые ошибки

Неправильное вложение тегов: Убедитесь, что теги правильно вложены друг в друга.

				
					<p>Это <b>неправильное <i>вложение</b> тегов</i>.</p>

Использование тегов не по назначению: Используйте теги в соответствии с их семантическим значением.

				
					<b>Текст для выделения</b> (используйте <strong>).

Заключение

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

Теперь, когда вы освоили основные теги для форматирования текста, вы можете применять их в своих проектах для создания привлекательного и профессионального контента.

Тестовое задание

Абзац с жирным и курсивным текстом.
Подчеркнутый и зачеркнутый текст.
Сверхстрочный и подстрочный текст.
Краткую цитату и длинную цитату.
Пример кода и преформатированный текст.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Форматированный текст в HTML</title>
</head>
<body>
  <h1>Примеры форматирования текста</h1>
  <p>Это <b>жирный текст</b> и <i>курсивный текст</i>.</p>
  <p>Это <u>подчеркнутый текст</u> и <s>зачеркнутый текст</s>.</p>
  <p>Это <sup>сверхстрочный текст</sup> и <sub>подстрочный текст</sub>.</p>
  <p>Цитата: <q>Это краткая цитата.</q></p>
  <blockquote>
    Это пример длинной цитаты. Она может содержать несколько абзацев текста и часто используется для цитирования больших отрывков.
  </blockquote>
  <p>Пример кода: <code>&lt;div&gt;Пример кода&lt;/div&gt;</code></p>
  <pre>
    Это пример преформатированного текста.
      Он сохраняет все пробелы и переводы строк.
  </pre>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.