Каждый сайт, от простого лендинга до огромного интернет-магазина, построен на одном и том же фундаменте — языке разметки HTML. Если вы хотите понимать, как устроен ваш сайт, вносить в него правки или просто говорить с разработчиками на одном языке, знание основ HTML — это ваш ключ к успеху. Сегодня мы разберемся, какие теги необходимы для создания структуры сайта, и вы увидите, что это гораздо проще, чем кажется.
Представьте, что HTML-теги — это команды, которые вы даете браузеру. «Здесь будет заголовок», «этот текст — ссылка», «а сюда вставь картинку». Браузер читает эти команды и показывает пользователю готовую страницу. Без этих команд любой текст на сайте был бы просто сплошной «простыней», без абзацев, картинок и ссылок. Давайте по порядку разложим по полочкам главные теги HTML и посмотрим, как они работают на практике.
Каркас сайта: теги, которые создают структуру страницы
Любая веб-страница имеет свой «скелет» — базовую структуру, которая едина для всех сайтов в интернете. Она состоит всего из четырех основных тегов, которые говорят браузеру, с каким типом документа он имеет дело и где какая часть контента находится.
<!DOCTYPE html>: Команда, с которой начинается любой документ
Это не совсем тег, а скорее инструкция для браузера. Она всегда ставится в самой первой строке кода и сообщает: «Внимание, перед тобой HTML-документ последней, пятой версии (HTML5)». Без этой строчки браузер может неправильно отобразить страницу, поэтому она обязательна.
<html>: Главный «контейнер» для всего кода
Сразу после <!DOCTYPE html> идет тег <html>. Он как большой контейнер, в который упаковано абсолютно все содержимое страницы: и видимая часть, и служебная информация. Все остальные теги находятся внутри него.
<head>: Техническая часть страницы, невидимая для пользователя
Раздел <head> (голова) — это «мозговой центр» страницы. Все, что находится внутри этого тега, пользователи напрямую не видят (кроме заголовка во вкладке браузера). Здесь хранится служебная информация:
- Название страницы.
- Подключение стилей (CSS) и скриптов (JavaScript).
- Метаданные для поисковых систем (ключевые слова, описание).
- Информация о кодировке.
<body>: «Тело» сайта, где размещается весь контент
Все, что видит пользователь на странице — тексты, картинки, видео, кнопки, ссылки — находится внутри тега <body> (тело). Это и есть основное содержимое вашего сайта.
Вот как выглядит этот базовый каркас в коде:
<!DOCTYPE html><html> <head> <!-- Здесь техническая информация --> </head> <body> <!-- Здесь весь видимый контент --> </body></html>Практический совет: Запомните эту структуру как «матрешку».
<body>и<head>вложены в<html>. Нарушать эту иерархию нельзя — сайт просто «сломается».
Главные теги в «голове» документа: что скрыто от глаз
Давайте заглянем внутрь <head> и посмотрим на два важнейших тега, которые там живут. Они напрямую влияют на то, как ваш сайт видят поисковые системы и пользователи в браузере.
<title>: Как дать имя вкладке в браузере
Тег <title> определяет текст, который отображается на вкладке браузера, в закладках и в заголовке сниппета в поисковой выдаче Google или Яндекса. Это один из важнейших тегов для SEO.
Пример:
<head> <title>Интернет-магазин «Уютный дом»: мебель и декор</title></head>Результат вы увидите в заголовке вкладки своего браузера.
<meta>: Служебная информация для поисковиков и браузеров
Метатеги — это настоящие шпионы. Они невидимы для пользователя, но передают массу важной информации браузерам и поисковым роботам. Вот два самых главных метатега, которые должны быть на каждой странице:
- Указание кодировки:
meta charset="UTF-8"сообщает браузеру, что на сайте используется стандартная кодировка Unicode, которая корректно отображает все символы, включая кириллицу. Без него вместо текста вы можете увидеть «кракозябры». - Описание страницы (Description):
meta name="description" content="Краткое описание вашей страницы..."— это тот самый текст, который поисковики часто показывают под ссылкой на ваш сайт. Хорошее описание мотивирует пользователя кликнуть и перейти на страницу.
Пример заполненного <head>:
<head> <meta charset="UTF-8"> <title>Интернет-магазин «Уютный дом»</title> <meta name="description" content="Купите качественную мебель для спальни и гостиной с доставкой по всей России. Скидки до 30%!"></head>Основные коды HTML для наполнения страницы контентом
Теперь переходим к самому интересному — к тегам, которые живут в <body> и формируют видимый контент. Это те самые «кирпичики», из которых вы будете строить свои страницы.
Заголовки от <h1> до <h6>: выстраиваем иерархию и логику текста
Заголовки нужны не для того, чтобы сделать текст крупнее. Их главная задача — структурировать контент. Представьте, что вы пишете книгу: <h1> — это название всей книги, <h2> — название главы, <h3> — название параграфа в главе и так далее.
<h1>— главный заголовок, должен быть только один на странице.<h2>— подзаголовки первого уровня.<h3>—<h6>— подзаголовки более низких уровней.
Правильная иерархия заголовков помогает не только пользователям быстро ориентироваться в тексте, но и поисковым роботам понимать его структуру.
<h1>Продажа авторской керамики</h1><h2>Кружки ручной работы</h2> <h3>Коллекция «Лесная сказка»</h3><h2>Тарелки и блюда</h2>Абзацы <p> и выделение <strong>, <em>: работаем с текстом
<p>(Paragraph): В этот тег оборачивается каждый абзац текста. Браузер автоматически добавит отступы между ними.<strong>: Используется для выделения важных фрагментов текста. Браузеры по умолчанию отображают его жирным шрифтом. Это сигнал для поисковиков, что на этот кусок текста стоит обратить внимание.<em>(Emphasis): Применяется для акцентирования, смыслового выделения. Обычно отображается курсивом.
<p>Это первый абзац нашего текста. Мы рассказываем о преимуществах нашего товара.</p><p>Наш магазин предлагает <strong>бесплатную доставку</strong> при заказе от 3000 рублей. Это <em>очень</em> выгодное предложение!</p>Списки <ul>, <ol>, <li>: как упорядочить информацию
Списки — отличный способ структурировать данные и сделать их легкими для восприятия. В HTML есть два основных типа списков:
<ul>(Unordered List) — маркированный (неупорядоченный) список. Каждый его элемент<li>(List Item) будет начинаться с маркера (точки, кружка).<ol>(Ordered List) — нумерованный (упорядоченный) список. Элементы<li>будут автоматически пронумерованы.
Пример маркированного списка:
<ul> <li>Молоко</li> <li>Хлеб</li> <li>Сыр</li></ul>Пример нумерованного списка (инструкция):
<ol> <li>Откройте коробку.</li> <li>Достаньте инструкцию.</li> <li>Соберите товар согласно схеме.</li></ol>
Ссылки <a> и изображения <img>: делаем страницу интерактивной
<a>(Anchor): Тег для создания гиперссылок. Самый важный его атрибут —href(hypertext reference), в котором указывается адрес, куда ведет ссылка.<img>(Image): Тег для вставки изображений. У него два обязательных атрибута:src(source) — путь к файлу картинки, иalt(alternative text) — текстовое описание изображения.
alt-текст невероятно важен! Его видят поисковые роботы, он отображается, если картинка не загрузилась, и его зачитывают программы для слабовидящих людей. Никогда не оставляйтеaltпустым.
<p>Посетите наш главный раздел с <a href="/catalog/">каталогом товаров</a>.</p><img src="/images/mug.jpg" alt="Керамическая кружка синего цвета ручной работы">Блоки <div> и <span>: универсальные «кирпичики» для вёрстки
Эти два тега сами по себе ничего не делают, но они — основа современной верстки. Они служат контейнерами для других элементов, чтобы их можно было группировать и стилизовать.
<div>: Блочный контейнер. Он занимает всю доступную ширину и переносит следующие за ним элементы на новую строку. Идеально подходит для создания крупных секций на странице: «шапка» сайта, основной контент, «подвал».<span>: Строчный контейнер. Используется для выделения небольших участков текста или других элементов внутри строки, не создавая переноса. Например, чтобы покрасить одно слово в другой цвет.
<div class="product-card"> <h2>Классный товар</h2> <p>Описание товара. Цена: <span class="price">990 руб.</span></p></div>В таблице ниже — краткая шпаргалка по основным тегам для работы с контентом.
| Тег | Назначение | Тип | Пример использования |
|---|---|---|---|
<h1>—<h6> |
Заголовки для структурирования текста | Блочный | <h1>Главный заголовок</h1> |
<p> |
Абзац текста | Блочный | <p>Это параграф вашего текста.</p> |
<a> |
Гиперссылка на другую страницу или ресурс | Строчный | <a href="https://site.com">Текст ссылки</a> |
<img> |
Изображение | Строчный | <img src="image.jpg" alt="Описание"> |
<ul>/<li> |
Маркированный (неупорядоченный) список | Блочный | <ul><li>Пункт 1</li></ul> |
<ol>/<li> |
Нумерованный (упорядоченный) список | Блочный | <ol><li>Пункт 1</li></ol> |
<div> |
Блочный контейнер для группировки элементов | Блочный | <div>...контент...</div> |
<span> |
Строчный контейнер для стилизации части текста | Строчный | Текст с <span style="color:red">выделением</span>. |
Собираем пазл: простой HTML-документ с примерами кода
А теперь давайте объединим все, что мы узнали, и создадим полноценную, хоть и простую, HTML-страницу. Вы можете скопировать этот код, сохранить его в файле с расширением .html (например, index.html) и открыть в любом браузере.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Моя первая веб-страница</title> <meta name="description" content="Это пример простой страницы, созданной с помощью базовых тегов HTML."> </head> <body> <h1>Добро пожаловать на мой сайт!</h1> <p>Здесь я расскажу немного о себе и своих увлечениях. Я учусь создавать сайты и это моя первая работа. Я использую <strong>основные теги HTML</strong> для разметки.</p> <h2>Мои хобби:</h2> <ul> <li>Чтение книг</li> <li>Прогулки на природе</li> <li>Фотография</li> </ul> <img src="https://via.placeholder.com/400x200" alt="Пример изображения с сервиса-заглушки"> <p>Вы также можете посетить <a href="https://storeland.ru/">отличный сайт</a>, где можно узнать больше о создании интернет-магазинов.</p> </body></html>Типичные ошибки новичков при работе с HTML-разметкой
Даже с таким простым набором тегов легко допустить ошибку, которая испортит отображение страницы. Вот самые частые из них:
- Забывают закрыть тег. Большинство тегов в HTML — парные (
<p>...</p>). Если вы забудете закрывающий тег</p>, браузер может применить его свойства ко всему последующему контенту. - Неправильная вложенность. Теги должны закрываться в обратном порядке от того, как они открывались. Правильно:
<p><strong>Текст</strong></p>. Неправильно:<p><strong>Текст</p></strong>. - Использование заголовков для стиля. Никогда не используйте
<h3>просто потому, что вам нужен текст поменьше, чем<h2>. Заголовки — это структура. За внешний вид отвечают стили CSS. - Пустой атрибут
altу изображений. Как мы уже говорили, это плохо и для SEO, и для доступности сайта. - Использование нескольких
<h1>. На странице должен быть только один главный заголовок.
Главный вывод: HTML — это про структуру и смысл, а не про внешний вид. Сначала вы размечаете контент с помощью тегов, придавая ему логику, и только потом наводите красоту с помощью CSS.
FAQ: Коротко о главном
Что будет, если забыть закрыть тег?
Современные браузеры довольно умны и часто пытаются «додумать» и исправить код за вас. Но полагаться на это не стоит — результат может быть непредсказуемым. Например, весь текст до конца страницы может стать жирным или превратиться в один большой абзац.
Можно ли создать сайт, используя только эти базовые теги?
Да, вполне. Вы можете создать простой, но функциональный сайт-визитку или блог, используя только теги, описанные в этой статье. Для сложного дизайна, интерактива и функциональности интернет-магазина уже понадобятся CSS и JavaScript, но HTML всегда будет основой.
В чем ключевая разница между <div> и <span>?
Главное отличие — в поведении. <div> — это блочный элемент, он занимает всю ширину и создает перенос строки (как абзац или заголовок). <span> — строчный элемент, он ведет себя как часть текста в строке и не создает переносов. Используйте <div> для крупных блоков, а <span> — для выделения слов или фраз внутри них.
