Этап 3 из 19 · ≈ 6 ч

Семантическая разметка

Основа с Junior

Элементы по смыслу — заголовки, разделы, списки, ссылки и кнопки вместо безликих div.

<header>…логотип, навигация…</header>
<nav aria-label="Основная">…</nav>
<main>
  <article>
    <h1>Заголовок страницы</h1>
    <section><h2>Раздел</h2>…</section>
  </article>
  <aside>…связанное…</aside>
</main>
<footer>…</footer>

Что важно знать

  • Один <h1> на страницу и иерархия заголовков без пропусков — по ним скринридеры строят оглавление.
  • Ссылка (<a href>) — переход на другой адрес, кнопка (<button>) — действие на странице. Не наоборот.
  • Списки — <ul>/<ol>, таблицы с данными — <table> с <th>.
  • <img> всегда с alt: описание для смысловых картинок, пустой alt="" для декоративных.
  • Блочные и строчные элементы, вложенность (нельзя <div> внутри <p>).
  • Мета-теги в <head>: charset, viewport, title, description.

Критерии освоения

Junior ≈ 6 ч

  • Размечает страницу семантическими элементами — header, nav, main, article, section, footer
  • Строит иерархию заголовков без пропусков и использует ссылку для перехода, кнопку для действия
  • Пишет осмысленный alt для картинок и пустой для декоративных

Практика. Сверстать страницу статьи только семантическими тегами, проверить её валидатором W3C и скринридером.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что такое семантическая разметка HTML и зачем она нужна?Junior

Семантические теги описывают смысл содержимого: header, nav, main (один на странице), article, section, aside, footer, заголовки h1–h6 по иерархии, button для действий, a для переходов, ul/ol для списков, table для таблиц данных. Это нужно скринридерам…

Полный разбор
Что такое доступность веб-интерфейса и с чего её начинать?Junior

Доступность — возможность пользоваться интерфейсом людям с нарушениями зрения, слуха, моторики, когнитивными особенностями, а также всем в неудобных условиях (солнце, одна рука). Стандарт — WCAG (уровень AA — обычная цель). Основы: семантическая разметка…

Полный разбор
Какие мета-теги нужны странице — title, description, Open Graph?Junior

title — заголовок во вкладке и в выдаче (до ~60 символов), meta description — сниппет (~150 символов), viewport — для мобильных, canonical — основной адрес страницы, robots — noindex при необходимости. Open Graph (og:title, og:description, og:image, og:url) и…

Полный разбор
Что фронтенд-разработчику нужно знать про SEO?Junior

Поисковик должен получить содержимое страницы, понять его и оценить качество. Для этого: контент доступен в HTML без обязательного выполнения JS (SSR или статическая генерация для публичных страниц), уникальные title и description, один h1 и иерархия…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования