Веб-разработка
HTML и семантическая вёрстка
Откройте любой сайт, нажмите Ctrl+U - и вы увидите HTML. Это единственный язык, который понимает каждый браузер на планете. Но между «работающим» HTML и правильным HTML - пропасть, которая определяет, найдут ли ваш сайт в Google, смогут ли пользоваться им слабовидящие, и насколько легко его будет поддерживать через год.
- **Wikipedia** - семантическая структура с `<article>`, `<nav>`, `<section>` позволяет screen readers навигировать по статье за секунды
- **Airbnb** потеряла 25% трафика из-за бага с отсутствующим Open Graph - ссылки в мессенджерах отображались без превью
- **Lawsuits:** в 2019 году было подано 2,256 исков о недоступности сайтов в США. Domino's Pizza проиграла дело в Верховном суде за недоступный сайт
Структура HTML-документа
**Каждый сайт, который вы когда-либо открывали, начинается с HTML.** Google, Wikipedia, YouTube - все они представляют собой HTML-документы, которые браузер превращает в визуальные страницы. HTML (HyperText Markup Language) - это не язык программирования, а язык разметки: он описывает *структуру* контента.
**`<!DOCTYPE html>`** - объявление типа документа. Без него браузер переключится в quirks mode и будет рендерить страницу по устаревшим правилам 2001 года. Одна строка - и вы избежали десятков багов.
HTML-документ состоит из **вложенных тегов**. Каждый тег - это инструкция для браузера. `<head>` содержит метаинформацию (title, charset, подключение стилей), а `<body>` - видимый контент страницы.
| Тег | Назначение | Пример |
|---|---|---|
| h1–h6 | Заголовки по уровню важности | <h1>Главный заголовок</h1> |
| p | Параграф текста | <p>Текст абзаца</p> |
| a | Гиперссылка | <a href="url">Ссылка</a> |
| img | Изображение (самозакрывающийся) | <img src="photo.jpg" alt="Описание"> |
| div | Блочный контейнер (без смысла) | <div class="wrapper">...</div> |
| span | Строчный контейнер (без смысла) | <span class="highlight">текст</span> |
**Атрибуты** дополняют теги информацией. У `<a>` есть `href` (адрес ссылки), у `<img>` - `src` (путь к картинке) и `alt` (текстовое описание). Атрибут `class` используется для стилизации, `id` - для уникальной идентификации элемента.
Всегда указывайте `lang` в теге `<html>` и `charset` в `<meta>`. Без `lang` screen reader не знает, на каком языке читать страницу. Без `charset` кириллица может превратиться в кракозябры.
Что произойдёт, если убрать <!DOCTYPE html> из начала HTML-документа?
Семантический HTML
**Представьте книгу без оглавления, глав и подзаголовков** - просто сплошной текст. Читать можно, но найти нужное место мучительно. То же самое происходит, когда сайт построен из одних `<div>` - браузер, поисковик и screen reader не понимают, где навигация, где статья, а где боковая панель.
**Семантический HTML появился в HTML5 (2014).** До этого у разработчиков не было `<header>`, `<nav>`, `<main>` - приходилось использовать `<div id="header">`. HTML5 дал осмысленные теги, которые несут информацию о роли содержимого.
| Тег | Роль | Когда использовать |
|---|---|---|
| <header> | Шапка страницы или секции | Логотип, навигация, поиск |
| <nav> | Основная навигация | Меню, breadcrumbs, пагинация |
| <main> | Основной контент (один на страницу!) | Уникальное содержимое страницы |
| <article> | Самостоятельный блок контента | Статья, пост, комментарий |
| <section> | Тематическая группировка | Главы, вкладки, разделы |
| <aside> | Побочный контент | Сайдбар, реклама, виджеты |
| <footer> | Подвал страницы или секции | Копирайт, контакты, ссылки |
**Правило для выбора тега:** спросите себя - «Если убрать все стили, будет ли структура страницы понятна?» Если вы видите стену из `<div>`, ответ - нет. Семантические теги - это контракт между вами и всеми, кто будет «читать» ваш HTML: браузером, поисковиком, screen reader, другим разработчиком.
**`<main>` может быть только один на странице.** `<header>` и `<footer>` могут быть вложенными (например, `<article>` может иметь свой `<header>`), но `<main>` - всегда единственный.
Сколько тегов <main> допускается на одной HTML-странице?
Доступность (Accessibility)
**15% населения планеты живёт с какой-либо формой инвалидности** (данные ВОЗ). Это больше миллиарда человек. Слепые пользователи используют screen readers, люди с нарушениями моторики - клавиатурную навигацию, слабовидящие - экранные лупы. Accessibility (a11y) - это не «приятное дополнение», а обязательная часть разработки.
**WCAG 2.1** (Web Content Accessibility Guidelines) - международный стандарт доступности. Три уровня: **A** (минимум), **AA** (рекомендуемый, обязателен во многих странах), **AAA** (максимальный). Большинство законов требуют уровень AA.
**Первое правило a11y - используйте семантический HTML.** Браузер автоматически создаёт accessibility tree из семантических тегов. `<button>` получает role="button" и поддержку клавиатуры (Enter/Space). `<div onclick>` - нет. Семантика из предыдущего концепта - это фундамент доступности.
| Правило | Что делать | Зачем |
|---|---|---|
| alt для изображений | Описывать содержимое: alt="Котёнок играет с мячом" | Screen reader зачитает описание вместо картинки |
| label для input | Связать через for/id или вложенность | Клик по label фокусирует input; screen reader объявляет назначение поля |
| Contrast ratio | Текст/фон минимум 4.5:1 (AA), 7:1 (AAA) | Слабовидящие пользователи и яркое солнце |
| Keyboard navigation | Tab для переходов, Enter/Space для действий | Пользователи без мыши должны иметь полный доступ |
| ARIA-атрибуты | aria-label, aria-describedby, role | Дополняют семантику, когда HTML-тегов недостаточно |
**Первое правило ARIA: не используйте ARIA, если можно использовать нативный HTML-тег.** `<button>` лучше, чем `<div role="button">`. ARIA - это дополнение к семантике, а не замена.
Проверяйте доступность инструментами: **Lighthouse** (встроен в Chrome DevTools), **axe DevTools** (расширение), **WAVE**. Попробуйте пользоваться своим сайтом только с клавиатуры - вы сразу увидите проблемы.
Когда следует использовать ARIA-атрибуты?
SEO и метаданные
**Google обрабатывает 8.5 миллиарда поисковых запросов в день.** Чтобы ваш сайт нашли среди миллиардов страниц, поисковая система должна понять: о чём страница, насколько она качественная и стоит ли показывать её пользователю. SEO (Search Engine Optimization) начинается прямо в HTML-коде.
**`<title>`** - самый важный SEO-элемент. Он отображается в результатах поиска, во вкладке браузера и при сохранении в закладки. Рекомендуемая длина - 50-60 символов. **`<meta description>`** - описание для поисковой выдачи, 120-160 символов.
**Open Graph** - протокол, созданный Facebook в 2010 году. Когда кто-то делится ссылкой в мессенджере или соцсети, клиент читает og-теги и формирует превью: картинка, заголовок, описание. Без og-тегов превью будет пустым или случайным.
| Файл/механизм | Назначение | Пример |
|---|---|---|
| robots.txt | Указывает краулерам, что индексировать | Disallow: /admin/ |
| sitemap.xml | Карта всех страниц сайта | Список URL с приоритетом и датой |
| JSON-LD | Структурированные данные для rich snippets | Рецепт, отзыв, FAQ в поиске |
| canonical | Основная версия дубликата | <link rel="canonical" href="..."> |
| hreflang | Языковые версии страницы | Для мультиязычных сайтов |
Проверяйте SEO инструментами: **Google Search Console** (бесплатный, показывает как Google видит ваш сайт), **Lighthouse SEO audit**, **Schema.org validator** для проверки JSON-LD разметки.
SEO - это набить meta keywords ключевыми словами и добавить скрытый текст на страницу
Google игнорирует meta keywords с 2009 года. Современное SEO - это качественный контент, семантическая структура HTML, скорость загрузки, мобильная адаптация и structured data
Поисковые алгоритмы эволюционировали. Google использует ML-модели (BERT, MUM), которые понимают смысл текста. Манипуляции с ключевыми словами не только бесполезны - за них могут снизить позиции (Google Penalty)
Какой мета-тег Google использует для определения релевантности страницы?
Ключевые идеи
- **HTML - структура, не визуал.** `<!DOCTYPE html>`, `<head>` для метаданных, `<body>` для контента. Каждый тег - инструкция для браузера
- **Семантика вместо div-soup.** `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>` - описывают роль контента. Один `<main>` на страницу
- **Accessibility - обязательна.** `alt` для img, `label` для input, клавиатурная навигация. ARIA - дополнение к семантике, не замена
- **SEO начинается в HTML.** `<title>` и контент важнее meta keywords. Open Graph для соцсетей, JSON-LD для rich snippets
Связанные темы
HTML - фундамент, на котором строятся все остальные веб-технологии:
- CSS: от каскада до Grid — CSS стилизует HTML-элементы - без HTML нечего стилизовать
- JavaScript: основы языка — JavaScript манипулирует HTML через DOM - Document Object Model
Вопросы для размышления
- Откройте ваш любимый сайт, нажмите F12 → Elements. Используются ли там семантические теги или это div-soup?
- Попробуйте пройтись по любому сайту только клавишей Tab. Все ли интерактивные элементы доступны?
- Вставьте ссылку на свой сайт (или любой) в Telegram. Красиво ли выглядит превью? Если нет - каких og-тегов не хватает?
Связанные уроки
- web-02 — CSS requires HTML structure to apply styles
- web-03 — JavaScript DOM manipulation operates on HTML elements
- alg-01-big-o — Both define contracts: algorithm complexity vs tag semantics
- st-01-feedback-loops — Semantic HTML creates feedback loops between browser, SEO, and accessibility
- sec-01 — Security considerations start at the HTML layer (XSS, CORS, CSP)
- comp-01-intro