Подготовьтесь к прохождению собеседования по HTML с помощью этой статьи. Здесь вы найдете актуальные вопросы, которые могут быть заданы на собеседовании фронтенд разработчика, а также краткие ответы и ссылки на полезные учебные материалы. Проверьте свои знания ключевых концепций, правильного использования тегов, атрибутов и семантики HTML, чтобы быть уверенным в своих знаниях перед важным интервью.
Ниже представлено 10 вопросов по теме HTML (источник), которые часто задают на собеседовании. Прочитав вопрос, постарайтесь ответить на него так, как бы вы это делали во время своего интервью. Под вопросом вы найдете ответ и ссылку на источники раскрывающие тему подробнее.
1) Почему, как правило, лучше размещать подключение CSS внутри элемента head, а JS скриптов , перед закрывающимся тегом body? Знаете ли вы какие-либо исключения, приведите примеры ?
Посмотреть ответ
Стили рекомендуется подключать в head для того, чтобы страница как можно быстрее приняла свой внешний вид. Скрипты подключенные в head могут затормозить этот процесс, в связи с этим их рекомендуется подключать перед закрывающим тегом body. Исключением являются скрипты аналитики, для определения количества посетителей, которые не дождались загрузки страницы. В этом случае скрипт должен быть подключен в head
Подробнее тут:
2) Как обеспечить корректное отображение текста на странице на нескольких языках (речь о кодировке)?
Посмотреть ответ
Кодировка HTML-страницы должна быть указана для того, чтобы браузер смог корректно отрисовать текст на странице. В противном случае вместо необходимых символов появятся малопонятные иероглифы.
Подробнее тут:
3) Какую функцию выполняет элемент doctype?
Посмотреть ответ
С помощью этого элемента указывается тип текущего документа. Т.е. элемент необходим для правильного отображения и работы страницы в браузере.
Подробнее тут:
4) На что нужно обратить внимание при разработке мультиязычных сайтов?
Посмотреть ответ
На объем кода, его читабельность и масштабируемость. А также, на быстродействие и производительность в процессе перерисовки контента, если перевод осуществляется «на лету». Если для каждой страницы сайта, существует ее локализованная версия, необходимо обратить внимание на то, идентифицируют ли ее поисковые системы.
Подробнее тут:
5) Для чего нужны data — атрибуты ?
Посмотреть ответ
Для хранения дополнительно информации, ассоциированной с каким-либо элементом.
Подробнее тут:
6) Опишите разницу между cookies, sessionstorage и localstorage.
Посмотреть ответ
sessionstorage — хранит информацию в браузере, пока не закрыта вкладка, после ее закрытия — информация удаляется. localstorage — хранит информацию в браузере даже после того, как вкладка закрыта, не имеет срока жизни. cookies — хранят информацию, имеют срок жизни (expires), отправляются на сервер с запросом.
Подробнее тут:
7) Опишите разницу между script, script async и script defer
Посмотреть ответ
script — браузер начнет загружать файл JS, как только встретит строку с его вызовом, при этом загрузка браузером оставшейся части HTML страницы, продолжится после того, как будет выполнен js скрипт.
script-async — браузер не остановит обработку HTML страницы, а будет читать ее дальше. После того как скрипт загрузится — он выполнится, не дожидаясь загрузки всей HTML страницы. Если скриптов несколько — первым отработает тот, который быстрее загрузится.
При использовании script-defer — также будет асинхронное выполнение скрипта, но в отличие от script-async — первым сработает тот скрипт, который встретился раньше. Еще одно отличие от async — это то, что script-defer сработает, когда вся страница HTML будет обработана браузером.
Подробнее тут:
8) Что такое прогрессивный рендеринг ?
Посмотреть ответ
Это процесс отрисовки контента страницы по мере его прогрузки (прогрессивно). Например, сначала рисуется текст, потом изображения, таблицы и т.п.
Подробнее тут:
9) За что отвечает атрибут srcset в тэге img? Объясните, каким образом браузер обрабатывает значение этого атрибута.
Посмотреть ответ
Список из одного или нескольких значений, указывающих набор возможных изображений для отображения в браузере. Каждое значение атрибута может иметь дескрипторы ширины или плотности пикселей, на основании которых браузер понимает какою картинку из списка необходимо загрузить.
Подробнее тут:
10) Использовали ли вы когда-то HTML-препроцессоры? Расскажите о недостатках/преимуществах любого из них.
Посмотреть ответ
Препроцессоры дают дополнительный функционал по отрисовке коллекций, а также использованию условных конструкций непосредственно в HTML файле и т.д. Также дают более короткий синтаксис, PUG, например. Вышеупомянутый PUG обрабатывает вложенности с помощью отступов, что при копи-пасте кода часто ломает все верстку и ее сборку.
Подробнее тут:
