HTML, forms, accessibility, SEO и media

HTML

Junior

Что такое HTML и какую задачу он решает?

HTML описывает структуру и смысл документа: заголовки, текст, навигацию, формы, ссылки и изображения. Браузер разбирает разметку и строит DOM, который используют CSS, JavaScript, поисковые роботы и ассистивные технологии (assistive technologies).

<button>Buy</button>

Что такое HTML attribute?

Attribute задает дополнительную информацию или поведение element: href, type, disabled, lang. Global attributes вроде id, class, hidden и data-* доступны большинству элементов, а часть attributes имеет смысл только для определенных tags.

Что такое semantic HTML?

Semantic HTML использует элементы по их назначению: nav для навигации, main для основного контента, button для действия. Это делает структуру понятнее браузеру, разработчикам, поисковым системам и assistive technologies.

В командных guidelines semantic HTML должен быть отдельным правилом, потому что в Angular templates легко заменить структуру набором компонентов и директив. Хороший кандидат объяснит, что компоненты не отменяют базовые HTML semantics: landmarks, headings, form controls и интерактивные элементы все равно должны оставаться корректными.

Что такое document outline?

Это логическая структура документа, прежде всего иерархия заголовков и landmarks. На практике нужно последовательно использовать h1–h6, не полагаясь на давно предложенный, но не реализованный браузерами outline algorithm для sectioning elements.

Что такое doctype и зачем он нужен?

<!doctype html> сообщает браузеру, что документ следует обрабатывать в standards mode. Без корректного doctype браузер может включить quirks mode с устаревшими правилами layout и совместимости.

Что такое custom elements?

Custom Elements API позволяет регистрировать собственные HTML-элементы с именем через дефис и lifecycle callbacks. Это часть Web Components; Shadow DOM и templates являются отдельными API и не включаются автоматически.

Middle

Чем tag отличается от HTML element?

Tag — синтаксическая часть разметки, например <p> или </p>. Element — целый узел: открывающий tag, attributes, content и закрывающий tag. Void elements вроде <img> не имеют closing tag и содержимого.

Чем block element отличается от inline element?

Исторически block elements начинали новую строку, а inline elements участвовали в строке текста. В современном CSS реальное поведение задает display, поэтому семантическую категорию HTML-элемента нельзя использовать как замену знанию layout.

Зачем команде договариваться об HTML principles?

HTML principles фиксируют, как команда пишет разметку: использует семантические элементы, поддерживает accessibility, не заменяет button и a на кликабельные div, сохраняет правильную структуру headings и forms. Это снижает споры в review и помогает screen readers, SEO, автотестам и долгой поддержке интерфейса.

Чем section, article, main, aside и nav отличаются друг от друга?

main содержит основное уникальное содержимое страницы, nav — крупный блок навигации, article — самостоятельный материал, пригодный для отдельного распространения, section — тематический раздел обычно с заголовком, aside — связанный, но второстепенный контент.

Когда использовать button, а когда a?

button выполняет действие: отправляет форму, открывает dialog, меняет состояние. a с href выполняет навигацию к URL. Правильный элемент сразу дает ожидаемые keyboard behavior, semantics и browser features вроде открытия ссылки в новой вкладке.

Когда команда может использовать HTML preprocessor или template engine?

HTML preprocessor или template engine полезны, когда разметка генерируется сервером, CMS, static site generator или design system tooling. В Angular основным слоем обычно остаются Angular templates, но frontend-разработчик должен понимать, откуда приходит HTML, какие fragments может вставлять backend и какие ограничения это создает для структуры, styles и hydration.

Как backend или CMS может влиять на frontend markup?

Backend или CMS могут добавлять wrappers, ids, classes, служебные attributes и готовые HTML-фрагменты. Эти соглашения нужно учитывать, чтобы не сломать CSS, accessibility, analytics и автотесты. Хороший ответ включает мысль, что такие контракты лучше документировать, а не выяснять по случайным DOM-структурам в production.

Как договориться о комментариях в HTML?

HTML-комментарии стоит оставлять только для неочевидной структуры, интеграционного ограничения или временного workaround. Они не должны пересказывать obvious markup. В Angular чаще лучше помогают понятные имена компонентов, inputs и template blocks, а большой комментарий в template может быть сигналом, что код стоит упростить.

Что делает атрибут lang?

lang задает язык документа или фрагмента. Он помогает screen reader выбрать произношение, браузеру — проверку орфографии и переносы, а поисковым системам — интерпретировать содержимое.

Для чего нужны data-* attributes?

Они хранят небольшие пользовательские данные прямо на element и доступны через dataset. Их используют для связи разметки с поведением или тестами, но не как замену application state и не для секретных данных.

Из каких частей состоит HTML5 как open web platform?

HTML5 в широком смысле часто называют набором Web Platform API: semantic HTML, forms, media, canvas, SVG, storage, offline capabilities, history, drag and drop и messaging. На интервью важно не смешивать сам язык разметки с браузерными API вокруг него. Для Angular-разработчика это база, на которую опираются компоненты, forms, routing и интеграции с browser APIs.

Чем cookie отличается от sessionStorage и localStorage?

Cookie может автоматически отправляться с HTTP-запросами и иметь флаги HttpOnly, Secure, SameSite. localStorage и sessionStorage доступны JavaScript, привязаны к origin и не отправляются автоматически; sessionStorage живет в рамках вкладки, localStorage сохраняется дольше. Секретные tokens опасно хранить в Web Storage из-за XSS.

Чем script, script async и script defer отличаются?

Обычный script блокирует HTML parsing до загрузки и выполнения. async загружается параллельно и выполняется сразу после загрузки, поэтому порядок между async scripts не гарантирован. defer загружается параллельно, выполняется после parsing в порядке объявления и обычно лучше подходит для application bundle.

Middle+ or Senior

Почему clickable div — плохая практика?

div не получает focus, keyboard activation, role и accessible name интерактивного элемента автоматически. Их ручная имитация сложна и хрупка. Для действий следует использовать button, для переходов — a.

Forms

Middle+ or Senior

Как работает HTML form?

form объединяет controls и при submit формирует набор успешных пар name=value. Браузер валидирует controls, кодирует данные и отправляет их на action выбранным method, если JavaScript не перехватил событие.

Что делают action и method у формы?

action задает URL отправки, method — HTTP-метод get или post. При GET данные попадают в query string, при POST — в request body. Для других HTTP-методов обычно используют JavaScript или backend method override.

Чем GET form отличается от POST form?

GET подходит для безопасного поиска и фильтров: URL можно сохранить и повторить. POST используют для операций с побочным эффектом и больших или чувствительных данных, но HTTPS все равно обязателен. Выбор метода не является authorization-механизмом.

Почему специализированные типы input полезнее text?

Типы email, number, date, url, search, tel, checkbox и другие дают подходящую семантику, native validation, мобильную клавиатуру и browser UI. Поддержка и локализация отдельных типов различаются, поэтому server validation все равно нужна.

Что такое label и как связать его с control?

label дает полю доступное имя и увеличивает clickable area. Его связывают атрибутом for, равным id control, или вкладывают control внутрь label.

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

Почему placeholder не должен заменять label?

Placeholder исчезает при вводе, часто имеет низкий contrast и не является надежной подписью для assistive technologies. Он может показывать пример формата, но постоянное понятное имя поля должен задавать label.

Для чего нужен name у form control?

name определяет ключ при native form submission и объединяет radio buttons в одну группу. Control без name обычно не входит в отправляемый набор данных.

Что такое native validation?

Браузер проверяет constraints вроде required, min, max, minlength, maxlength, pattern и соответствие типу перед submit. Это улучшает UX, но не заменяет backend validation, потому что клиентскую проверку можно обойти.

Для чего нужен autocomplete?

autocomplete подсказывает браузеру назначение поля, например name, email, current-password или one-time-code. Корректные tokens ускоряют заполнение и помогают пользователям с когнитивными и моторными ограничениями.

Как сделать accessible error message для поля?

Сообщение должно быть конкретным, видимым и связанным с полем через aria-describedby; невалидность можно обозначить aria-invalid="true". После submit focus переводят осмысленно, а динамическую сводку ошибок при необходимости объявляют live region.

Почему disabled field не отправляется вместе с формой?

Disabled control исключается из focus order, validation и набора успешных controls при submit. Если значение должно отправляться, используют другой способ моделирования; скрытое поле нельзя считать защитой от подмены данных.

Чем disabled отличается от readonly?

disabled control не фокусируется и не отправляется. readonly поддерживается только частью controls, остается focusable и отправляет значение, но пользователь не может его изменить обычным вводом.

Для чего нужны fieldset и legend?

fieldset семантически группирует связанные controls, а legend дает группе доступное название. Это особенно важно для radio buttons и checkbox groups, где отдельные labels не объясняют общий вопрос.

Как группировать radio buttons?

Radio buttons одной группы получают одинаковый name, уникальные id и собственные labels. Группу помещают в fieldset с legend, чтобы ее назначение было понятно визуально и screen reader.

Accessibility

Middle+ or Senior

Что такое accessibility и WCAG?

Accessibility, или a11y, — проектирование интерфейса так, чтобы им могли пользоваться люди с разными возможностями и устройствами. WCAG — рекомендации W3C, сгруппированные по принципам perceivable, operable, understandable и robust, с проверяемыми критериями уровней A, AA и AAA.

Что такое keyboard navigation и visible focus?

Все действия должны быть доступны с клавиатуры в логичном порядке. Текущий focus обязан быть заметен; нельзя убирать outline без равноценной замены. Native controls уже поддерживают Tab, Enter, Space и ожидаемые паттерны.

Что такое focus management и focus trap?

Focus management переводит focus после значимого UI-события и возвращает его в понятное место. Modal dialog ограничивает Tab внутри себя, устанавливает начальный focus и после закрытия возвращает его trigger. Focus trap не применяют к немодальным областям без необходимости.

Что такое screen reader?

Screen reader озвучивает accessibility tree и позволяет перемещаться по headings, landmarks, controls и другим семантическим узлам. Проверка только DOM или визуального вида не гарантирует корректный опыт screen reader.

Что такое ARIA и когда ее использовать?

ARIA добавляет roles, states и relationships в accessibility tree, но не создает keyboard behavior и не меняет семантику для обычного UI автоматически. Сначала выбирают native HTML; ARIA используют, когда нужную семантику нельзя выразить подходящим элементом.

Как ARIA и screen reader связаны с accessibility?

Screen reader читает accessibility tree, который строится из HTML-семантики, текста, attributes и ARIA. ARIA может добавить role, state или связь между элементами, но не добавляет поведение клавиатуры и не исправляет неверный элемент. Поэтому сначала выбирают native HTML, а ARIA используют для сложных widgets и динамических состояний.

Как сделать страницу доступнее без JavaScript?

Использовать semantic landmarks, правильную иерархию заголовков, label, fieldset, legend, понятные ссылки, доступные изображения и native form validation. Контент и основные действия должны быть доступны как HTML, а JavaScript добавляет улучшения. Такой подход помогает progressive enhancement и снижает риск пустого интерфейса при ошибке bundle.

Зачем команде accessibility checklist?

Accessibility checklist помогает не забывать базовые требования: semantic HTML, keyboard navigation, focus states, labels, contrast, alt text и корректные ARIA attributes. В большой команде это превращает accessibility из личной памяти отдельного разработчика в повторяемую часть review и testing workflow.

Какие accessibility tools стоит использовать во frontend workflow?

Полезны axe, Lighthouse, browser DevTools, Angular ESLint template rules и component tests для важных состояний. Но инструменты находят только часть проблем, поэтому их дополняют ручной проверкой keyboard flow, focus order и screen reader поведения в ключевых сценариях.

Почему accessibility нельзя полностью проверить автоматическими тестами?

Автотесты могут найти отсутствие label, часть ошибок ARIA, слабый contrast и очевидные нарушения semantics. Но они не понимают смысл текста, удобство сценария, ожидаемый порядок focus и реальное восприятие screen reader. Поэтому хороший workflow сочетает automated checks, ручную проверку и ревью компонентов design system.

Что такое accessible name и как кнопка его получает?

Accessible name — имя элемента в accessibility tree. Кнопка обычно получает его из видимого текста, затем могут учитываться aria-labelledby или aria-label. Видимая подпись предпочтительнее скрытого имени, когда она уместна.

Чем aria-label, aria-labelledby и aria-describedby отличаются?

aria-label задает строку имени напрямую, aria-labelledby берет имя из текста других элементов, а aria-describedby добавляет описание после имени. Они не взаимозаменяемы: label отвечает «что это», description — за дополнительную инструкцию или ошибку.

Для чего нужен aria-hidden?

aria-hidden="true" скрывает element и его descendants от accessibility tree, не меняя визуальное отображение. Его нельзя ставить на focusable element или его ancestor: keyboard focus окажется на узле, который screen reader не видит.

Что такое live region и role="alert"?

Live region сообщает assistive technologies о динамических изменениях без перемещения focus. role="alert" подходит для срочных ошибок и обычно объявляется assertive; обычные статусы лучше сообщать через менее навязчивый role="status".

Как сделать доступное modal dialog?

Нужны понятное имя, modal semantics, начальный focus, ограничение Tab внутри окна, закрытие Escape и возврат focus на trigger. Native <dialog> решает часть поведения, но название, содержимое, trigger и тестирование остаются задачей приложения.

Как сделать доступные dropdown и tabs?

Сначала выбирают правильный паттерн: disclosure, menu, listbox и combobox имеют разное поведение. Tabs используют tablist, tab, tabpanel, arrow-key navigation и связи через aria-controls/aria-labelledby. Для сложных widgets следуют WAI-ARIA Authoring Practices и тестируют клавиатурой и screen reader.

Как сделать доступную icon button?

Используют настоящий button с accessible name, например aria-label="Закрыть"; декоративную SVG внутри скрывают через aria-hidden="true". Нужны достаточный target size, visible focus и понятные hover/disabled states.

Почему цвет не должен быть единственным способом передачи информации?

Различие может быть незаметно пользователям с нарушением цветовосприятия или на плохом дисплее. Ошибку, статус или выбранное состояние дублируют текстом, иконкой, формой или другим независимым признаком и обеспечивают достаточный contrast.

Для чего нужен атрибут lang?

Атрибут lang задает язык документа или отдельного фрагмента текста.

<html lang="ru"></html>

Он помогает:

скринридерам выбрать правильное произношение;
браузеру проверять орфографию и предлагать перевод;
поисковым системам определить язык страницы;
применять языковые правила переноса и типографики.

<p>
  Я изучаю
  <span lang="en">frontend development</span>
  .
</p>

lang не меняет внешний вид напрямую, но помогает браузеру и assistive technologies правильно интерпретировать контент.

Для чего нужны семантические HTML-теги?

Семантические теги описывают назначение контента: header, nav, main, article, button.

Они улучшают accessibility, навигацию скринридеров, SEO и читаемость разметки. Семантика не заменяет корректную структуру заголовков, подписи элементов форм и поддержку клавиатуры.

SEO и metadata

Junior

Зачем нужен meta name="viewport"?

<meta name="viewport" content="width=device-width, initial-scale=1"> сопоставляет layout viewport ширине устройства. Без него мобильный браузер может отрендерить страницу в широком виртуальном viewport и уменьшить ее целиком.

Что такое favicon?

Favicon — набор иконок сайта для вкладок, bookmarks, history и устройств. Его подключают через <link rel="icon">, а форматы и размеры выбирают с учетом целевых браузеров и manifest приложения.

Что такое canonical URL?

<link rel="canonical" href="…"> указывает предпочтительный URL для страниц с одинаковым или очень похожим content. Это сигнал поисковой системе против дублирования, а не redirect и не механизм безопасности.

Middle

Для чего нужны title и meta description?

title задает название документа во вкладке и часто заголовок поискового результата. Meta description кратко описывает страницу и может использоваться как snippet. Они должны быть уникальными и соответствовать реальному содержимому.

Какие HTML-теги важны для поисковых систем?

Важны содержательные title, headings, links с понятным текстом, semantic landmarks, img alt, canonical и metadata. Семантика помогает понять структуру, но не компенсирует слабый content, закрытую индексацию или плохую доступность.

Какие SEO-практики важны для frontend-разработчика?

Frontend-разработчик отвечает за содержательный HTML, корректные title и metadata, canonical URL, semantic headings, понятные links, alt у значимых изображений, robots rules и скорость first render. Для SPA важно, чтобы crawler получил контент через SSR, prerender или другой поддерживаемый rendering strategy. SEO не заменяет качество контента и не должно ломать accessibility.

Как правильно использовать заголовки h1–h6?

Заголовки создают иерархию, а не выбираются ради размера шрифта. Обычно у страницы один основной h1, затем уровни идут последовательно по структуре. Несколько h1 технически допустимы, но один главный заголовок обычно понятнее пользователям и инструментам.

Middle+ or Senior

Что такое Open Graph?

Open Graph metadata задает title, description, image и URL для preview при публикации ссылки в социальных сетях и мессенджерах. Это не замена обычным HTML metadata; изображения должны иметь доступный URL и подходящие размеры.

Как SSR влияет на SEO?

SSR или prerender отдает содержательный HTML раньше JavaScript, упрощая индексацию и previews. Современные crawlers могут выполнять JavaScript, но это требует времени и ресурсов; SPA без server-rendered content также хуже работает у ботов без полного rendering support.

SVG и media

Middle+ or Senior

Чем JPEG, PNG, WebP, AVIF и SVG отличаются друг от друга?

JPEG подходит для фотографий без прозрачности, PNG — для lossless-графики и прозрачности, WebP и AVIF дают более современное сжатие, SVG — векторную графику. Формат выбирают по типу изображения, качеству, размеру, transparency, animation и browser support.

Когда использовать SVG, а когда raster image?

SVG подходит для иконок, схем и простой графики, которая должна масштабироваться и стилизоваться. Для фотографий и сложных текстур raster format обычно компактнее и быстрее. Очень сложный SVG тоже может быть тяжелым для rendering.

Что такое responsive images и как работают srcset/sizes?

srcset перечисляет image candidates по ширине или density, а sizes сообщает ожидаемый layout size. Браузер выбирает ресурс с учетом viewport, DPR, доступной ширины и других факторов, не загружая все варианты.

На уровне командных guidelines стоит договориться, когда использовать srcset, sizes, picture, lazy loading и отдельные форматы. Responsive images нужны не ради синтаксиса, а чтобы мобильный пользователь не скачивал тяжелую desktop-картинку и не платил за это LCP, трафиком и battery usage.

Что делает loading="lazy"?

Атрибут откладывает загрузку изображения или iframe, пока ресурс не приблизится к viewport. Это экономит сеть, но его не ставят на вероятный LCP image. width и height задают заранее, чтобы сохранить место и избежать CLS.

Что такое alt и когда он должен быть пустым?

alt передает текстовую альтернативу смыслового изображения. У декоративного изображения используют alt="", чтобы screen reader его пропустил. Alt описывает назначение изображения в контексте, а не обязательно все визуальные детали.

Для чего нужен элемент picture?

picture позволяет задавать source для разных media conditions, crops и formats, сохраняя fallback img. Его используют для art direction или выбора формата; обычное изменение resolution часто достаточно решить через srcset.

Что такое SVG?

SVG — векторный формат изображения, который описывает картинку через XML-разметку: линии, пути, фигуры, градиенты и текст. В отличие от PNG и JPEG, SVG масштабируется без потери качества: браузер пересчитывает геометрию, а не растягивает пиксели.

Почему SVG подходит для scalable icons?

SVG-иконка остается четкой при разных размерах и плотностях экрана. Один файл можно использовать в размерах 16px, 24px, 48px и на Retina-дисплеях без отдельного набора изображений.

Как сделать SVG-иконку масштабируемой?

Нужно задать viewBox и управлять внешними width и height атрибутами или через CSS:

<svg
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
>
  <path d="M12 2L2 22h20L12 2z" />
</svg>

.icon {
  width: 32px;
  height: 32px;
}

viewBox сохраняет внутреннюю систему координат, поэтому браузер корректно пересчитывает геометрию под новый размер.

Что такое viewBox в SVG?

viewBox задает координатную область SVG. Например, viewBox="0 0 24 24" означает виртуальную область шириной и высотой 24 единицы. По ней браузер масштабирует содержимое SVG под внешний размер.

Чем width/height отличаются от viewBox?

width и height задают внешний размер SVG на странице, а viewBox — внутреннюю координатную систему. При наличии viewBox внешний размер можно менять через CSS, сохраняя пропорции изображения.

Как менять цвет SVG-иконки через CSS?

Значение currentColor позволяет иконке наследовать CSS-свойство color родителя:

<button class="button">
  <svg
    viewBox="0 0 24 24"
    class="icon"
    aria-hidden="true"
  >
    <path
      fill="currentColor"
      d="M12 2L2 22h20L12 2z"
    />
  </svg>
  Отправить
</button>

.button {
  color: #4f46e5;
}

.icon {
  width: 24px;
  height: 24px;
}

Что лучше для иконок: inline SVG, SVG sprite или img?

Inline SVG удобен для управления цветом, состояниями и доступностью через CSS. SVG sprite подходит для переиспользования большого набора символов. <img src="icon.svg"> проще и хорошо кешируется, но не позволяет странице напрямую менять стили внутренних элементов SVG.

Команда должна заранее договориться, где живут иконки, кто отвечает за оптимизацию, как задаются имена и как обрабатываются декоративные и смысловые icons. SVG обычно предпочтительнее icon font, потому что лучше контролирует accessibility, цвет, размер и не зависит от font loading.

Какие проблемы появляются при локализации frontend-приложения?

Локализация влияет не только на перевод строк. Нужно учитывать длину текста, pluralization, даты, числа, валюты, сортировку, переносы, шрифты, SEO, accessibility и направление LTR/RTL. Если компоненты не проверять на разных locale, интерфейс может сломаться из-за длинных labels или другого порядка слов.

Как сделать SVG-иконку доступной?

Декоративную иконку нужно скрыть от accessibility tree:

<svg
  aria-hidden="true"
  focusable="false"
></svg>

Если иконка передает смысл, ей нужен доступный текст, например видимая подпись рядом или имя изображения:

<svg
  role="img"
  aria-label="Поиск"
></svg>

Для кнопки только с иконкой доступное имя обычно задают самой кнопке.

Какие ошибки часто делают при работе с SVG-иконками?

Забывают viewBox.
Жестко задают размеры и затрудняют масштабирование.
Не используют currentColor, когда цвет должен наследоваться.
Подключают тяжелые SVG без оптимизации.
Не учитывают accessibility.
Оставляют лишние metadata из Figma и других редакторов.

Accessibility и SEO

Middle

Как рассчитывается accessible name?

Accessible name - имя элемента в accessibility tree. Его могут задавать видимый текст, aria-labelledby, aria-label, alt, label элемента формы и другие источники по алгоритму браузера.

<button aria-label="Закрыть">
  <svg aria-hidden="true"></svg>
</button>

Лучше предпочитать видимый текст или aria-labelledby, потому что они синхронизированы с интерфейсом. aria-label полезен для icon-only controls, но его легко забыть обновить при переводе.

Когда использовать aria-live?

aria-live сообщает screen reader об изменениях, которые происходят без перемещения focus: ошибка сохранения, результат поиска, завершение загрузки. Для обычного контента, который появляется после действия и получает focus, live region часто не нужна.

<p
  role="status"
  aria-live="polite"
>
  Данные сохранены
</p>

polite не перебивает текущую речь, assertive используют редко и только для срочных сообщений. Частая ошибка - объявлять слишком много изменений и создавать шум.

Что такое structured data и зачем нужен JSON-LD?

Structured data описывает смысл страницы машинно-читаемым способом: article, product, breadcrumbs, FAQ, organization. JSON-LD удобно добавлять отдельным script block, не смешивая schema-разметку с HTML-структурой.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Frontend interview questions"
  }
</script>

JSON-LD не гарантирует rich results. Данные должны соответствовать видимому контенту страницы, иначе поисковая система может их игнорировать.