🌐 Полный курс HTML

От базовой структуры до семантики и форм

Введение Структура Текст Ссылки Изображения Списки Таблицы Формы Семантика Медиа Разное

📑 Содержание курса

📖 Что такое HTML?

HTML (HyperText Markup Language) — язык разметки гипертекста. Это не язык программирования, а способ описания структуры веб-страницы. Браузер читает HTML-код и отображает заголовки, абзацы, картинки, ссылки и другие элементы.

Каждый элемент состоит из тегов. Большинство тегов парные: открывающий <p> и закрывающий </p>. Некоторые — одиночные: <br>, <img>.

Современный стандарт — HTML5. Он поддерживается всеми браузерами и включает множество семантических тегов.

🏗️ Базовая структура HTML-документа

Любая HTML-страница начинается с объявления типа документа и содержит обязательные элементы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая веб-страница.</p>
</body>
</html>

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

📝 Работа с текстом

Заголовки

Используются теги <h1> … <h6>. <h1> — самый важный заголовок (обычно один на странице).

<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Заголовок третьего уровня</h3>

Абзацы и переносы

Абзац создаётся тегом <p>. Принудительный перенос строки — <br> (одиночный тег).

<p>Это первый абзац.<br>А это уже новая строка внутри того же абзаца.</p>
<p>Второй абзац.</p>

Форматирование текста

ТегНазначениеПример
<strong>Важный текст (жирный)важно
<em>Акцент (курсив)выделение
<u>Подчёркнутыйподчеркнуто
<s>Зачёркнутыйстарая цена
<small>Мелкий текстпримечание
<mark>Выделение цветомважно

Цитаты и код

<blockquote cite="источник">
    <p>Длинная цитата.</p>
</blockquote>
<q>Короткая цитата</q>
<pre><code>console.log('Hello');</code></pre>

🔗 Ссылки и навигация

Тег <a> (anchor) создаёт гиперссылку. Атрибут href указывает адрес.

<a href="https://example.com">Внешняя ссылка</a>
<a href="/about.html">Внутренняя страница</a>
<a href="#section">Якорь на этой странице</a>
<a href="mailto:name@domain.com">Написать письмо</a>
<a href="tel:+71234567890">Позвонить</a>

Атрибут target="_blank" открывает ссылку в новой вкладке.

🖼️ Изображения

Тег <img> — одиночный. Обязателен атрибут src (путь к файлу) и alt (альтернативное описание).

<img src="photo.jpg" alt="Описание картинки" width="300" height="200">

Можно использовать атрибуты width и height для указания размеров. Рекомендуется всегда задавать alt для доступности.

Фигурные подписи

<figure>
    <img src="diagram.png" alt="Диаграмма">
    <figcaption>Рис. 1 — Структура HTML</figcaption>
</figure>

📋 Списки

Маркированный (ненумерованный)

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
</ul>

Нумерованный

<ol>
    <li>Шаг первый</li>
    <li>Шаг второй</li>
</ol>

Список определений

<dl>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста</dd>
    <dt>CSS</dt>
    <dd>Каскадные таблицы стилей</dd>
</dl>

📊 Таблицы

Таблица состоит из строк <tr>, ячеек заголовков <th> и обычных ячеек <td>. Всё оборачивается в <table>.

<table>
    <caption>Название таблицы</caption>
    <thead>
        <tr><th>Город</th><th>Население</th></tr>
    </thead>
    <tbody>
        <tr><td>Москва</td><td>13 млн</td></tr>
        <tr><td>Чита</td><td>350 тыс</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">Данные на 2026 год</td></tr>
    </tfoot>
</table>

Атрибуты colspan и rowspan объединяют ячейки.

📬 Формы и ввод данных

Форма создаётся тегом <form>. Внутри размещаются поля ввода.

<form action="/submit" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="username" placeholder="Введите имя" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <label for="country">Страна:</label>
    <select id="country" name="country">
        <option value="ru">Россия</option>
        <option value="cn">Китай</option>
    </select>

    <input type="checkbox" id="agree" name="agree" value="yes">
    <label for="agree">Согласен с условиями</label>

    <button type="submit">Отправить</button>
</form>

Типы <input>: text, password, email, number, date, file, radio, checkbox и многие другие.

🧱 Семантические теги HTML5

Они описывают смысл содержимого, улучшают доступность и SEO.

ТегНазначение
<header>Шапка сайта или раздела
<nav>Навигационное меню
<main>Основное содержимое страницы
<section>Тематический раздел
<article>Независимый блок (статья, пост)
<aside>Боковая панель (связанная, но не основная)
<footer>Подвал сайта или раздела
<address>Контактная информация
<body>
    <header>...</header>
    <nav>...</nav>
    <main>
        <article>
            <h2>Заголовок статьи</h2>
            <p>Текст...</p>
        </article>
    </main>
    <footer>...</footer>
</body>

🎬 Мультимедиа

Видео

<video controls width="600" poster="preview.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Ваш браузер не поддерживает видео.
</video>

Аудио

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>

Встраивание (iframe)

<iframe width="560" height="315" src="https://www.youtube.com/embed/..." 
        title="YouTube video" frameborder="0" allowfullscreen></iframe>

🧩 Полезные мелочи

Комментарии

<!-- Это комментарий, он не отображается на странице -->

Специальные символы (мнемоники)

СимволКод
<&lt;
>&gt;
&&amp;
©&copy;
—&mdash;
неразрывный пробел&nbsp;

Теги <div> и <span>

<div> — блочный контейнер для группировки. <span> — строчный контейнер. Используются для стилизации или скриптов.

<div class="container">
    <p>Текст и <span class="highlight">выделенное слово</span>.</p>
</div>