Аурэлио Де Роза несколько дней назад выпустил, на мой взгляд, очень привлекательную статью, которой я хочу с вами поделиться на тот случай, если у вас плохо с английским.
Несколько недель назад на 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 © 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 © 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:
- 5 Obsolete Features in HTML5
- A Guide to the HTML5 ‘time’ Element
- 20 HTML Elements for Better Text Semantics
- Replacing Radio Buttons Without Replacing Radio Buttons
- Everything You Need to Know About HTML’s ‘pre’ Element
Если у вас есть интересные вопросы по HTML? Делитесь ими в комментариях, возможно, тем самым вы поможете другим разработчикам, когда они будут проходить своё собеседование.
Автор: rayproud
