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

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

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

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

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

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

Задаем структуру HTML5 Herald

.

Задаем структуру HTML5 Herald

Теперь, когда мы изучили основы структуры страниц и новые элементы HTML5, которые нам понадобятся, самое время собрать воедино части страницы, куда мы поместим контент.

Начнем сверху, с элемента header. Есть ощущение, что именно здесь нужно поместить логотип и название газеты, а заодно строку с датой. Мы можем также добавить элемент nav для навигации по сайту.

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

Если каждая колонка содержит отдельный «раздел» (например, раздел «спорт» или развлекательную рубрику), тогда в этом есть смысл. Но если это чисто дизайнерское решение, то лучше поместить каждую колонку В обычный старый div.

Внутри каждого div’a будут газетные статьи; само собой, это наилучшие кандидаты для помещения внутрь контейнеров article.

Самая правая колонка, однако, содержит три рекламных баннера впридачу к статье.

Мы будем использовать элемент aside, чтобы обернуть эти объявления, каждое из которых само по себе будет в контейнере article. Если вам показалось это странным, отсылаем вас к определению элемента article: «самодостаточная часть контента <…> документа, которая может существовать и распространяться независимо от него». Рекламное объявление практически точно соответствует определению, поскольку может воспроизводиться на большом числе сайтов практически без изменений.

Наконец, в контейнер article мы поместим финальную статью, следующую за баннерами. Эта статья не должна быть внутри элемента aside, объединяющего рекламные объявления. Чтобы оказаться в этом контейнере, материал должен иметь лишь косвенное отношение к теме страницы.

Наша статья вполне соответствует тематике газеты, поэтому ошибкой было бы поместить ее в контейнер aside.

Теперь третья колонка состоит из двух элементов: aside и article, помещенных один над другим. Чтобы держать их вместе и облегчить стилизацию, обернем их в контейнер div. Мы не используем section или любую другую семантическую разметку, потому что это означало бы, что статья и баннеры тематически связаны. На самом же деле они оказались в одной колонке лишь из-за того, что так придумал дизайнер.

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

Информация об авторе составляет один раздел (у каждого автора по разделу). Еще один раздел содержит информацию об авторских правах и прочем.

Давайте добавим к нашей странице новые элементы и посмотрим, что получится:

Задаем структуру HTML5 Herald

На рис. 2.2 показана наша страница; метками отмечены структурные блоки.

Задаем структуру HTML5 Herald

Рис. 2.2. The HTML5 Herald, broken into structural HTML5 elements

Теперь у нас есть структура, где будет помещен наш контент.


.

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