1. Валидация html разметки
Рассмотрим следующий код:
[html]<figure>
<picture>
<source media="(min-width: 40em)"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
<img src="medium.jpg" alt="Москва ночью">
</picture>
<figcaption>Панорама ночной Москвы</figcaption>
</figure>[/html]
Можно ли считать его валидным? Если нет — объясните почему?
Ответ
В коде используется элемент picture, относительно недавно появившийся в спецификации. Код валидный, за исключением последнего параметра изображения в атрибуте srcset: 320y не является валидным значением. Если y заменить на w, код пройдет проверку на валидность.
2. Элемент main
Можете ли вы дать определение элемента main? В чем заключается его назначение? Совпадают ли в определении этого элемента спецификации WHATWG и W3C?
Ответ
Определение элемента main зависит от используемой спецификации.
Спецификация W3C описывает его как главный элемент на странице, содержащий основную информацию, статью или основной функционал приложения. Спецификация, так же, определяет, что документ не должен содержать больше одного элемента main.
Спецификация WHATWG не придает особого значения элементу main и описывает его как контейнер для основного содержимого. В тоже время, WHATWG не ограничивает количество элементов main в одном документе. То есть, при наличии нескольких статей на одной странице, содержимое каждой статьи может быть обрамлено отдельным контейнером main.
3. WAI-ARIA
Рассмотрите следующий код:
[html]<header>
<h1>Основной заголовок</h1>
<form action="/" method="get">
<input type="search">
<input type="submit">
</form>
</header>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/products">Товары</a></li>
<li><a href="/about">О нас</a></li>
</ul>
<main>
<article>
<h1>Заголовок статьи</h1>
<p>Содержимое статьи</p>
</article>
</main>
<footer>
<small>Copyright &copy; nix-tips.ru 2014</small>
</footer>[/html]
Можете ли вы улучшить его используя роли WAI-ARIA, где возможно?
Ответ
Код может быть улучшен следующим образом:
[html]<header role="header">
<h1>Основной заголово</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="/">Главная</a></li>
<li><a href="/products">Товары</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>
<main role="main">
<article role="article">
<h1>Заголовок статьи</h1>
<p>Содержимое статьи</p>
</article>
</main>
<footer role="contentinfo">
<small>Copyright &copy; nix-tips.ru 2014</small>
</footer>[/html]
Основной список навигационных ссылок был обернут элементом nav. Для улучшения совместимости со старыми технологиями, элементам header, navigation, main, article, и contentinfo были добавлены роли header, navigation, main, article, и contentinfo, соответственно.
Еще одно улучшение коснулось формы поиска. Во-первых, форме добавлена роль search. Очевидно, что элемент label принадлежит полю input, и он был явно ассоциирован с ним атрибутом for.
4. Элемент small
Опишите, в каких случаях возможно использовать элемент small и приведите пример.
Ответ
В спецификации html 4.01, элемент small был элементом, описывающим мелкий текст. В html5, этот элемент должен использоваться по его логическому назначению — для второстепенного текста, имеющего меньшее значение, чем основной, например предостережения или лицензионная информация. Текст может быть мелким, но это не обязательно.
Пример использования элемента small:
[html]<img src="image.jpg" alt="Москва ночью">
<small>Права на данное изображение принадлежат nix-tips.ru</small>[/html]
5. Подзаголовки
Подзаголовки — одни из основных элементов на любом веб-сайте. Несколько лет назад был создан тег hgroup, но в данный момент он исключен из спецификации. Можете ли вы объяснить, почему hgroup был удален и как сейчас использовать подзаголовки в разметке?
Ответ
Элемент hgruop был создан для группировки нескольких элементов подзаголовка (h1—h6) во избежание создания лишней иерархии элементов. Для лучшего восприятия, давайте рассмотрим следующий код:
[html]<article>
<h1>Заголовок</h1>
<h2>Подзаголовок</h2>
<p>Содержимое</p>
</article>[/html]
Иерархия документа будет выглядеть следующим образом:
[html]h1
|
—h2
|
p[/html]
Эта простая схема наглядно показывает, что содержимое параграфа будет частью блока h2, а не h1, хотим мы этого или нет.
Так что, hgroup был создан с намерением упростить создание подзаголовков и ассоциировать p с h1.
Однако в апреле 2013 года этот элемент был исключен из спецификации html5.
Возможное решение для создания подзаголовка:
[html]<article>
<h1>
Заголовок
<span>Подзаголовок</span>
</h1>
<p>Содержимое</p>
</article>[/html]
6. Изображения
Обязателен ли атрибут alt элемента img? Можете ли вы привести случаи, когда alt может быть пустым значением?
Ответ
Атрибут alt является обязательным для элемента img, но он может принимать пустое значение (т.е. alt=»»). Пустое значение рекомендовано когда изображение используется только для украшения и не несет никакой смысловой нагрузки, то есть не является частью содержимого. В части доступности содержимого, если атрибут alt пуст, программы для озвучивания содержимого, вроде экранного диктора, будут пропускать данное изображение. Такой подход очень рекомендован, так как значение, вроде «разделитель текста» только отвлечет слушателя от основного содержимого.
7. Элемент time
Возможно ли выразить диапазон дат используя один элемент time?
Ответ
Нет, не возможно. Диапазон можно выразить только с помощью двух элементов time.
Пример. Для отображения интервала от 18 декабря 2014 года до 31 декабря 2014 года, можно написать следующий код:
[html]<time datetime="2014-12-18">18</time>-
<time datetime="2014-12-31">31 декабря 2014</time>[/html]
8. meter и progress
В чем заключается отличие между элементами meter и progress?
Ответ
Элемент meter предназначен для отображения значения определенной заданной величины, например температуры. Также, meter подойдет для отображения характеристик системы, таких как объем занятого места на жестком диске.
Элемент progress должен отображать прогресс выполнения определенной задачи или набора задач. В отличии от meter, значение элемента progress может быть не определено. Например, задание выполняется, но не ясно, когда оно закончится.
9. Атрибут longdesc
Для чего нужен атрибут longdesc?
Ответ
Атрибут longdesk элемента img был добавлен еще в html4 и все еще валиден в html5. Этот атрибут создан для размещения более подробной информации об изображении, чем alt. Главное отличие от атрибута alt в том, что longdesk содержит не текстовое описание, а гиперссылку на описание.
Пример использования атрибута longdesc:
[html]<img src="italy.jpg"
alt="На изображении представлена карта Москвы" longdesc="moscow.html#description">
<!— другое содержимое … —>
<section id="description">
<h2>Москва</h2>
<p>На карте Москвы вы можете увидеть 12 административных округов…</p>
</section>[/html]
10. Элемент mark
Для чего нужен элемент mark? Можете ли вы привести пример его применения?
Ответ
Элемент mark позволяет выделить нужный текст цветом. Обычно используется для подсветки всех вхождений ключевого слова или слов, которые пользователь ищет.
Заключение
В этой статье рассмотрены всего лишь десять вопросов из тех, что вам могут задать на собеседовании для проверки знания html. Надеюсь, что кого-нибудь эта статья подтолкнет к углубленному изучению html5.