Не забывайте о «маленьких парнях» из HTML5

Если вы были в курсе новейших веб-технологий, вы, вероятно, начали внедрять некоторые HTML5-достоинства в свои веб-страницы и веб-приложения.

Возможно, вы начали использовать упрощенные методы для объявления типа документа и кодировки символов. Возможно, вы начали пропускать "type=text/javascript" или "type=text/css" при вставке скриптов и связанных таблиц стилей. Возможно, вы начали создавать макеты с новыми семантическими элементами, такими как <section> , <article> , <header> , <footer> и <nav> .

Но вы забыли о «маленьких парнях» в HTML5? Теперь HTML5 включает в себя ряд новых элементов, которые, вероятно, не привлекают к себе большого внимания, поэтому я подумал, что суммирую три из этих менее используемых элементов. Я также упомяну несколько способов, которыми они могут быть использованы в ваших проектах, чтобы вы могли увидеть их ценность чуть более четко.

Элемент <hgroup>

Элемент <hgroup> представляет собой интересный маленький слепок, который кажется побочным продуктом более крупных элементов <section> и <article> . С введением этих новых структурных элементов различные разделы веб-страниц теперь могут быть более переносимыми и синдицируемыми, а отдельные разделы могут содержать заголовок верхнего уровня ( <h1> ).

Вот где приходит <hgroup> . В некоторых случаях вы не хотите, чтобы подзаголовок создавал <hgroup> в дереве документа — например, если основной заголовок ( <h1> ) имеет слоган ( <h2> ) связано с этим. Хотя вы можете поместить этот слоган в общий <span> или <div> , это не идеально.

Элемент <hgroup> позволяет вам обернуть весь заголовок и слоган, чтобы они служили единым основным блоком заголовка в дереве документа без ущерба для семантической ценности. Вот как типичный пример может выглядеть в контексте:

 <hgroup> <h1>Main Heading</h1> <h2>Tagline below the main heading</h2> </hgroup> <h2>Subheading</h2> <p>Content here...</p> <h2>Another Subheading</h2> <p>More Content here...</p> 

И следующая схема документа может выглядеть так:

1. Главный заголовок
   1. подрубрика
   2. Другой подзаголовок

Из-за <hgroup> , слоган не включен в схему документа, и это именно то, что мы хотим в этом случае.

Хотя наиболее практичным является использование <hgroup> для слоганов, вы также можете использовать его для группировки метаданных или другого вспомогательного текста, содержимое которого вы не хотите отображать в дереве документа.

Элемент <aside>

Элемент <aside> зарезервирован для обертки касательного содержимого. Хотя он может быть использован для хранения типичной боковой панели, как в блоге, его значение и название не предназначены для обозначения физической позиции содержимого. Он может быть на «стороне» страницы, но также может быть где-то посередине или внизу.

<aside> должен использоваться для переноса раздела контента, который имеет некоторое отношение к большому целому, в котором он появляется, но не является самостоятельным переносимым фрагментом контента.

Таким образом, вы можете использовать в стороне глоссарий терминов, биографию автора, поле «Знаете ли вы?», Аннотацию, цитату или даже рекламу, связанную с основным контентом, с которым она связана.

Элемент <mark>

Наконец, у нас есть элемент <mark> . Как поясняется в спецификации, элемент <mark> «указывает на часть документа, которая была выделена из-за ее вероятной релевантности текущей деятельности пользователя». Это делает этот конкретный тег интересным из-за его зависимости от поведения пользователя.

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

Брюс Лоусон, соавтор книги « Представление HTML5» , довольно эффективно использует этот тег в своих сообщениях в блоге, когда они обнаруживаются через Google. Чтобы увидеть его в действии, перейдите в Google и введите фразу, которая будет отображать его сайт в результатах (вы можете попробовать это ). Когда вы нажимаете на страницу, искомая фраза выделяется с помощью JavaScript, который вставляет элементы <mark> на лету, как показано на снимке экрана ниже:

Похоже, что существует не так много разных вариантов использования <mark> вне результатов поиска. Но даже в этой области <mark> можно творчески использовать, когда пользователь взаимодействует с вашим веб-контентом, и в зависимости от того, как он нашел ваши страницы. Таким образом, вы можете использовать как серверную, так и клиентскую технологии для выделения битов контента с помощью <mark> , где это уместно.

В заключение

Итак, извлеченный урок: не забывайте о «маленьких парнях». Хотя более крупные структурные элементы привлекают к себе немного внимания, есть некоторые ценные менее используемые элементы HTML5, которые мы можем включить в наши страницы, чтобы помочь улучшить семантика и структура наших веб-страниц.