Карта сайта

Урок 4: Работа с текстом в HTML

/Уроки по HTML/CSS/Урок 4: Работа с текстом в HTML
Урок 4: Работа с текстом в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

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

Текст это 90% контента в интернете. От его оформления зависит:

  1. Читабельность — насколько легко пользователь воспринимает информацию.
  2. Семантика — как браузеры и поисковые системы понимают структуру вашей страницы.
  3. Доступность — удобство для людей с ограниченными возможностями (например, скринридеры).

Сегодня мы разберем три ключевых элемента: заголовки, параграфы и форматирование.

Заголовки: <h1>–<h6>

Заголовки это «скелет» вашего контента. Они помогают разбить текст на логические блоки и указать их важность. В HTML есть шесть уровней заголовков, от <h1> (самый важный) до <h6> (наименее важный).

Как использовать заголовки?

  • <h1>это главный заголовок страницы. Должен быть единственным на странице и отражать ее основную тему.
  • <h2>–<h6> подзаголовки, которые структурируют контент внутри разделов.

Пример:

<h1>Как научиться верстать сайты?</h1>
<h2>Что такое HTML?</h2>
<h3>Синтаксис HTML</h3>
<h2>Что такое CSS?</h2>

Важные правила:

  1. Не пропускайте уровни. После <h2> должен идти <h3>, а не <h4>.
  2. Не используйте заголовки для изменения размера текста. Для этого есть CSS.
  3. <h1> — обязательный элемент для SEO. Он помогает поисковикам понять, о чем ваша страница.

Параграфы: <p>

Параграфы это блоки текста, которые отделяются друг от друга отступами. Тег <p> используется для оборачивания основного текста.

Пример:

<p>Привет! Меня зовут Максим, и я начинающий веб-разработчик.</p>
<p>Сегодня я изучаю HTML и уже научился создавать заголовки.</p>

Советы:

  • Разбивайте текст на короткие параграфы (3–5 строк). Так его легче читать.
  • Не добавляйте пустые <p></p> для создания отступов. Для этого позже будем использовать CSS.

Форматирование текста: <strong> <em>

Чтобы выделить важные части текста, используются теги <strong> и <em>. Они придают словам семантический смысл, а не только визуальное оформление.

<strong> — важность

Выделяет текст, который имеет критическую важность (например, предупреждения). По умолчанию отображается жирным.

<p><strong>Внимание!</strong> Не закрывайте страницу до сохранения данных.</p>

<em> — акцент

Подчеркивает интонационное ударение (например, иронию или ключевой термин). По умолчанию отображается курсивом.

<p>Это было <em>очень</em> просто.</p>

Чем не являются эти теги?

  • <strong> — это не просто «жирный текст».
  • <em> — не просто «курсив».

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

Практические задачи

Закрепим знания на практике! Создайте HTML-документ и выполните задания:

Задача 1: Создайте структуру статьи

Напишите код для статьи с заголовком «Как приготовить идеальный кофе?»:

  • <h1> — главный заголовок.
  • 3 раздела с подзаголовками <h2>: «Выбор зерен», «Помол», «Приготовление».
  • В каждом разделе добавьте 2–3 параграфа с текстом (можно использовать рыбу, например, Lorem ipsum).

Пример решения:

<h1>Как приготовить идеальный кофе?</h1>
<h2>Выбор зерен</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Помол</h2>
<p>Lorem ipsum dolor sit amet...</p>

Задача 2: Выделите ключевые моменты

Добавьте в параграфы:

  • 2 случая использования <strong> (например, важные шаги).
  • 2 случая использования <em> (например, акцент на деталях).

Пример:

<p><strong>Шаг 1:</strong> Насыпьте в чашку <em>ровно</em> 2 ложки кофе.</p>

Задача 3: Иерархия заголовков

Создайте структуру страницы «Мое хобби» с правильной вложенностью:

  • <h1> — «Фотография».
  • <h2> — «Как выбрать камеру?».
  • <h3> — «Зеркальные или беззеркальные».
  • <h2> — «Основы композиции».

Частые ошибки новичков

  1. Каша из заголовков
<h1>Статья</h1>
<h3>Подзаголовок</h3> <!-- Пропущен h2! -->
  1. Путаница с тегами
<p>Текст <b>жирный</b> и <i>курсив</i></p> <!-- Используйте strong и em! -->
  1. Длинные параграфы
    Стена текста без разбивки утомляет читателя.

В следующем уроке мы подключим CSS и научимся стилизовать наш текст: менять шрифты, цвета и размеры. А пока практикуйтесь!

Готовы к большему? Полный курс «HTML/CSS для начинающих», там 30 уроков, практика и поддержка.

У вас всё получится! Теория без практики мертва. Пишите код, экспериментируйте и скоро вы сможете верстать сайты как профессионал.