Что такое HTML и как устроена веб-страница

Коротко: HTML — это каркас страницы

HTML (HyperText Markup Language) — язык разметки, а не программирования. Он не считает и не принимает решений, а описывает, что находится на странице: где заголовок, где абзац, где ссылка, картинка или кнопка.

Внешний вид задаёт CSS, поведение — JavaScript, но основа любой веб-страницы — HTML. Без него браузеру нечего показывать.

Теги и атрибуты

HTML состоит из элементов. Элемент обычно записывается парой тегов — открывающим и закрывающим — с содержимым между ними:

<p>Это абзац текста.</p>

Некоторые элементы пустые и не имеют закрывающего тега, например картинка или перенос строки:

<img src="logo.png" alt="Логотип компании">
<br>

Атрибуты уточняют элемент и пишутся в открывающем теге в формате имя="значение":

• href — адрес ссылки;
• src — путь к файлу картинки или видео;
• alt — текстовое описание картинки для незрячих пользователей и поисковиков;
• class и id — имена для стилей и скриптов;
• lang — язык страницы.

Элементы можно вкладывать друг в друга, но закрывать их нужно в обратном порядке.

Структура документа

Любая HTML-страница имеет одинаковый скелет:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Привет!</h1>
    <p>Это моя первая веб-страница.</p>
    <a href="https://developer.mozilla.org/ru/docs/Web/HTML">Документация по HTML</a>
  </body>
</html>

Что здесь происходит:

• <!DOCTYPE html> — сообщает браузеру, что это современный HTML.
• <html> — корневой элемент, внутри него всё остальное.
• <head> — служебная информация, которую не видно на странице: кодировка, заголовок вкладки, описание для поисковиков, подключение стилей.
• <body> — всё видимое содержимое страницы.

Сохраните этот код в файл index.html и откройте двойным щелчком — браузер покажет рабочую страницу.

Основные элементы

Семантика: теги со смыслом

Помимо <div> в HTML есть семантические элементы, которые описывают роль блока:

• <header> — шапка сайта или раздела;
• <nav> — навигация;
• <main> — основное содержимое страницы;
• <article> — самостоятельная публикация;
• <section> — смысловой раздел;
• <footer> — подвал.

Семантика помогает поисковым системам понимать страницу, а экранным дикторам — правильно зачитывать её людям с нарушениями зрения. Выглядят такие элементы так же, как <div>, но пользы от них больше.

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

• Несколько <h1> ради крупного шрифта. Уровень заголовка — это структура, а размер задаётся в CSS.
• Пустой или отсутствующий alt у содержательных картинок. Страдают доступность и SEO.
• Сплошные <div> вместо семантических тегов.
• Кнопки из <div>. Для действий есть <button> — он работает с клавиатуры без дополнительного кода.
• Незакрытые теги и неверная вложенность. Браузер попытается исправить ошибку, но результат может быть неожиданным.