Структурирование и группирование материалов веб-страниц

Структурирование материалов

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

Для структурирования материалов веб-страниц подобным образом спецификация HTML5 предлагает разбивать их на секции с помощью специальных тегов: <article>, <section>, <nav> и <aside>.

Тег <article> (статья) – служит для разграничения самостоятельного материала внутри страницы, который в принципе может распространяться и использоваться независимо. Это может быть статья в журнале или газете, запись в блоге, сообщение на форуме, комментарий пользователя или даже интерактивный виджет.

Тег <section> (т. е. секция) – размечает обычный раздел в документе, не являющийся статьей.

Тег <nav> (от англ. navigation, навигация) – это элемент для главных навигационных разделов документа, таких как главное меню сайта и вторичное меню со ссылками на разделы текущей страницы.

Наконец, тег <aside> (т.е. побочный материал) служит для разграничения материала, косвенно связанного с темой страницы. Его часто используют для организации правой колонки и размещения в ней рекламы, дополнительных блоков и прочей второстепенной информации.

Тег <body>, содержащий всю видимую часть страницы, также относится к тегам, формирующим секции. В предыдущем уроке мы как раз рассматривали простейший документ, состоящий из одной единственной секции, озаглавленной тегом <h1>.

Секции, создаваемые тегами <article>, <section>, <nav> и <aside>, могут быть вложенными и их может быть на странице несколько. Главное, чтобы они выполняли свою основную задачу — структурировали материалы по смыслу. В этом им помогают теги заголовков <h1>...<h6>, которые задают названия секций, а также новые для нас теги <header> и <footer>.

Тег <header> (в переводе с англ. заголовок) служит для обозначения вводного материала внутри секции, а <footer> (т. е. низ), соответственно, размечает заключительную часть секции. Эти теги чаще всего размещают в главной секции веб-страницы, т. е. теге <body>, и создают с их помощью «шапку» и «подвал» сайта. С помощью тегов <header> и <footer> можно также обозначить вводную и заключительную части статьи в теге <article> или в любой другой секции.

Группирование материалов

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

Следующий тег — <hr>. Пустой элемент. Данный элемент размечает некий тематический разрыв в повествовании, например, смену акта в пьесе или переход к другой теме внутри раздела. Причем нет необходимости применять тег <hr> между разделами.

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

Для выделения длинных цитат и цитирования материалов из другого источника в HTML5 используется тег <blockquote>. Атрибут cite данного тега указывает источник оригинала.

Нумерованные списки создаются с помощью тега <ol> (от англ. ordered list). Данный тег должен содержать как минимум один элемент списка, т. е. тег <li> (от англ. list item). По-умолчанию пункты списка выводятся пронумерованными арабскими цифрами, начиная с единицы. Изменить номер начального пункта списка можно с помощью атрибута start тега <ol>. Атрибут type тега <ol> позволяет устанавливать следующие типы нумерации списка:

  • type="1" — арабские цифры
  • type="a" — маленькие латинские буквы
  • type="A" — большие латинские буквы
  • type="i" — маленькие римские цифры
  • type="I" — большие римские цифры

Атрибут reversed тега <ol> позволяет изменить порядок нумерации на обратный. Это булевый или логический атрибут и поэтому он выводится без указания значения.

Ненумерованные списки выводятся с помощью тега <ul> (от англ. unordered list). Пункты таких списков также как и пункты нумерованных списков создаются с помощью вложенных тегов <li>.

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

Для группировки материала, который вообще не имеет особого значения используется тег <div>. Спецификация HTML5 предлагает веб-разработчикам применять этот тег в последнюю очередь, только когда никакой другой смысловой тег не подходит.

Основной материал страницы размещается в теге <main>. Данный тег включает те материалы страницы, которые отражают ее суть, и не включает повторяющиеся на разных страницах сайта элементы навигации, логотипа и баннеров, поисковых форм, элементов копирайт и т. п.

Структурирование и группирование материалов на странице осуществляется с помощью тегов <article> (статья), <section> (секция), <nav> (навигация), <aside> (побочный материал), <header> ("шапка"), <footer> ("подвал"), <p> (абзац), <hr> (разрыв), <pre> (форматированный текст), <blockquote> (длинные цитаты), <ol> (нумерованный список), <ul> (ненумерованный список), <figure> (иллюстрации и диаграммы), <div> (разделы), <main> (основной материал).

Уроки курса