HTML: скелет веб-страницы

Содержание и основные понятия

← Вернуться к оглавлению
Alterna · глава 8 · страница 8.1
HTML: скелет веб-страницы
HTML (HyperText Markup Language) — язык разметки, который определяет структуру и содержание каждой веб-страницы. Разбираем все ключевые теги.
HTML
— это не язык программирования. Это язык
разметки
: вы оборачиваете текст в теги, чтобы браузер знал, как его отобразить.
Каждая веб-страница, которую вы видите — от Яндекса до Википедии — построена на HTML. CSS добавляет стили, JavaScript — интерактивность, но скелет всегда HTML.
ФГОС · базовый
ФОП · углублённый
01
Структура HTML-документа
Анатомия любой веб-страницы: DOCTYPE, head, body
Минимальная страница
Каждый HTML-файл начинается с одинакового «скелета»:
<!DOCTYPE html>
<html
lang
=
"ru"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
Моя страница
</title>
</head>
<body>
...содержимое...
</body>
</html>
Что делает каждый элемент
Элемент
Назначение
<!DOCTYPE html>
Объявление типа документа (HTML5). Не тег, а инструкция браузеру.
<html>
Корневой элемент. Атрибут
lang
указывает язык для поисковиков и скринридеров.
<head>
Метаданные: заголовок вкладки, кодировка, стили, скрипты.
Не видно
на странице.
<meta charset>
Кодировка символов.
UTF-8
— поддерживает все языки мира.
<title>
Заголовок вкладки браузера. Важен для SEO.
<body>
Всё видимое содержимое: текст, картинки, кнопки, формы.
Аналогия
HTML-документ = книга.
<head>
— обложка и оглавление (для библиотекаря).
<body>
— сам текст (для читателя).
02
Текстовые теги
Заголовки, абзацы, выделения, ссылки, изображения
Заголовки h1–h6
Шесть уровней заголовков.
<h1>
— самый важный (один на страницу),
<h6>
— самый мелкий.
Абзацы и переносы
<p>
— абзац (блок текста с отступами).
<br>
— принудительный перенос строки.
<hr>
— горизонтальная линия-разделитель.
Выделение текста
Тег
Эффект
Когда использовать
<b>
Жирный
Визуальное выделение без смыслового акцента
<strong>
Жирный + важный
Смысловой акцент (важная информация)
<i>
Курсив
Визуальный курсив
<em>
Курсив + ударение
Логическое ударение в предложении
<code>
Моноширинный
Фрагменты кода, команды
<mark>
Подсветка
Выделение найденного текста
<del>
Зачёркнутый
Удалённый/устаревший текст
Ссылки
<a href="URL">текст</a>
— гиперссылка. Атрибуты:
href
— адрес (URL или
#якорь
)
target="_blank"
— открыть в новой вкладке
title
— всплывающая подсказка
Изображения
<img src="путь" alt="описание">
— самозакрывающийся тег.
src
— путь к файлу (относительный или URL)
alt
— описание для скринридеров и при ошибке загрузки
width
/
height
— размеры в пикселях
Важно
Всегда указывайте
alt
! Это нужно для доступности (слепые пользователи), SEO и когда картинка не загрузилась.
03
Списки и таблицы
Структурируем данные: маркированные, нумерованные списки и таблицы
Списки
Тип
Теги
Пример
Маркированный
<ul> → <li>
• Пункт 1 • Пункт 2
Нумерованный
<ol> → <li>
1. Пункт 1 2. Пункт 2
Определений
<dl> → <dt> + <dd>
Термин → Определение
Списки можно
вкладывать
:
<li>
может содержать вложенный
<ul>
или
<ol>
.
Таблицы
<table>
<thead>
← шапка
<tr>
← строка
<th>
Имя
</th>
← ячейка-заголовок
<th>
Возраст
</th>
</tr>
</thead>
<tbody>
← тело
<tr>
<td>
Аня
</td>
← обычная ячейка
<td>
15
</td>
</tr>
</tbody>
</table>
Совет
Таблицы — только для табличных данных! Не используйте таблицы для вёрстки макета — для этого есть CSS Flexbox и Grid (глава 8.2).
04
Формы
Поля ввода, кнопки, чекбоксы — всё, с чем взаимодействует пользователь
Элемент form
<form action="/submit" method="POST">
— контейнер для полей ввода.
action
— куда отправлять данные,
method
— GET или POST.
Типы input
type
Вид
Применение
text
Однострочное текстовое поле
Имя, поиск
email
Поле email (проверка @)
Регистрация
password
Скрытый ввод (•••)
Пароли
number
Числовое поле (стрелки)
Количество, возраст
checkbox
Флажок ☑
Согласие, множественный выбор
radio
Переключатель ◉
Один из нескольких
date
Выбор даты (календарь)
Дата рождения
range
Ползунок
Громкость, яркость
file
Загрузка файла
Аватар, документ
submit
Кнопка отправки
Отправить форму
Другие элементы форм
<textarea>
— многострочное текстовое поле
<select>
+
<option>
— выпадающий список
<label>
— подпись к полю (связь через
for="id"
)
<button>
— универсальная кнопка
Связь с главой 4
Помните формы из главы 4 (безопасность)? Теперь вы знаете, как они устроены изнутри. Атрибут
required
делает поле обязательным,
pattern
— проверяет формат через регулярное выражение.
05
Семантические элементы
Теги, которые объясняют смысл содержимого, а не только его вид
Зачем нужна семантика
Можно сделать всю страницу из
<div>
и
<span>
. Но семантические теги:
Помогают
поисковикам
понять структуру (SEO)
Помогают
скринридерам
(доступность для слепых)
Делают код
читаемым
для разработчиков
Основные семантические теги
<header>
<nav>
<main>
<article>
<section>
<section>
<aside>
<footer>
Рис. 1.
Семантическая структура страницы
Тег
Назначение
<header>
Шапка страницы или секции (логотип, навигация)
<nav>
Навигационное меню
<main>
Основное содержимое (один на страницу)
<article>
Самостоятельный блок (статья, пост, товар)
<section>
Тематическая группа контента
<aside>
Боковая панель, дополнительная информация
<footer>
Подвал (копирайт, ссылки, контакты)
<figure>
Иллюстрация с подписью (<figcaption>)
<details>
Раскрывающийся блок (FAQ)
📖
Справочник HTML-тегов
50+ тегов · фильтрация по категориям
интерактив
Нажмите на категорию для фильтрации. Кликните на тег — увидите пример кода.
✏️
Живой HTML-редактор
пиши код слева · смотри результат справа
интерактив
Редактируйте HTML — превью обновляется мгновенно. Используйте пресеты для быстрого старта.
localhost/preview