Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Элемент hgroup

.

Элемент hgroup

Как вы заметили, мы добавили три новых элемента к нашей разметке: заголовок (title) веб-сайта, помещенный в контейнер, подзаголовок в контейнере <h2>; а также новый элемент hgroup, в который мы «оборачиваем» предыдущие два.

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

Элемент hgroup

В результате получится то, что вы видите на рис. 3.2.

Элемент hgroup

Рис. 3.2. Подзаголовок создает нежелательный узел в структуре документа

Элемент h2 создает новый раздел: весь нижеследующий контент логически относится к подразделу, созданному подзаголовком, — и это совсем не то, чего нам хотелось бы. Более того, если у нас будут дополнительные заголовки, например, для статей, в которых тоже используется контейнер п2, они иерархически окажутся на одном уровне с подзаголовком; это также неправильно (рис. 3.3).

Элемент hgroup

Рис. 3.3. Другие заголовки ошибочно сгруппированы с подзаголовком страницы

Ну, мы же можем разметить нижележащие заголовки при помощи тегов h3, верно? Это, однако, приводит к другим проблемам в структуре документа. Заголовки в контейнерах <h3> оказываются в иерархии наследниками подзаголовка документа.

Элемент hgroup

Рис. 3.4. Использование вложенных заголовков других уровней не способно решить проблему

Это также нежелательно; мы хотим, чтобы новые заголовки начинали подразделы основного документа, заголовок которого имеет первый уровень.

А что если разметить подзаголовок страницы при помощи элементов р или span?

Элемент hgroup

Нам удалось избежать появления в схеме документа лишнего ответвления, но за это мы расплачиваемся потерями в семантике. Неверно будет думать, что атрибут id помогает определить семантическое значение элемента путем использования слова tagline. Но на самом деле браузер не может использовать id, чтобы вывести значение рассматриваемого элемента; он ничего не добавляет к семантике.

Здесь-то на выручку и приходит элемент hgroup. Он сообщает пользовательскому агенту, что заголовок первого уровня имеет сложную форму (заголовочная группа-heading group — как в приведенном примере). Это позволяет нам избежать разрушения семантической структуры документа и использования несемантических элементов на странице.

Поэтому всегда, когда вы хотите включить в документ подзаголовок страницы, но так, чтобы он не влиял на семантическую структуру документа, заключите его вместе с заголовком в контейнер hgroup; так проблема будет решена без использования «кривых» методов.

На рисунке 3.5 показана структура заголовка, полученная с использованием контейнера hgroup.

Элемент hgroup

Рис. 3.5. hgroup спешит на помощь

Так намного лучше!


.

Читайте так же:
Not found