Анатомия веб-страницы: структура HTML и семантика
Анатомия веб-страницы: структура HTML и семантика
Любой сайт, который вы открываете в браузере, — от простого блога до сложного интерактивного приложения — изначально представляет собой обычный текстовый файл. Браузер получает этот текст и превращает его в кнопки, картинки и абзацы. Как он понимает, где что находится? Для этого используется HTML — язык разметки, который работает как чертеж или визуальный каркас будущего интерфейса.
Если вы планируете создавать современные Single Page Applications (SPA) на Vue, React или чистом JavaScript, всё начинается с HTML. Фреймворки будут динамически менять этот каркас, но сама основа остается неизменной.
Теги: строительные блоки веба
Основа языка HTML — это теги. Они работают как контейнеры, которые сообщают браузеру смысл обернутого в них текста.
Обычно тег состоит из открывающей и закрывающей части:
<button>Нажми меня</button>
Некоторые теги не имеют содержимого и пишутся в единственном числе, например, тег изображения:
<img src="logo.png" alt="Логотип сайта">
В этом примере src и alt — это атрибуты. Они дают тегу дополнительные настройки: откуда загрузить картинку и какой текст показать, если картинка не загрузится.
Каркас документа: невидимое и видимое
Каждая веб-страница имеет строгую базовую структуру. Это фундамент, без которого браузер может неправильно отобразить содержимое.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мое первое SPA</title>
</head>
<body>
<h1>Добро пожаловать</h1>
<p>Это интерфейс нашего приложения.</p>
</body>
</html>
Эта структура делится на две принципиально разные зоны:
head(голова) — служебная информация для браузера и поисковиков. То, что написано внутри<head>, пользователь не видит на самой странице. Здесь задается кодировка, название вкладки (<title>) и подключаются будущие стили CSS.body(тело) — всё, что отображается на экране. Тексты, формы, кнопки, списки — весь интерфейс живет внутри<body>.
Обратите внимание на то, как теги вложены друг в друга. HTML — это строгая иерархия, похожая на матрешку. Элемент <h1> находится внутри <body>, а <body> — внутри <html>. В будущем, когда вы начнете работать с JavaScript и Vue, вы будете управлять именно этим «деревом» элементов (оно называется DOM-деревом).
Семантика: почему нельзя строить всё из «коробок»
Исторически сложилось так, что существуют два универсальных тега: <div> (для крупных блоков) и <span> (для строчных элементов, например, выделения слова в тексте). Они не несут в себе никакого смысла. Это просто пустые коробки.
Технически, весь сайт можно сверстать, используя только <div>:
<div class="header">Логотип и меню</div>
<div class="main-content">
<div class="article">Текст статьи...</div>
</div>
Браузер отобразит это нормально. Но такой подход считается грубой ошибкой. Современный веб требует семантической разметки — использования тегов, которые прямо говорят о своем назначении.
Вместо безликих коробок мы должны использовать осмысленные элементы:
<header>— шапка сайта или раздела.<nav>— блок навигации (меню).<main>— главное уникальное содержимое страницы.<article>— самостоятельная смысловая единица (пост в блоге, карточка товара).<footer>— подвал сайта.
Семантика — это использование HTML-тегов по их прямому смысловому назначению, а не только ради визуального отображения.
Зачем нужна семантика, если выглядит одинаково?
Визуально семантические теги ничем не отличаются от обычных <div>. Разница кроется «под капотом»:
- Доступность (Accessibility). Люди с нарушениями зрения используют скринридеры — программы, которые читают сайт вслух. Скринридер не понимает, что
<div class="menu">— это меню. Но он точно знает, что такое<nav>, и предложит пользователю удобную навигацию по нему. - SEO (Поисковая оптимизация). Поисковые роботы Google и Яндекса анализируют теги, чтобы понять структуру контента. Текст внутри
<h1>и<article>ценится алгоритмами выше, чем текст в безымянном<div>. - Читаемость кода. Когда вы (или ваши коллеги) откроете код компонента Vue через полгода, гораздо проще ориентироваться в
<header>и<section>, чем в бесконечной простыне из<div>.
Мы разобрали, из чего состоит скелет веб-страницы и как сделать его понятным для браузеров и поисковиков. Но прямо сейчас наш правильный семантический HTML выглядит как скучный черно-белый документ из 90-х. Чтобы превратить этот текст в современный интерфейс, нам нужно добавить правила оформления. Этим мы займемся на следующем шаге.