Думаете, что знаете HTML? А что насчёт стандарта HTML5? Пожалуй, стоит проверить.
На форумах часто возникают дискуссии о том, что должен знать и уметь веб-разработчик. Профессионал делится тем, о чём по его мнению просто обязан знать любой, кто работает с HTML.
1. Валидация 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>
Всё в порядке? Если думаете, что нет, то можете объяснить, что именно не так?
Ответ
В разметке используется элемент изображения, новое дополнение к спецификации. 320y - это ошибка. Если y заменить на w, то всё заработает.
2. Элемент main
Попробуйте дать определение элемента main. В чём его суть? Согласованы ли две спецификации (WHATWG and W3C) в его определении?
Ответ
Определение термина элемента main зависит от того, какая спецификация имеется ввиду.
Спецификация W3C подразумевает, что это есть основное содержимое страницы, контент. В спецификации также указывается, что документ не должен содержать более одного основного элемента.
Спецификация WHATWG не присваивает основному элементу семантическое значение и определяет его как контейнер для основного содержимого другого элемента. Кроме того, согласно WHATWG, использовать основной элемент main можно неограниченное количество раз. Если на странице несколько элементов article то, в каждом можно использовать основной элемент.
3. Стандарт 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>. Улучшение доступности для систем, не поддерживающих HTML5 было достигнуто за счёт внесения элементов header, navigation, main, article, и contentinfo в элементы header, nav, main, article, и footer соответственно.
Другие изменения связаны с формой поиска. Сначала, форму поместили в элемент search. Затем был добавлен элемент label, чтобы задать контекст для поля input, а также атрибут for для связи с ним.
4. Элемент small
Объясните, когда уместно использование элемента small. Приведите примеры.
Ответ
Если в HTML 4.01 с помощью тега <small> выделяли текст с маленьким размером шрифта, то согласно стандарту HTML5, таким тегом нужно выделять дисклеймеры, оговорки и прочее. Кстати, при этом текст не обязательно должен быть маленьким.
Ниже приведён пример использования элемента:
<img src="image.jpg" alt="London by night"> <small>The copyright of this image is owned by Aurelio De Rosa</small>
5. Подзаголовки
Подзаголовки являются одним из наиболее используемых элементов на любом веб-сайте. Несколько лет назад был введен тег hgroup для выполнения этой функции, но с тех пор он был удален из спецификаций. Как вы считаете, почему hgroup был удален, и какие возможности для разметки подзаголовков есть на сегодняшний день?
Ответ
Элемент hgroup был введен для группирования нескольких элементов заголовков, избегая создания подуровней в иерархии. Пример ниже объясняет, почему он был введён.
<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, хотя возможно так и не было задумано. Поэтому, если целью было просто создать подзаголовок и связать текст с h1, изначальная разметка была неправильной.
Элемент hgroup был введен для решения этой проблемы. Но в апреле 2013 года из-за отсутствия вариантов использования его удалили, так что он недействителен.
Возможное решение для создания подзаголовков, чтобы абзац был связан с h1, показан ниже:
<article>
<h1>
Main title
<span>This is a subtitle</span>
</h1>
<p>This is the content of this section</p>
</article>
6. Изображения и доступность
Обязателен ли атрибут alt для элементов изображений? Если нет, то опишите варианты, когда можно оставить значение пустым. Пустое значение может повлиять на доступность?
Ответ
Атрибут alt обязателен для изображений, но его значение может быть пустым (к примеру — alt=""). Пустое значение допустимо, когда изображение используется только в декоративных целях и не является содержимым. Таким образом, программы для озвучивания содержимого на экране будут игнорировать такие изображения. Использовать alt настоятельно рекомендуется, по назначению, без значений вроде "разделитель блоков".
7. Элемент time
Реально ли представить диапазон дат с помощью одного элемента time?
Ответ
Нет, это невозможно. Но может быть выражена используя два элемента времени. Например, допустимо такое описание в коде диапазона с 6 по 9 ноября 2014 года:
<time datetime="2014-11-06">6</time>- <time datetime="2014-11-09">9 November 2014</time>
8. Элементы meter и progress
В чем разница между элементами meter и progress?
Ответ
Элемент meter представляет собой числовое (возможно дробное) значение в известном диапазоне. Этот элемент не подходит для измерения чего-то вроде температуры, поскольку она не имеет фиксированного диапазона. Однако meter может, к примеру, использоваться для отражения занятого места на жестком диске.
Элемент progress используется для отображения хода выполнения задачи. В отличие от элемента meter, прогресс, описанный в progress, может быть неокончательным. Например, можно написать, что задание выполняется, но неизвестно, когда задача будет выполнена до конца.
9. Атрибут longdesc
Что такое атрибут longdesc и какова его цель?
Ответ
Атрибут longdesc элемента img существует со времён HTML 4 и также действителен в HTML5. Этот атрибут предназначен для предоставления более подробной информации об изображении, по сравнению с информацией, предлагаемой в атрибуте alt. Интересно что, в отличие от alt, longdesc содержит не текст, а ссылку, содержащую описание.
Пример использования longdesc представлен ниже:
<img src="italy.jpg"
alt="This image represents the map of Italy" longdesc="italy.html#description">
<!-- другой контент здесь -->
<section id="description">
<h2>Italy</h2>
<p>The shown map of Italy illustrates its division
in regions...</p>
</section>
10. Элемент mark
Что это за элемент? Можете привести пример его применения?
Ответ
Элемент mark представляет собой выделенный текст. Обычно используется для того, чтобы выделить ключевые слова и те, по которым пользователь осуществлял поиск.
Заключение
В этой статье профессиональный разработчик рассказал о десяти вопросах, которые почти наверняка встретятся вам на собеседовании на позицию, близко связанную с HTML.
Рекомендуем изучить ссылки в тексте на документацию, а также ещё несколько статей для дальнейшего саморазвития:
Комментарии