Все теги HTML

HTML
для начинающих

Собираем справочник по тегам HTML в одном месте. Начинаем с каркаса, который есть у любой страницы, и дополняем разделы по мере выхода уроков.

Каркас страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок вкладки</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

Тег `<html>`

Контейнер для всего содержимого страницы. Внутри него ровно два ребёнка: <head> и <body>.

Атрибут lang сообщает язык текста. Он нужен скринридерам, чтобы читать с правильным произношением, браузеру для переносов и переводчика, и поисковикам. Его можно ставить и на отдельные элементы:

<p lang="en">lang is short for language</p>

Тег `<head>`

Служебная часть страницы, которую пользователь не видит. Здесь лежат:

<meta>: кодировка, настройки для мобильных, описание для поисковиков;
<title>: текст на вкладке браузера и в результатах поиска;
<link>: подключение внешних CSS-файлов, иконки сайта;
<style>: CSS прямо в документе;
<script>: JavaScript (часто его ставят в конец <body> или добавляют атрибут defer);
<base>: базовый адрес, от которого считаются все относительные ссылки на странице.

Тег `<body>`

Всё видимое содержимое страницы: текст, картинки, ссылки, формы.

Разметка страницы

Семантические теги описывают смысл блока, а не его внешний вид. Их понимают скринридеры и поисковики.

Тег	Для чего
`<header>`	Шапка страницы или раздела: логотип, навигация.
`<nav>`	Основная навигация.
`<main>`	Главное содержимое. На странице один.
`<section>`	Тематический раздел, обычно с заголовком.
`<article>`	Самостоятельный блок: статья, пост, карточка товара.
`<aside>`	Дополнительная информация сбоку от основной.
`<footer>`	Подвал страницы или раздела.

Заголовки

Теги <h1>…<h6> строят оглавление документа. Правило простое: один <h1> на страницу и уровни без пропусков, после <h2> идёт <h3>, а не сразу <h5>. Размер заголовка меняют через CSS, а не выбором тега.

Что дальше

В следующих уроках разберём мета-теги, работу с текстом, медиа, формы и таблицы, а также устаревшие теги, которые лучше не использовать.