Десять типичных вопросов на собеседованиях на знание HTML

Аурэлио Де Роза несколько дней назад выпустил, на мой взгляд, очень привлекательную статью, которой я хочу с вами поделиться на тот случай, если у вас плохо с английским.



Несколько недель назад на SitePoint были опубликованы две мои статьи, в которых я рассмотрел наиболее часто задаваемые на собеседовании вопросы по JavaScript (в случае, если вы пропустили: «5 Typical JavaScript Interview Exercises» и «5 More JavaScript Interview Exercises»).

Обе эти статьи имели огромный успех, что было крайне неожиданным. Я решил, что пришло время написать подобную статью, но уже на тему HTML — и вот, что у меня получилось.

Валидация разметки


Рассмотрим следующую разметку:

<figure>
   <picture>
      <source media="(min-width: 40em)"
      srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
      <img src="medium.jpg" alt="London by night">
   </picture>
   <figcaption>A landscape of London by night</figcaption>
</figure>


Валидный ли это код? Поясните, почему.

Ответ


В разметке используется тэг picture, который совсем недавно вошел в спецификацию. Код валидный вплоть до последнего изображения в атрибуте srcset; 320y — невалидное значение. Если изменить y на w, то код будет валидным полностью.

Элемент main


Дайте определение элементу main. Какова его цель? Сходятся ли в определении этого элемента спецификации W3C и WHATWG?

Ответ


main элемент не имеет единого определения и в каждой спецификации оно разное.

Спецификация W3C описывает элемент как главное содержание страницы, то есть контент, который описывает основную тему страницы или является ключевым элементом функциональности приложения. В спецификации также говорится, что на странице не может быть больше одного main элемента.

Спецификация WHATWG не наделяет тэг main какой-либо семантикой и описывает элемент как контейнер для главенствующего содержания какого либо элемента. Также, согласно WHATWG, вам не запрещается иметь на одной странице несколько элементов main. Если у вас имеется несколько article элементов на странице, то вы можете выделить главенствующее содержимое каждого article с помощью тэга main.

WAI-ARIA


Рассмотрим следующую разметку:

<header>
   <h1>Main title</h1>
   <form action="/" method="get">
      <input type="search">
      <input type="submit">
   </form>
</header>
<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a></li>
   <li><a href="/about">About</a></li>
</ul>
<main>
   <article>
      <h1>Main title</h1>
      <p>This is the content of this section</p>
   </article>
</main>
<footer>
   <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>


Можете ли вы улучишь доступность разметки с помощью WAI-ARIA ролей, где это возможно, учитывая старые технологии?

Ответ


Код должен быть переписан следующим образом:

<header role="header">
  <h1>Main title</h1>
  <form action="/" method="get" role="search">
     <label for="search">Search:</label>
     <input id="search" type="search">
     <input type="submit">
  </form>
</header>
<nav role="navigation">
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/products">Products</a></li>
     <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <article role="article">
     <h1>Main title</h1>
     <p>This is the content of this section</p>
  </article>
</main>
<footer role="contentinfo">
  <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>


Чтобы улучшить доступность, список навигации был помещен в тэг nav. Чтобы улучшить доступность для старых технологий, которые не поддерживают новые семантичные тэги, роли header, navigation, main, article, и contentinfo были добавлены элементам header, nav, main, article, и footer соответственно.

Другое улучшение касается формы поиска. Сначала форме была добавлена роль search. После чего был добавлен элемент label, который связан с элементом input с помощью атрибута for.

Элемент small


Расскажите, в каких случаях уместно использование элемента small и приведите пример.

Ответ


Элемент small был представлен в HTML 4.01 и предназначался для того, чтобы делать текст маленьким. В HTML5 этому тэгу придали семантическое значение и рекомендуют помещать в него различного рода предупреждения, юридические текст и прочее, что должно быть написано «мелким шрифтом». При этом текст может выглядеть маленьким, но это уже не обязательно.

Пример использования приведен ниже:

<img src="image.jpg" alt="London by night">
<small>Права на это изображение являются собственностью Аурелио Де Роза.</small>


Подзаголовки


Подзаголовки — это одни из самых распространенных элементов в любом вебсайте. Несколько лет назад тэг hgroup был представлен как раз для этих нужд, однако совсем недавно он был удалён из спецификации. Можете ли вы описать, почему отказались от hgroup и как проблему с разметкой заголовков решают сегодня?

Ответ


Элемент hgroup был создан для того, чтобы группировать заголовки (h1-h6) и тем самым исключить возможность непреднамеренного создания подуровня в иерархии. Чтобы понять, к какой же все-таки проблеме взывает данный тэг, давайте рассмотрим следующую разметку:

<article>
   <h1>Main title</h1>
   <h2>This is a subtitle</h2>
   <p>This is the content of this section</p>
</article>


Вот что мы получаем, если попробовать изобразить иерархию вышеизложенной разметки:

	h1
	|
	---h2
	   |
	   p


Эта простая схема наглядно показывает, что параграф являестя содержимым элемента h2 вместо того, чтобы быть содержимым элемента h1, вне зависимости от того, планировалось ли так сделать. Если же было намерение создать подзаголовок, а p связать с h1, то данная разметка является неправильной.

Собственно, элемент hgroup и был создан для того, чтобы решить эту проблему. Однако он был удалён из спецификации HTML5 в апреле 2013 года в виду отсутствия реализаций и отсутствия прецедентов, что делает его использование недопустимым.

Решением для задачи создания подзаголовка так, чтобы следующий далее параграф был связан с h1, изложено ниже:

<article>
   <h1>
       Main title
       <span>This is a subtitle</span>
   </h1>
   <p>This is the content of this section</p>
</article>


Изображения и доступность


Является ли атрибут alt обязательным для img элемента? Если нет, то приведите пример, в котором атрибут alt может иметь пустое значение. Изменится ли как-то доступность этого элемента в данном случае?

Ответ


Атрибут alt является обязательным для тэга img, однако значение этого атрибута может быть пустым (т.е. alt=""). Имеет смысл оставлять значение атрибута пустым в случае, когда изображение используется только для декоративных целей и не является частью содержания страницы. Что касается доступности, если атрибут alt ничего не содержит, то экранные дикторы проигнорируют изображение. Оставлять атрибут пустым в данном случае крайне рекомендуется, ведь что-нибудь вроде «Разделитель содержимого» будет только раздражать тех, кто слушает экранного диктора.

Элемент time


Возможно ли изобразить интервал дат с помощью одного элемента time?

Ответ


Нет, невозможно. Можно представить эту информацию используя два элемента time. Например, для того, чтобы представить временной интервал от 6-го ноября 2014 до 9-го ноября 2014 года, разработчик может написать:

<time datetime="2014-11-06">6</time>-
<time datetime="2014-11-09">9 November 2014</time>


meter и progress


В чем разница между элементами meter и progress?

Ответ


«Элемент meter призван представить скалярное измерение в пределах известного диапазона или дробное значение. Этот элемент не очень хорошо подходит для измерения чего-нибудь вроде температуры, потому что не имеет фиксированного диапазона. Тем не менее, meter может быть использован для описания занимаемой памяти жесткого диска.

Элемент progress используется для того, чтобы показать прогресс выполнения задачи. В отличии от элемента meter, прогресс, описываемый элементом progress, может быть и не определен. Например, вы могли бы этим элементом показать, что прогресс выполнения задачи имеется, но вы не сможете указать, когда задача будет выполнена.

Атрибут longdesc


Что такое атрибут longdesc? Можете ли вы объяснить его цель?

Ответ


Атрибут longdesc элемента img был и во времена HTML4, но и до сих пор считается валидным в HTML5. Этот атрибут был сделан для того, чтобы позволить более детально описывать изображения, нежели это позволяет сделать атрибут alt. Интересная вещь: вместо того, чтобы являть собой описание изображения (как это делает атрибут alt), longdesc указывает на гиперссылку, содержащую описание.

Ниже продемонстрирован пример использование атрибута longdesc:

<img src="italy.jpg"
     alt="This image represents the map of Italy" longdesc="italy.html#description">
 
<!-- other content here ... -->
 
<section id="description">
  <h2>Italy</h2>
  <p>The shown map of Italy illustrates its division 
  in regions...</p>
</section>


Элемент mark


Что такое элемент mark? Приведите пример использования этого элемента.

Ответ


Элемент mark подсвечивает текст. Распространённый пример использования — это подсвечивание ключевого слова или ключевых слов, которые ищет пользователь.

Заключение


В данной статье я рассмотрел десять вопросов для собеседования, которые вы можете использовать для тестирования на знание HTML. В следующем своем собеседовании вы можете использовать один или несколько из них.

Чтобы помочь вам изучить эти и другие смежные по теме семантики вопросы, я рекомендую прочитать некоторые из следующих статей SitePoint:


Если у вас есть интересные вопросы по HTML? Делитесь ими в комментариях, возможно, тем самым вы поможете другим разработчикам, когда они будут проходить своё собеседование.
Метки:
Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 42
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Полностью согласен, что сложновато. Это больше вопросы не на умение работать с html, а на знание специфических возможностей, которые в большинстве проектов совсем не уместны. На крайний случай в спецификации эти данные можно найти, а не в голове их таскать.
      Приходилось присутствовать на подобных собеседованиях в качестве слушателя — таких вопросов точно не было ни у кого.
    • +8
      Что то я никогда таких типичных вопросов не слышал на собеседованиях.
    • +23
      На какую должность вопросы-то такие? Верстальщик? Я бы не доверил что-то верстать человеку, вызубрившему спецификации HTML5 (а тут речь именно о заучивании оной, а не применении на практике). Одну половину верстки не поймут браузеры, другую — те, кому придется это поддерживать (если вдруг придется кому-то). На мой взгляд, слепо следовать спецификациям пока рано, и у кандидата надо проверять больше практические навыки. Ну и теоретические, с учетом специфики работы.
      • –7
        Думаю, вопросы на должность программиста HTML.
        • +1
          Server-side?
          • +2
            Что-то программирует? Браузеры?
            • –2
              Вот видео, где объясняется, почему за программистами HTML будущее.


              Так что думайте, спрос растет!
        • +8
          320y — невалидное значение. Если изменить y на w, то код будет валидным полностью.
          Серьёзно? Разнервничавшийся на собеседовании человек может и не заметить ошибку в этом месте. И это не будет говорить о том, что он плохой специалист.
          Атрибут alt является обязательным для тэга img
          По ссылке не увидел упоминания об обязательности атрибута. Да, валидаторы будут ругаться: «An img element must have an alt attribute, except under certain conditions» в случае его отсутствия, но не более.
          • +2
            так же, как и отсутствие "/" перед ">" в теге img почему-то посчитали валидным при этом
            • +2
              Потому что HTML5.
              • 0
                не, не потому. Это я малость сбился — тег IMG же одиночный (без закрывающего тега), потому и не ставится.
                • +1
                  Был бы XHTML, закрывающий слеш требовался бы. А HTML позволяет не заниматься подобным. Мне даже почему-то кажется, что с началом популярности пятой версии рекомендовалось закрывающий слеш в непарных тегах не использовать. Хотя спецификация говорит лишь о его необязательности в Void-элементах.
            • 0
              alt="" — это не для валидаторов, это из WIA-ARIA(для слепых, с их читалками), там это требуется.
            • 0
              Полчаса думал, думал, не могу въехать в это:
              Main title
              This is a subtitle
              This is the content of this section


              > параграф являестя содержимым элемента h2 вместо того, чтобы быть содержимым элемента h1, вне зависимости от того, планировалось ли так сделать. Если же было намерение создать подзаголовок, а p связать с h1, то данная разметка является неправильной.

              P ведь является cодержимым элемента article. И вообще не связан ни с одним из заголовков. Или я не прав?
              • +5
                Это магия семантической верстки. Которая, кажется, в таких деталях не волнует никого, кроме автора оригинального поста, его работодателей и адептов семантической верстки. Явление примерно из той же оперы, где важно прохождение валидации, а не правильное отображение верстки во всех требуемых браузерах.
                • 0
                  Семантика нужна для WIA-ARIA, для слепых, чтоб они могли осуществлять навигацию с их читалками.
                  Те если бы в статье не было упоминания про эту технологию, Вы были бы правы.
                  А тут история не про Россию и визуализацию, а про международные мегакорпарации, которым важно получить всех пользователей в том числе и слепых
                • 0
                  Это действительно невероятные дебри семантики.
                  Я сам никогда с такой проблемой не встречался, ни от кого никогда не слышал и вообще в этой статье увиде впервые.
                  Но коль там люди заботились созданием специального тэга, то вопрос семантики действительно всплывает. Там. Где-то. Наверное.
                • +14
                  Это хорошие вопросы для экзамена, а не для собеседования.
                  — Валидация разметки — srcset ещё сыроват для продакшена. Вопрос решается простейшим поиском.
                  — main практически не используется, да и новые теги вообще, особенно если нужна поддержка IE8.
                  — WAI-ARIA слишком зубодробительно для вопроса на собеседование. Ответит разве что тот, кто делал поддержку доступности, и то далеко не в таких подробностях.
                  — small — отличный вопрос на эрудицию, но опять же реального применения мало.
                  — alt уже всех задолбал.
                  — про time достаточно знать что он есть, поиском всё быстро уточняется по необходимости.
                  — зачем тут труп longdesc?
                  — meter и progress аналогичны time за тем исключением, что практически не используются. Кто может привести хоть пару примеров реального использования в жизни?
                  — mark хоть и небесполезный, но слишком специфичный элемент.
                  • +1
                    Плюсую.
                    Вопросы больше на задр**ство, чем на реальную практику верстки.
                    Знать наизусть все это неплохо, но не обязательно.
                    • 0
                      Ну про IE8 загнули.
                      Скажите, что section, article, nav не юзаете.
                      Тем более, что html5shiv решает проблему с новыми тэгами.
                      Да, надо опять что-то лишнее подключать, но можно и самому прописать создание этих тэгов, не так это и сложно.
                      • 0
                        Html5shiv работает только с включённым JS.
                        • 0
                          для таких случаев есть чистый css с display: block;
                      • 0
                        Это все про WAI-ARIA, и ничего другого тут не было.
                        Сам этим занимаюсь, это как раз все то что пришлось недавно изучать.
                        Там все по другому, там все на семантику и все на стандарты.
                        Например как раз история с main, сколько их можно на странице тоже тот еще вопрос.
                        • 0
                          — srcset обратно совместим.
                          — small я, например, часто применяю
                          — alt нормальный IDE вставляют сами. Пустой.
                          — использовал прогресс. Во-первых для собственно прогресса. Второй раз (видимо уместнее было метр) для отображения шкалы заполнения профиля
                        • +1
                          И всетаки считаю что на собеседовании лучше посмотреть портфолио человека, его код, какую верстку он делал, что использует и тд. — от этого толку больше будет чем от подобных вопросов. Ведь как говорилось выше, есть сторонники «валидации» а есть те, кому надо чтоб макет отображался правильно в браузерах, по этому надо искать компромисс.

                          Так что повторюсь, считаю что критерием, который может характеризировать верстальщика может быть его портфолио, качество разметки. (Микроформаты/микродата как бонусы например очень неплохи.)
                          • –4
                            хм, все это «теория» и это очень далеко от реальной жизни, от практики.
                            а на практике, особенно, где рулит БЭМ, все это, по большому счету, лишено смысла, т.к. все верстается на дивах :))))

                            на реальном собеседовании, я бы спрашивал по технике верстки нетривиальных GUI, а не пытался у человека выудить, где тут допущена синтаксическая ошибка. такие вещи решаются редактором кода, верстальщик же должен думать о другом…

                            • 0
                              Как по мне, так это уже вопросы из разряда «поболтать» или «вычесть внимательного эрудита», когда на все действительно стоящие вопросы ответы уже даны.
                              • +3
                                «БЭМ на дивах» верстают идиоты, которые ничего не поняли.
                                • –1
                                  вы слишком категоричны.
                                  а я прав, достаточно взглянуть на исходный код яндекса.
                                  или вы считаете создателей БЭМа тоже идиотами?

                                  это факты. я понимаю, это религия, сам такой был, но все течет, все меняется.
                              • 0
                                Следуя логике вопросов на HTML, вопросы джаваскриптеру надо задавать по этой страничке javascript.ru/ecma/part9
                                • 0
                                  Ну это перебор, я считаю.
                                  Хотя у нас на собеседовании задают некоторые каверзные вопросы по JS, но всё же о другом.
                                • 0
                                  Собеседовал и собеседовался по этой теме. Приведенные вопросы — на 90% бесполезный информационный шум.
                                  1. Зачем зубрить наизусть, какую бы то ни было спецификацию?
                                  2. В вопросах затрагиваются аспекты, которые крайне редко применяются, разве что кроме доступности.
                                  Действительно хорошие вопросы, имхо, были бы о значении доктайпа для рендеринга документа. Особенностях очистики float, и вообще про инлайновый контекст форматирования. Об отладке производительности отрисовки элементов.
                                  А тут просто наугад выбранные куски из доков.
                                  • +1
                                    Жесть-то какая.
                                    • 0
                                      Считаю, что проводить собеседование на знание HTML нужно, минимум, в совокупности со знаниями CSS, ведь в подавляющем большинстве случаев именно последний имеет решающую роль в верстке. Наверное, все таки лучше попросить соискателя самому что-то сверстать, а затем его экзаменовать.
                                      Что касается приведенных вами вопросов, то их, по-моему, лучше использовать для того, чтобы завалить собеседуемого в нужный момент. :)

                                      Хотелось уточнить по вот этой части вашего поста и далее:

                                      <article>
                                         <h1>Main title</h1>
                                         <h2>This is a subtitle</h2>
                                         <p>This is the content of this section</p>
                                      </article>
                                      

                                      Не могу сообразить, где реально на практике важно сохранение иерархии h1 > p, h2? Нигде не встречал такого. Может быть на поисковики как-то влияет?
                                      • +2
                                        Цель этих вопросов, услышать от собеседуемого: «А давайте погуглим!»?
                                        • 0
                                          Мда…
                                          Т.е. вопросов про код вроде:

                                          <ul>
                                             <li> item 1
                                             <li> <b> item <i> 2</b> ugly</i>
                                             </li> item 3
                                          </ul>
                                          


                                          не предполагается? И что они нафигачат с таким подходом?
                                          • 0
                                            Создаю сайты вообще и верстаю в частности уже лет 15. Ни на один вопрос не ответил. Пора на свалку?
                                            • 0
                                              Конечно нет.
                                              Но теперь вы знаете, что есть много вещей, которые можно подтянуть.
                                              Может быть где-то даже и использовать.
                                            • 0
                                              Офигеть какие «типичные» вопросы.
                                              • 0
                                                В заголовке пропущена буква а.

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.