| layout | ../../layouts/Layout.astro |
|---|---|
| title | HTML |
| description | Семантика HTML, формы, accessibility, SEO, metadata, SVG, media и устройство браузерного документа |
| category | Frontend |
| kind | questions |
| order | 30 |
Что такое HTML и какую задачу он решает?
|
Короткий ответ HTML описывает структуру и смысл документа: заголовки, текст, навигацию, формы, ссылки и изображения. Браузер разбирает разметку и строит DOM, который используют CSS, JavaScript, поисковые роботы и ассистивные технологии (assistive technologies). Полный ответ 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. Полный ответ
Attribute задает дополнительную информацию или поведение element: |
Что такое semantic HTML?
|
Короткий ответ Semantic HTML использует элементы по их назначению: nav для навигации, main для основного контента, button для действия. Это делает структуру понятнее браузеру, разработчикам, поисковым системам и assistive technologies. Полный ответ Semantic HTML использует элементы по их назначению: В командных guidelines semantic HTML должен быть отдельным правилом, потому что в Angular templates легко заменить структуру набором компонентов и директив. Хороший кандидат объяснит, что компоненты не отменяют базовые HTML semantics: landmarks, headings, form controls и интерактивные элементы все равно должны оставаться корректными. |
Что такое document outline?
|
Короткий ответ Это логическая структура документа, прежде всего иерархия заголовков и landmarks. На практике нужно последовательно использовать h1–h6, не полагаясь на давно предложенный, но не реализованный браузерами outline algorithm для sectioning elements. Полный ответ Это логическая структура документа, прежде всего иерархия заголовков и landmarks. На практике нужно последовательно
использовать |
Что такое doctype и зачем он нужен?
|
Короткий ответ сообщает браузеру, что документ следует обрабатывать в standards mode. Без корректного doctype браузер может включить quirks mode с устаревшими правилами layout и совместимости. Полный ответ
|
Что такое custom elements?
|
Короткий ответ Custom Elements API позволяет регистрировать собственные HTML-элементы с именем через дефис и lifecycle callbacks. Это часть Web Components; Shadow DOM и templates являются отдельными API и не включаются автоматически. Полный ответ Custom Elements API позволяет регистрировать собственные HTML-элементы с именем через дефис и lifecycle callbacks. Это часть Web Components; Shadow DOM и templates являются отдельными API и не включаются автоматически. |
Чем tag отличается от HTML element?
|
Короткий ответ Tag — синтаксическая часть разметки, например или . Element — целый узел: открывающий tag, attributes, content и закрывающий tag. Void elements вроде не имеют closing tag и содержимого. Полный ответ
Tag — синтаксическая часть разметки, например |
Чем block element отличается от inline element?
|
Короткий ответ Исторически block elements начинали новую строку, а inline elements участвовали в строке текста. В современном CSS реальное поведение задает display, поэтому семантическую категорию HTML-элемента нельзя использовать как замену знанию layout. Полный ответ Исторически block elements начинали новую строку, а inline elements участвовали в строке текста. В современном CSS
реальное поведение задает |
Зачем команде договариваться об HTML principles?
|
Короткий ответ HTML principles фиксируют, как команда пишет разметку: использует семантические элементы, поддерживает accessibility, не заменяет button и a на кликабельные div, сохраняет правильную структуру headings и forms. Это снижает споры в review и помогает screen readers, SEO, автотестам и долгой поддержке интерфейса. Полный ответ HTML principles фиксируют, как команда пишет разметку: использует семантические элементы, поддерживает accessibility, не
заменяет |
Чем 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. Полный ответ 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. Полный ответ Backend или CMS могут добавлять wrappers, ids, classes, служебные attributes и готовые HTML-фрагменты. Эти соглашения нужно учитывать, чтобы не сломать CSS, accessibility, analytics и автотесты. Хороший ответ включает мысль, что такие контракты лучше документировать, а не выяснять по случайным DOM-структурам в production. |
Как договориться о комментариях в HTML?
|
Короткий ответ HTML-комментарии стоит оставлять только для неочевидной структуры, интеграционного ограничения или временного workaround. Они не должны пересказывать obvious markup. В Angular чаще лучше помогают понятные имена компонентов, inputs и template blocks, а большой комментарий в template может быть сигналом, что код стоит упростить. Полный ответ HTML-комментарии стоит оставлять только для неочевидной структуры, интеграционного ограничения или временного workaround. Они не должны пересказывать obvious markup. В Angular чаще лучше помогают понятные имена компонентов, inputs и template blocks, а большой комментарий в template может быть сигналом, что код стоит упростить. |
Что делает атрибут lang?
|
Короткий ответ lang задает язык документа или фрагмента. Он помогает screen reader выбрать произношение, браузеру — проверку орфографии и переносы, а поисковым системам — интерпретировать содержимое. Полный ответ
|
Для чего нужны data-* attributes?
|
Короткий ответ Они хранят небольшие пользовательские данные прямо на element и доступны через dataset. Их используют для связи разметки с поведением или тестами, но не как замену application state и не для секретных данных. Полный ответ Они хранят небольшие пользовательские данные прямо на element и доступны через |
Из каких частей состоит 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. Полный ответ 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. Полный ответ Cookie может автоматически отправляться с HTTP-запросами и иметь флаги |
Чем script, script async и script defer отличаются?
|
Короткий ответ Обычный script блокирует HTML parsing до загрузки и выполнения. async загружается параллельно и выполняется сразу после загрузки, поэтому порядок между async scripts не гарантирован. defer загружается параллельно, выполняется после parsing в порядке объявления и обычно лучше подходит для application bundle. Полный ответ Обычный |
Почему clickable div — плохая практика?
|
Короткий ответ div не получает focus, keyboard activation, role и accessible name интерактивного элемента автоматически. Их ручная имитация сложна и хрупка. Для действий следует использовать button, для переходов — a. Полный ответ
|
Что происходит после получения HTML-документа?
|
Короткий ответ Браузер начинает streaming parse HTML еще до полной загрузки документа. Он строит DOM, заранее обнаруживает ресурсы через preload scanner, загружает CSS, JavaScript, изображения, fonts и другие зависимости. Полный ответ Браузер начинает streaming parse HTML еще до полной загрузки документа. Он строит DOM, заранее обнаруживает ресурсы через preload scanner, загружает CSS, JavaScript, изображения, fonts и другие зависимости. Для первого render нужны DOM, CSSOM и render tree. Затем browser выполняет layout, paint и compositing. JavaScript, stylesheets, fonts и большие изображения могут задержать отдельные этапы, поэтому производительность оценивают по реальному Critical Rendering Path. |
Что такое progressive enhancement?
|
Короткий ответ Progressive enhancement начинает с базового доступного HTML и постепенно добавляет CSS, JavaScript и продвинутые browser features. Если часть улучшений недоступна, основной content и ключевые действия остаются рабочими. Для Angular это особенно заметно в SSR/prerender сценариях: пользователь не должен видеть пустую страницу до загрузки bundle. Полный ответ Progressive enhancement начинает с базового доступного HTML и постепенно добавляет CSS, JavaScript и продвинутые browser features. Если часть улучшений недоступна, основной content и ключевые действия остаются рабочими. Для Angular это особенно заметно в SSR/prerender сценариях: пользователь не должен видеть пустую страницу до загрузки bundle. |
Чем progressive enhancement отличается от graceful degradation?
|
Короткий ответ Progressive enhancement проектирует опыт от базового слоя к улучшениям. Graceful degradation обычно начинается с полнофункционального варианта и пытается сохранить приемлемую работу при отсутствии части возможностей. Первый подход лучше помогает accessibility, слабым устройствам и нестабильной сети, второй часто встречается при поддержке старых браузеров. Полный ответ Progressive enhancement проектирует опыт от базового слоя к улучшениям. Graceful degradation обычно начинается с полнофункционального варианта и пытается сохранить приемлемую работу при отсутствии части возможностей. Первый подход лучше помогает accessibility, слабым устройствам и нестабильной сети, второй часто встречается при поддержке старых браузеров. |
Чем browser support отличается от browser optimization?
|
Короткий ответ Browser support означает, что пользователь может выполнить основной сценарий в браузере или на устройстве. Browser optimization означает, что под важные браузеры, устройства и сети интерфейс дополнительно улучшается. Не всегда нужно давать всем одинаковый experience, но базовый сценарий не должен ломаться без явной продуктовой причины. Полный ответ Browser support означает, что пользователь может выполнить основной сценарий в браузере или на устройстве. Browser optimization означает, что под важные браузеры, устройства и сети интерфейс дополнительно улучшается. Не всегда нужно давать всем одинаковый experience, но базовый сценарий не должен ломаться без явной продуктовой причины. |
Как определить, какие браузеры поддерживать?
|
Короткий ответ Browser support должен опираться на аналитику пользователей, требования бизнеса, корпоративную среду, законодательные ограничения и стоимость поддержки. Решение нельзя принимать только по личным предпочтениям разработчиков. Его стоит записать в guidelines и регулярно пересматривать. Полный ответ Browser support должен опираться на аналитику пользователей, требования бизнеса, корпоративную среду, законодательные ограничения и стоимость поддержки. Решение нельзя принимать только по личным предпочтениям разработчиков. Его стоит записать в guidelines и регулярно пересматривать. |
Что такое graded browser support?
|
Короткий ответ Graded browser support делит браузеры или устройства на уровни. Например, в одних браузерах гарантируется полный experience, в других — базовая функциональность, а для устаревших окружений — readable content или explicit fallback. Это помогает управлять стоимостью поддержки и ожиданиями бизнеса. Полный ответ Graded browser support делит браузеры или устройства на уровни. Например, в одних браузерах гарантируется полный experience, в других — базовая функциональность, а для устаревших окружений — readable content или explicit fallback. Это помогает управлять стоимостью поддержки и ожиданиями бизнеса. |
Когда компоненту нужна отдельная browser support policy?
|
Короткий ответ Отдельная policy нужна, если компонент использует API с разной поддержкой: camera, clipboard, drag and drop, сложную графику, heavy animations, WebGL или нестандартные browser features. Продукт может поддерживать базовый сценарий шире, а конкретный advanced component — уже, если fallback честно описан. Полный ответ Отдельная policy нужна, если компонент использует API с разной поддержкой: camera, clipboard, drag and drop, сложную графику, heavy animations, WebGL или нестандартные browser features. Продукт может поддерживать базовый сценарий шире, а конкретный advanced component — уже, если fallback честно описан. |
Почему HTML-парсер не падает на невалидной разметке?
|
Короткий ответ HTML parsing designed to be forgiving: браузеры десятилетиями должны были показывать страницы с ошибками разметки. Спецификация описывает tokenization, tree construction и error recovery, поэтому parser исправляет многие случаи сам. Полный ответ HTML parsing designed to be forgiving: браузеры десятилетиями должны были показывать страницы с ошибками разметки. Спецификация описывает tokenization, tree construction и error recovery, поэтому parser исправляет многие случаи сам. Например, браузер может автоматически закрыть тег, вставить пропущенный |
Чем DOM отличается от HTML source?
|
Короткий ответ HTML source — это текст, который пришел от сервера или был записан в документ. DOM — live object model, которую браузер построил после parsing и error recovery, а затем может изменять JavaScript. Полный ответ HTML source — это текст, который пришел от сервера или был записан в документ. DOM — live object model, которую браузер построил после parsing и error recovery, а затем может изменять JavaScript. DOM может содержать автоматически добавленные узлы, нормализованную структуру, элементы из templates после runtime rendering и изменения, которых не было в исходном HTML. На интервью важно не смешивать view-source и Elements panel. |
Что такое preload, prefetch и preconnect?
|
Короткий ответ preload приоритетно загружает ресурс текущей страницы, prefetch с низким приоритетом готовит вероятный следующий переход, preconnect заранее устанавливает соединение с origin. Ошибочное применение расходует bandwidth и конкурирует с критическими ресурсами. Полный ответ
|
Как работает 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-механизмом. Полный ответ 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. Полный ответ 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, потому что клиентскую проверку можно обойти. Полный ответ Браузер проверяет constraints вроде |
Для чего нужен 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 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. Полный ответ Radio buttons одной группы получают одинаковый |
Что такое accessibility и WCAG?
|
Короткий ответ Accessibility, или a11y, — проектирование интерфейса так, чтобы им могли пользоваться люди с разными возможностями и устройствами. WCAG — рекомендации W3C, сгруппированные по принципам perceivable, operable, understandable и robust, с проверяемыми критериями уровней A, AA и AAA. Полный ответ Accessibility, или a11y, — проектирование интерфейса так, чтобы им могли пользоваться люди с разными возможностями и устройствами. WCAG — рекомендации W3C, сгруппированные по принципам perceivable, operable, understandable и robust, с проверяемыми критериями уровней A, AA и AAA. |
Что такое keyboard navigation и visible focus?
|
Короткий ответ Все действия должны быть доступны с клавиатуры в логичном порядке. Текущий focus обязан быть заметен; нельзя убирать outline без равноценной замены. Native controls уже поддерживают Tab, Enter, Space и ожидаемые паттерны. Полный ответ Все действия должны быть доступны с клавиатуры в логичном порядке. Текущий focus обязан быть заметен; нельзя убирать outline без равноценной замены. Native controls уже поддерживают Tab, Enter, Space и ожидаемые паттерны. |
Что такое focus management и focus trap?
|
Короткий ответ Focus management переводит focus после значимого UI-события и возвращает его в понятное место. Modal dialog ограничивает Tab внутри себя, устанавливает начальный focus и после закрытия возвращает его trigger. 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. Полный ответ Screen reader озвучивает accessibility tree и позволяет перемещаться по headings, landmarks, controls и другим семантическим узлам. Проверка только DOM или визуального вида не гарантирует корректный опыт screen reader. |
Что такое ARIA и когда ее использовать?
|
Короткий ответ ARIA добавляет roles, states и relationships в accessibility tree, но не создает keyboard behavior и не меняет семантику для обычного UI автоматически. Сначала выбирают native HTML; 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 и динамических состояний. Полный ответ 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. Полный ответ Использовать semantic landmarks, правильную иерархию заголовков, |
Зачем команде accessibility checklist?
|
Короткий ответ Accessibility checklist помогает не забывать базовые требования: semantic HTML, keyboard navigation, focus states, labels, contrast, alt text и корректные ARIA attributes. В большой команде это превращает accessibility из личной памяти отдельного разработчика в повторяемую часть review и testing workflow. Полный ответ 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 поведения в ключевых сценариях. Полный ответ Полезны 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. Полный ответ Автотесты могут найти отсутствие label, часть ошибок ARIA, слабый contrast и очевидные нарушения semantics. Но они не понимают смысл текста, удобство сценария, ожидаемый порядок focus и реальное восприятие screen reader. Поэтому хороший workflow сочетает automated checks, ручную проверку и ревью компонентов design system. |
Что такое accessible name и как кнопка его получает?
|
Короткий ответ Accessible name — имя элемента в accessibility tree. Кнопка обычно получает его из видимого текста, затем могут учитываться aria-labelledby или aria-label. Видимая подпись предпочтительнее скрытого имени, когда она уместна. Полный ответ Accessible name — имя элемента в accessibility tree. Кнопка обычно получает его из видимого текста, затем могут
учитываться |
Чем 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". Полный ответ Live region сообщает assistive technologies о динамических изменениях без перемещения focus. |
Как сделать доступное modal dialog?
|
Короткий ответ Нужны понятное имя, modal semantics, начальный focus, ограничение Tab внутри окна, закрытие Escape и возврат focus на trigger. Native решает часть поведения, но название, содержимое, trigger и тестирование остаются задачей приложения. Полный ответ Нужны понятное имя, modal semantics, начальный focus, ограничение Tab внутри окна, закрытие Escape и возврат focus на
trigger. Native |
Как сделать доступные dropdown и tabs?
|
Короткий ответ Сначала выбирают правильный паттерн: disclosure, menu, listbox и combobox имеют разное поведение. Tabs используют tablist, tab, tabpanel, arrow-key navigation и связи через aria-controls/aria-labelledby. Для сложных widgets следуют WAI-ARIA Authoring Practices и тестируют клавиатурой и screen reader. Полный ответ Сначала выбирают правильный паттерн: disclosure, menu, listbox и combobox имеют разное поведение. Tabs используют
|
Как сделать доступную icon button?
|
Короткий ответ Используют настоящий button с accessible name, например aria-label="Закрыть"; декоративную SVG внутри скрывают через aria-hidden="true". Нужны достаточный target size, visible focus и понятные hover/disabled states. Полный ответ Используют настоящий |
Почему цвет не должен быть единственным способом передачи информации?
|
Короткий ответ Различие может быть незаметно пользователям с нарушением цветовосприятия или на плохом дисплее. Ошибку, статус или выбранное состояние дублируют текстом, иконкой, формой или другим независимым признаком и обеспечивают достаточный contrast. Полный ответ Различие может быть незаметно пользователям с нарушением цветовосприятия или на плохом дисплее. Ошибку, статус или выбранное состояние дублируют текстом, иконкой, формой или другим независимым признаком и обеспечивают достаточный contrast. |
Для чего нужен атрибут lang?
|
Короткий ответ Атрибут lang задает язык документа или отдельного фрагмента текста. Полный ответ Атрибут <html lang="ru"></html>Он помогает:
<p>
Я изучаю
<span lang="en">frontend development</span>
.
</p>
|
Для чего нужны семантические HTML-теги?
|
Короткий ответ Семантические теги описывают назначение контента: header, nav, main, article, button. Полный ответ Семантические теги описывают назначение контента: Они улучшают accessibility, навигацию скринридеров, SEO и читаемость разметки. Семантика не заменяет корректную структуру заголовков, подписи элементов форм и поддержку клавиатуры. |
Зачем нужен meta name="viewport"?
|
Короткий ответ сопоставляет layout viewport ширине устройства. Без него мобильный браузер может отрендерить страницу в широком виртуальном viewport и уменьшить ее целиком. Полный ответ
|
Что такое favicon?
|
Короткий ответ Favicon — набор иконок сайта для вкладок, bookmarks, history и устройств. Его подключают через , а форматы и размеры выбирают с учетом целевых браузеров и manifest приложения. Полный ответ Favicon — набор иконок сайта для вкладок, bookmarks, history и устройств. Его подключают через |
Что такое canonical URL?
|
Короткий ответ указывает предпочтительный URL для страниц с одинаковым или очень похожим content. Это сигнал поисковой системе против дублирования, а не redirect и не механизм безопасности. Полный ответ
|
Для чего нужны 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. Полный ответ Frontend-разработчик отвечает за содержательный HTML, корректные |
Как правильно использовать заголовки h1–h6?
|
Короткий ответ Заголовки создают иерархию, а не выбираются ради размера шрифта. Обычно у страницы один основной h1, затем уровни идут последовательно по структуре. Несколько h1 технически допустимы, но один главный заголовок обычно понятнее пользователям и инструментам. Полный ответ Заголовки создают иерархию, а не выбираются ради размера шрифта. Обычно у страницы один основной |
Что такое Open Graph?
|
Короткий ответ Open Graph metadata задает title, description, image и URL для preview при публикации ссылки в социальных сетях и мессенджерах. Это не замена обычным HTML metadata; изображения должны иметь доступный URL и подходящие размеры. Полный ответ 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. Полный ответ SSR или prerender отдает содержательный HTML раньше JavaScript, упрощая индексацию и previews. Современные crawlers могут выполнять JavaScript, но это требует времени и ресурсов; SPA без server-rendered content также хуже работает у ботов без полного rendering support. |
Чем JPEG, PNG, WebP, AVIF и SVG отличаются друг от друга?
|
Короткий ответ JPEG подходит для фотографий без прозрачности, PNG — для lossless-графики и прозрачности, WebP и AVIF дают более современное сжатие, SVG — векторную графику. Формат выбирают по типу изображения, качеству, размеру, transparency, animation и browser support. Полный ответ JPEG подходит для фотографий без прозрачности, PNG — для lossless-графики и прозрачности, WebP и AVIF дают более современное сжатие, SVG — векторную графику. Формат выбирают по типу изображения, качеству, размеру, transparency, animation и browser support. |
Когда использовать SVG, а когда raster image?
|
Короткий ответ SVG подходит для иконок, схем и простой графики, которая должна масштабироваться и стилизоваться. Для фотографий и сложных текстур raster format обычно компактнее и быстрее. Очень сложный SVG тоже может быть тяжелым для rendering. Полный ответ SVG подходит для иконок, схем и простой графики, которая должна масштабироваться и стилизоваться. Для фотографий и сложных текстур raster format обычно компактнее и быстрее. Очень сложный SVG тоже может быть тяжелым для rendering. |
Что такое responsive images и как работают srcset/sizes?
|
Короткий ответ srcset перечисляет image candidates по ширине или density, а sizes сообщает ожидаемый layout size. Браузер выбирает ресурс с учетом viewport, DPR, доступной ширины и других факторов, не загружая все варианты. Полный ответ
На уровне командных guidelines стоит договориться, когда использовать |
Что делает loading="lazy"?
|
Короткий ответ Атрибут откладывает загрузку изображения или iframe, пока ресурс не приблизится к viewport. Это экономит сеть, но его не ставят на вероятный LCP image. width и height задают заранее, чтобы сохранить место и избежать CLS. Полный ответ Атрибут откладывает загрузку изображения или iframe, пока ресурс не приблизится к viewport. Это экономит сеть, но его не
ставят на вероятный LCP image. |
Что такое 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 — векторный формат изображения, который описывает картинку через XML-разметку: линии, пути, фигуры, градиенты и текст. В отличие от PNG и JPEG, SVG масштабируется без потери качества: браузер пересчитывает геометрию, а не растягивает пиксели. |
Почему SVG подходит для scalable icons?
|
Короткий ответ SVG-иконка остается четкой при разных размерах и плотностях экрана. Один файл можно использовать в размерах 16px, 24px, 48px и на Retina-дисплеях без отдельного набора изображений. Полный ответ SVG-иконка остается четкой при разных размерах и плотностях экрана. Один файл можно использовать в размерах |
Как сделать 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 в 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 подходит для переиспользования большого набора символов. проще и хорошо кешируется, но не позволяет странице напрямую менять стили внутренних элементов SVG. Полный ответ Inline SVG удобен для управления цветом, состояниями и доступностью через CSS. SVG sprite подходит для переиспользования
большого набора символов. Команда должна заранее договориться, где живут иконки, кто отвечает за оптимизацию, как задаются имена и как обрабатываются декоративные и смысловые icons. SVG обычно предпочтительнее icon font, потому что лучше контролирует accessibility, цвет, размер и не зависит от font loading. |
Какие проблемы появляются при локализации frontend-приложения?
|
Короткий ответ Локализация влияет не только на перевод строк. Нужно учитывать длину текста, pluralization, даты, числа, валюты, сортировку, переносы, шрифты, SEO, accessibility и направление LTR/RTL. Если компоненты не проверять на разных locale, интерфейс может сломаться из-за длинных labels или другого порядка слов. Полный ответ Локализация влияет не только на перевод строк. Нужно учитывать длину текста, pluralization, даты, числа, валюты, сортировку, переносы, шрифты, SEO, accessibility и направление LTR/RTL. Если компоненты не проверять на разных locale, интерфейс может сломаться из-за длинных labels или другого порядка слов. |
Как сделать SVG-иконку доступной?
|
Короткий ответ Декоративную иконку нужно скрыть от accessibility tree: Полный ответ Декоративную иконку нужно скрыть от accessibility tree: <svg
aria-hidden="true"
focusable="false"
></svg>Если иконка передает смысл, ей нужен доступный текст, например видимая подпись рядом или имя изображения: <svg
role="img"
aria-label="Поиск"
></svg>Для кнопки только с иконкой доступное имя обычно задают самой кнопке. |
Какие ошибки часто делают при работе с SVG-иконками?
|
Короткий ответ Забывают viewBox. - Жестко задают размеры и затрудняют масштабирование. - Не используют currentColor, когда цвет должен наследоваться. - Подключают тяжелые SVG без оптимизации. - Не учитывают accessibility. - Оставляют лишние metadata из Figma и других редакторов. Полный ответ
|
Как рассчитывается accessible name?
|
Короткий ответ Accessible name - имя элемента в accessibility tree. Его могут задавать видимый текст, aria-labelledby, aria-label, alt, label элемента формы и другие источники по алгоритму браузера. Полный ответ Accessible name - имя элемента в accessibility tree. Его могут задавать видимый текст, <button aria-label="Закрыть">
<svg aria-hidden="true"></svg>
</button>Лучше предпочитать видимый текст или |
Когда использовать aria-live?
|
Короткий ответ aria-live сообщает screen reader об изменениях, которые происходят без перемещения focus: ошибка сохранения, результат поиска, завершение загрузки. Для обычного контента, который появляется после действия и получает focus, live region часто не нужна. Полный ответ
<p
role="status"
aria-live="polite"
>
Данные сохранены
</p>
|
Что такое structured data и зачем нужен JSON-LD?
|
Короткий ответ Structured data описывает смысл страницы машинно-читаемым способом: article, product, breadcrumbs, FAQ, organization. JSON-LD удобно добавлять отдельным script block, не смешивая schema-разметку с HTML-структурой. Полный ответ 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. Данные должны соответствовать видимому контенту страницы, иначе поисковая система может их игнорировать. |