LEARN X · ЗА 12 МИН

HTML

HTML за 12 минут: структура документа, текст, ссылки, списки, таблицы, формы, семантика, медиа, мета-теги и доступность — всё на одной странице.

HTML (HyperText Markup Language) — язык разметки, на котором строятся все веб-страницы. Это не язык программирования: тегами вы размечаете смысл и структуру контента, а браузер превращает разметку в страницу. Весь язык — на одной странице, объяснения в комментариях кода.

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

Любая страница начинается с DOCTYPE и пары обязательных секций: head (метаданные) и body (видимое содержимое).

<!-- DOCTYPE сообщает браузеру: это HTML5 (стандартный режим) -->
<!DOCTYPE html>

<!-- Корневой тег. lang задаёт язык страницы (важно для SEO и доступности) -->
<html lang="ru">

  <!-- head — служебная информация, на странице НЕ видна -->
  <head>
    <meta charset="UTF-8">        <!-- кодировка: всегда UTF-8 -->
    <title>Заголовок вкладки</title> <!-- текст в табе браузера и в выдаче -->
  </head>

  <!-- body — всё, что видит пользователь -->
  <body>
    Привет, мир!

    <!-- Так выглядит комментарий: он не отображается на странице -->
  </body>

</html>

2. Заголовки и текст

Шесть уровней заголовков (h1 — самый важный) и теги для абзацев и базового форматирования.

<!-- Заголовки: h1 один на страницу, дальше по убыванию значимости -->
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

<!-- p — абзац текста -->
<p>Обычный абзац. Переносы строк и лишние пробелы в коде
   браузер схлопывает в один пробел.</p>

<p>Принудительный перенос строки<br>вот так.</p>

<hr> <!-- горизонтальная линия-разделитель (тематический разрыв) -->

<p>
  <strong>Жирный</strong> — важный текст.
  <em>Курсив</em> — смысловой акцент.
  <b>b</b> и <i>i</i> — то же визуально, но без смысла.
  <mark>Подсветка</mark>, <small>мелкий</small>,
  <del>зачёркнутый</del>, <code>моноширинный код</code>.
</p>

3. Ссылки и изображения

<!-- a — ссылка. href — куда вести -->
<a href="https://codechick.io">Внешняя ссылка</a>

<!-- target="_blank" открывает в новой вкладке.
     rel="noopener" — обязательно для безопасности -->
<a href="https://example.com" target="_blank" rel="noopener">
  В новой вкладке
</a>

<a href="/about">Внутренняя ссылка (относительный путь)</a>
<a href="#section">Якорь на элемент с id="section"</a>
<a href="mailto:[email protected]">Письмо</a>
<a href="tel:+71234567890">Звонок</a>

<!-- img — картинка. Это одиночный тег (без закрывающего).
     src — путь, alt — текст-замена (для незрячих и при ошибке загрузки) -->
<img src="/logo.png" alt="Логотип сайта" width="120" height="40">

<!-- Картинка-ссылка: img внутри a -->
<a href="/"><img src="/home.svg" alt="На главную"></a>

4. Списки

<!-- ul — маркированный (неупорядоченный) список -->
<ul>
  <li>Элемент списка</li>
  <li>Ещё один</li>
</ul>

<!-- ol — нумерованный (упорядоченный). start задаёт начало нумерации -->
<ol start="1">
  <li>Первый шаг</li>
  <li>Второй шаг</li>
</ol>

<!-- Списки вкладываются друг в друга -->
<ul>
  <li>Пункт
    <ul>
      <li>Вложенный пункт</li>
    </ul>
  </li>
</ul>

<!-- dl — список определений: dt (термин) + dd (описание) -->
<dl>
  <dt>HTML</dt>
  <dd>Язык разметки веб-страниц.</dd>
  <dt>CSS</dt>
  <dd>Язык оформления страниц.</dd>
</dl>

5. Таблицы

<table>
  <!-- caption — подпись таблицы -->
  <caption>Расписание</caption>

  <!-- thead — шапка. th — ячейка-заголовок (жирная, по центру) -->
  <thead>
    <tr>            <!-- tr — строка таблицы -->
      <th>День</th>
      <th>Тема</th>
    </tr>
  </thead>

  <!-- tbody — тело таблицы. td — обычная ячейка данных -->
  <tbody>
    <tr>
      <td>Пн</td>
      <td>HTML</td>
    </tr>
    <tr>
      <!-- colspan объединяет ячейки по горизонтали -->
      <td colspan="2">Выходной</td>
    </tr>
  </tbody>
</table>

6. Формы

Форма собирает данные пользователя и отправляет их на сервер.

<!-- action — куда отправлять, method — как (get/post) -->
<form action="/submit" method="post">

  <!-- label связывает подпись с полем через for=id -->
  <label for="name">Имя</label>
  <input type="text" id="name" name="name"
         placeholder="Введите имя" required>

  <!-- Разные типы input -->
  <input type="email" name="email">     <!-- email с проверкой -->
  <input type="password" name="pass">   <!-- скрытый ввод -->
  <input type="number" min="0" max="10"><!-- число с границами -->
  <input type="date">                    <!-- выбор даты -->
  <input type="checkbox" name="agree">   <!-- галочка -->
  <input type="radio" name="sex" value="m"> <!-- переключатель -->
  <input type="file">                    <!-- загрузка файла -->

  <!-- Многострочное поле -->
  <textarea name="msg" rows="4">Текст по умолчанию</textarea>

  <!-- Выпадающий список -->
  <select name="city">
    <option value="msk">Москва</option>
    <option value="spb" selected>Санкт-Петербург</option>
  </select>

  <!-- Кнопка отправки. type="submit" по умолчанию -->
  <button type="submit">Отправить</button>
</form>

<!-- Атрибуты валидации: required, min/max, maxlength,
     pattern="регулярка" — браузер проверит до отправки -->

7. Семантические теги

Семантика описывает роль блока — это лучше, чем сплошные div: помогает SEO и скринридерам.

<body>
  <!-- header — шапка сайта или секции -->
  <header>
    <!-- nav — блок навигации -->
    <nav>
      <a href="/">Главная</a>
      <a href="/blog">Блог</a>
    </nav>
  </header>

  <!-- main — основной контент, один на страницу -->
  <main>
    <!-- article — самостоятельная единица (пост, карточка) -->
    <article>
      <h1>Заголовок статьи</h1>

      <!-- section — смысловой раздел статьи -->
      <section>
        <h2>Раздел</h2>
        <p>Текст раздела.</p>
      </section>
    </article>

    <!-- aside — побочный контент (сайдбар, реклама) -->
    <aside>Связанные ссылки</aside>
  </main>

  <!-- footer — подвал -->
  <footer>© 2026 codechick.io</footer>
</body>

8. Медиа и встраивание

<!-- audio: controls показывает плеер -->
<audio src="/song.mp3" controls>
  Ваш браузер не поддерживает аудио.
</audio>

<!-- video с несколькими источниками -->
<video controls width="480" poster="/cover.jpg">
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
  Видео не поддерживается.
</video>

<!-- iframe встраивает чужую страницу (карту, ролик YouTube) -->
<iframe src="https://example.com"
        width="560" height="315"
        title="Встроенная страница"
        loading="lazy"></iframe>

9. Атрибуты

Атрибуты пишутся в открывающем теге и уточняют его поведение.

<!-- id — уникальный идентификатор (один на странице) -->
<div id="main-block">...</div>

<!-- class — имя(имена) для стилей и скриптов, можно несколько -->
<p class="text big highlighted">Текст</p>

<!-- data-* — произвольные данные для JavaScript -->
<button data-id="42" data-action="buy">Купить</button>

<!-- style — встроенные стили (лучше выносить в CSS) -->
<p style="color: red; font-size: 18px;">Красный текст</p>

<!-- title — всплывающая подсказка при наведении -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- Булевы атрибуты не требуют значения -->
<input disabled> <input checked type="checkbox">

10. Мета-теги и SEO

Содержимое head управляет тем, как страница выглядит в поиске и соцсетях.

<head>
  <!-- Кодировка — первой строкой -->
  <meta charset="UTF-8">

  <!-- viewport — обязателен для адаптивной вёрстки под мобильные -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- description — описание для поисковой выдачи (до ~160 симв) -->
  <meta name="description" content="Краткое описание страницы">

  <title>Заголовок для вкладки и поиска</title>

  <!-- canonical — главный URL страницы (против дублей) -->
  <link rel="canonical" href="https://codechick.io/page">

  <!-- Open Graph — превью при шаринге в соцсетях -->
  <meta property="og:title" content="Заголовок">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://codechick.io/cover.jpg">
  <meta property="og:type" content="website">

  <!-- Подключение стилей и иконки вкладки -->
  <link rel="stylesheet" href="/style.css">
  <link rel="icon" href="/favicon.ico">
</head>

11. Сущности и доступность

Спецсимволы кодируются сущностями. Доступность (a11y) делает сайт удобным для всех.

<!-- HTML-сущности: символы, которые иначе сломали бы разметку -->
<p>
  &lt;  — знак меньше (<)
  &gt;  — знак больше (>)
  &amp; — амперсанд (&)
  &quot; — кавычка (")
  &copy; — © , &nbsp; — неразрывный пробел
</p>

<!-- lang на html и на вставках на другом языке -->
<html lang="ru">
  <p>Девиз: <span lang="en">Learn by doing</span></p>

<!-- alt у картинок — обязателен для незрячих -->
<img src="/chart.png" alt="График роста за год">

<!-- aria-* описывает элементы для скринридеров -->
<button aria-label="Закрыть окно">✕</button>
<nav aria-label="Основное меню">...</nav>
<div role="alert">Ошибка отправки</div>

<!-- Скрыть от скринридера декоративный элемент -->
<span aria-hidden="true">★</span>
Поддержать проект