Что такое HTML-теги
Если HTML — это скелет страницы, то теги — это отдельные кости этого скелета. Каждая кость имеет своё назначение. Позвоночник держит спину, рёбра защищают сердце, череп защищает мозг. В HTML точно так же. Каждый тег служит своей цели.
Думайте о тегах как о командах. Вы командуете браузеру: «Это заголовок, покажи его большим шрифтом». Или: «Это ссылка, при клике переходи по адресу». Браузер слушается и выполняет команды. Как дрессированная собака, только быстрее и точнее.
Каждый тег пишется в угловых скобках. Открывающий тег выглядит как <тег>. Закрывающий как </тег>. Между ними живёт содержимое. Представьте матрёшку. Открываете верхнюю половинку, внутри лежит что-то, закрываете. Браузер видит открывающий тег и понимает: «Сейчас начнётся содержимое определённого типа». Видит закрывающий и думает: «Всё, содержимое закончилось, можно переходить дальше».
Начнём с самых важных тегов, которые встречаются на каждом втором сайте.
Заголовки: от главного к второстепенному
Тег <h1> — это главный заголовок страницы. Как название книги на обложке. Крупное, заметное, читаете первым делом. На странице должен быть только один <h1>, потому что главный заголовок один. Браузер показывает его самым большим шрифтом. Пишете: <h1>Добро пожаловать на мой сайт</h1>. Браузер выводит эту строку огромными буквами, как вывеску над магазином.
Теги <h2>, <h3>, <h4> — это подзаголовки. От <h1> к <h6> размер постепенно уменьшается. Как главы в книге. Сначала название книги, потом название главы, потом название параграфа. <h2> используйте для основных разделов, <h3> для подразделов внутри <h2>. Это помогает организовать информацию, как полки в шкафу. На верхней полке важное, на нижних менее важное.
<h1>Главная страница сайта</h1>
<h2>Раздел: О компании</h2>
<p>Информация о компании...</p>
<h3>История создания</h3>
<p>Текст про историю...</p>
<h3>Наша команда</h3>
<p>Информация о команде...</p>
<h2>Раздел: Наши услуги</h2>
<p>Описание услуг...</p>Параграфы: простой текст
Тег <p> — это параграф. Обычный текст, как в книге или газете. Всё, что пишете внутри <p>, браузер показывает как обычный текст с отступами сверху и снизу. <p>Это простой текст, ничего сложного</p>. Когда напишете второй параграф, браузер автоматически добавит между ними воздух, чтобы не слипались. Как абзацы в сочинении.
<p>Это первый параграф текста. Браузер добавит отступы сверху и снизу.</p>
<p>Это второй параграф. Между параграфами автоматически появится воздух.</p>
<p>Третий параграф. Каждый параграф — это отдельный блок текста.</p>Ссылки и изображения
Тег <a> — это ссылка. Гиперссылка, которая переводит вас с одной страницы на другую. Без ссылок интернет был бы как город без дорог. Каждый дом стоит отдельно, а дойти от одного к другому невозможно. Браузер показывает ссылки синим цветом и подчёркивает. Пишете: <a href="https://example.com">Кликните сюда</a>. Атрибут href — это адрес, куда идти. Как указатель на дороге: «Москва 100 км, направо».
Тег <img> — это изображение. Картинки, фотографии, иконки, мемы. Всё визуальное. Пишете: <img src="foto.jpg" alt="Описание фото">. Атрибут src — это адрес файла с картинкой. Атрибут alt — это текст на случай, если картинка не загрузилась. Или для людей с плохим зрением, которые используют программы чтения с экрана. Этот тег не имеет закрывающей части, потому что внутри него ничего нет. Как дорожный знак, он самодостаточен.
<!-- Ссылки -->
<a href="https://example.com">Перейти на главную</a>
<a href="about.html">О нас</a>
<a href="contact.html">Контакты</a>
<!-- Изображения -->
<img src="logo.png" alt="Логотип компании">
<img src="photo.jpg" alt="Фотография офиса">
<!-- Ссылка с изображением внутри -->
<a href="gallery.html">
<img src="gallery-preview.jpg" alt="Перейти в галерею">
</a>Списки: упорядоченные и неупорядоченные
Теги <ul>, <ol> и <li> — это списки. <ul> — это неупорядоченный список, как список покупок. Перед каждым пунктом точка. <ol> — это упорядоченный список, как инструкция по сборке мебели. Перед каждым пунктом номер. <li> — это элемент списка. Выглядит так:
<ul>
<li>Молоко</li>
<li>Хлеб</li>
<li>Яйца</li>
</ul>Браузер покажет три строки с точками. Если нужны номера, меняете <ul> на <ol>. Списки — это способ структурировать перечисления, чтобы не превращалось в сплошной текст.
Акценты в тексте
Теги <strong> и <em> — это акценты в тексте. <strong> делает текст жирным и говорит браузеру: «Это важно, обратите внимание». <em> делает текст наклонным и говорит: «Это акцент, интонация». Используйте: <strong>Срочно!</strong> и <em>Может быть</em>. Раньше программисты использовали <b> для жирного и <i> для наклонного. Но это неправильно. <b> и <i> просто меняют вид, а <strong> и <em> несут смысл. Как разница между криком и просто громкой речью.
<p>Это <strong>очень важная</strong> информация!</p>
<p>Возможно, это <em>стоит учесть</em> при работе.</p>
<p><strong>Внимание!</strong> Сайт будет <em>временно</em> недоступен.</p>
<!-- Сравнение с устаревшими тегами -->
<p>Правильно: <strong>важно</strong> и <em>акцент</em></p>
<p>Неправильно: <b>важно</b> и <i>акцент</i></p>Контейнеры: div и span
Теги <div> и <span> — это контейнеры. Они не имеют своего смысла, но нужны для группировки. Как коробки для вещей. <div> — это большая коробка, занимает всю ширину. <span> — это маленькая коробка, занимает только место для содержимого. Используете их, когда хотите применить стиль к группе элементов. Например, обернуть три параграфа в <div> и покрасить их все в синий.
<!-- div — блочный контейнер, занимает всю ширину -->
<div>
<h2>Блок новостей</h2>
<p>Первая новость</p>
<p>Вторая новость</p>
<p>Третья новость</p>
</div>
<!-- span — строчный контейнер, только для содержимого -->
<p>Скидка <span>50%</span> на все товары!</p>
<p>Цена: <span>1000 рублей</span></p>Семантические блоки
Теги <header>, <main>, <footer> — это семантические блоки. <header> — это шапка сайта, где живут логотип и меню. <main> — это основное содержимое, то, ради чего человек пришёл. <footer> — это подвал, где прячутся контакты и копирайт. Это называется семантическая разметка. Вы не просто кидаете элементы на страницу, а говорите браузеру: «Это голова, это тело, это ноги». Как разметка анатомии в учебнике биологии.
Теперь главное правило. Когда выбираете тег, задайте себе вопрос: «Что это за содержимое?» Это заголовок? Используйте <h1> или <h2>. Это обычный текст? Используйте <p>. Это картинка? Используйте <img>. Правильный тег для нужного содержимого. Когда пишете семантически правильно, сайт становится понятен браузеру, поисковым роботам и людям с ограничениями. Как хорошая речь понятна всем.
<!-- Правильное использование тегов -->
<h1>Главный заголовок страницы</h1>
<p>Обычный текст в параграфе.</p>
<h2>Подзаголовок раздела</h2>
<img src="photo.jpg" alt="Описание фотографии">
<p>Текст под изображением.</p>
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
</ul>Семантическая разметка. Правильные теги для правильного содержимого
Это называется семантическая разметка. Звучит научно, но смысл простой: используйте теги по назначению. Не пишите всё в <div>. Не форматируйте с помощью <b> и <i>. Используйте правильные теги. Как писать грамотно на русском. Можете писать всё прописными буквами, ставить восклицательные знаки везде. Люди поймут. Но с грамматикой читать приятнее и понятнее.
На практике часто встречаются ошибки. Начинающие пишут пять <h1> на одной странице. Или забывают закрывать теги. Или используют <b> вместо <strong>. Браузер обычно прощает и показывает что-то похожее на задуманное. Но это создаёт технический долг. Потом придётся переписывать. Лучше сразу делать правильно. Как в жизни: можете наспех собрать шкаф без инструкции, но лучше потратить лишние полчаса и собрать по правилам.
Практический пример
Создайте новый файл в VS Code. Назовите tags.html. Напишите туда:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример использования тегов</title>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт</h1>
</header>
<main>
<h2>О проекте</h2>
<p>Это простой пример использования основных HTML тегов.</p>
<h3>Почему это важно</h3>
<p>Правильное использование тегов делает сайт <strong>понятным</strong> для браузеров и <em>удобным</em> для пользователей.</p>
<h3>Список преимуществ</h3>
<ul>
<li>Лучшая доступность</li>
<li>Удобство для поисковых систем</li>
<li>Чистый и понятный код</li>
</ul>
<p>Подробнее читайте на <a href="https://example.com">официальном сайте</a>.</p>
</main>
<footer>
<p>© 2025 Мой сайт</p>
</footer>
</body>
</html>Сохраните файл. Откройте в браузере. Видите? Браузер автоматически сделал заголовок большим, параграфы с отступами, ссылку синей. Вы просто сказали, что это такое, а браузер сам решил, как показать. Это и есть сила семантики.
Заключение
С этими тегами вы уже можете создавать полноценные страницы. Остальные теги — это специальные случаи для конкретных задач. Но основа — это заголовки, параграфы, ссылки, картинки и списки. Запомните их, используйте правильно, и ваш код будет чистым и понятным. Если пока что трудно всё это запомнить, это нормально. В следующих уроках разберём все теги на практике более подробно.
Какой тег используется для создания нумерованного списка?
Какой тег используется для главного заголовка страницы?
Какие из перечисленных тегов являются семантическими блоками?
В чём основное отличие <strong> от <b>?
HTML-теги — справочник на MDN