10 вопросов, на которые должен ответить каждый, кто знает HTML

1
12960

Думаете, что знаете HTML? А что насчёт стандарта HTML5? Пожалуй, стоит проверить.

На форумах часто возникают дискуссии о том, что должен знать и уметь веб-разработчик. Профессионал делится тем, о чём по его мнению просто обязан знать любой, кто работает с HTML.

частые вопросы

1. Валидация HTML кода

Посмотрите на код ниже:

Всё в порядке? Если думаете, что нет, то можете объяснить, что именно не так?

Ответ

В разметке используется элемент изображения, новое дополнение к спецификации. 320y — это ошибка. Если y заменить на w, то всё заработает.

2. Элемент main

Попробуйте дать определение элемента main. В чём его суть? Согласованы ли две спецификации (WHATWG and W3C) в его определении?

Ответ

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

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

Спецификация WHATWG не присваивает основному элементу семантическое значение и определяет его как контейнер для основного содержимого другого элемента. Кроме того, согласно WHATWG, использовать основной элемент main можно неограниченное количество раз. Если на странице несколько элементов article то, в каждом можно использовать основной элемент.

3. Стандарт WAI-ARIA

Рассмотрим следующий фрагмент кода:

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

Ответ

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

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

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

4. Элемент small

Объясните, когда уместно использование элемента small. Приведите примеры.

Ответ

Если в HTML 4.01 с помощью тега <small> выделяли текст с маленьким размером шрифта, то согласно стандарту HTML5, таким тегом нужно выделять дисклеймеры, оговорки и прочее. Кстати, при этом текст не обязательно должен быть маленьким.

Ниже приведён пример использования элемента:

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

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

Ответ

Элемент hgroup был введен для группирования нескольких элементов заголовков, избегая создания подуровней в иерархии. Пример ниже объясняет, почему он был введён.

Получается вот такая иерархия:

Как видим, здесь содержимое абзаца рассматривается как содержимое h2 вместо h1, хотя возможно так и не было задумано. Поэтому, если целью было просто создать подзаголовок и связать текст с h1, изначальная разметка была неправильной.

Элемент hgroup был введен для решения этой проблемы. Но в апреле 2013 года из-за отсутствия вариантов использования его удалили, так что он недействителен.

Возможное решение для создания подзаголовков, чтобы абзац был связан с h1, показан ниже:

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

Обязателен ли атрибут alt для элементов изображений? Если нет, то опишите варианты, когда можно оставить значение пустым. Пустое значение может повлиять на доступность?

Ответ

Атрибут alt обязателен для изображений, но его значение может быть пустым (к примеру — alt=»»). Пустое значение допустимо, когда изображение используется только в декоративных целях и не является содержимым. Таким образом, программы для озвучивания содержимого на экране будут игнорировать такие изображения. Использовать alt настоятельно рекомендуется, по назначению, без значений вроде «разделитель блоков».

7. Элемент time

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

Ответ

Нет, это невозможно. Но может быть выражена используя два элемента времени. Например, допустимо такое описание в коде диапазона с 6 по 9 ноября 2014 года:

8. Элементы meter и progress

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

Ответ

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

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

9. Атрибут longdesc

Что такое атрибут longdesc и какова его цель?

Ответ

Атрибут longdesc элемента img существует со времён HTML 4 и также действителен в HTML5. Этот атрибут предназначен для предоставления более подробной информации об изображении, по сравнению с информацией, предлагаемой в атрибуте alt. Интересно что, в отличие от alt, longdesc содержит не текст, а ссылку, содержащую описание.

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

10. Элемент mark

Что это за элемент? Можете привести пример его применения?

Ответ

Элемент mark представляет собой выделенный текст. Обычно используется для того, чтобы выделить ключевые слова и те, по которым пользователь осуществлял поиск.

Заключение

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

Рекомендуем изучить ссылки в тексте на документацию, а также ещё несколько статей для дальнейшего саморазвития: