Элемент aside


Содержание
Илон Маск рекомендует:  Градиентные кнопки в Safari

Тег aside и section в HTML5

Применение тега

Этот элемент возможно использовать для создания одного или нескольких разделов документа, которые могут вмещать в себя шапку, подвал. В отличие от тега article элемент section не предназначен к многократному использованию на сайте. Он помогает разделять страницу на тематические области или какую либо статью на разделы.

Чтобы получше познакомиться с элементами aside и section предлагаю рассмотреть простенький пример:

В результате получится следующее:

Из примера видно, что самый нижний текст в article относится именно к основному контенту, а не к разделам статьи. Хотя сами разделы статьи (section) имеют непосредственное отношение к основному тексту. Также возможен и другой вариант его использования.

Например, у вас основной контент имеет разную тематику и разделен на 2 и более блоков, причем каждый блок имеет свои разделы и т.п. В таком случае можно размещать элементы article в тегах section. А делается это очень просто:

В результате вы должны получить следующее:

Потренируйтесь на досуге использовать эти элементы уверен вам понравится. После можете переходить к следующему уроку.

Все права на сайт принадлежат Александру Побединскому.

Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

Тег as >

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

  • Пунктиром выделен особый тег .
  • Синей рамкой выделяются поточные теги, которыми обычно размечают крупные структурные блоки страниц, например .
  • Фиолетовой рамкой выделяются теги для создания смысловых разделов, например .
  • Оранжевой рамкой выделяются заголовочные теги, например

.
Розовой рамкой выделяются поточные теги, которыми обычно размечают непосредственно текстовые элементы, например

Конечно, в спецификации больше типов, но мы не стали оформлять все, а ограничились только теми тегами, которые понадобятся нам в прототипе.

Как использовать секционные элементы HTML5

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.

HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент
Вы можете вкладывать элементы
В этом примере мы использовали элемент
Здесь мы использовали элемент
Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента
В этом примере мы использовали элемент
В этом примере элемент
Так же как
Этот элемент часто используется внутри элемента

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

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

Можно, например, типичную запись:

Самый сайт

переписать по-новому так:

Самый сайт

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок или картинок , например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:

header, footer, nav, article

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.


Тэг nav

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

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

Самый сайт

Здесь описание Самого сайта

UPD 24.02.2020: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

Тэг main

main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.

Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.

В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!

Тэг main не является структурным тэгом и никак не влияет на разметку страницы!

Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.

И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

Семантическая структура для HTML5 страницы

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

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные


Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

Контент на странице

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

Оформление статьи

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

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

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

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

Подвал сайта оформляется тегом

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

Семантические элементы HTML5

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

Один элемент в особенности — скромный

Форматирование страниц с применением элемента

Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент


Что такое семантические элементы?

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

В браузере эта разметка отображается как обычный текст «Регистрация начнется 2012-11-25».

Здесь важно понимать то обстоятельство, что элемент не обладает никакими встроенными возможностями форматирования. По сути, ничто не говорит устройству для чтения веб-страниц о том, что дата в коде страницы заключена в дополнительный элемент. Хотя к элементу можно добавить дополнительное форматирование с помощью таблицы стилей, по умолчанию он ничем не отличается от обычного текста.

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

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

Все семантические элементы имеют одну общую отличительную особенность: они по существу ничего не делают. В противоположность, элемент , например, вставляет в веб-страницу полноценный видеоплеер. Зачем же тогда утруждать себя использованием набора новых элементов, которые никак не изменяют внешний вид веб-страницы? Этому есть несколько хороших причин:

Более удобное редактирование и сопровождение . Разметка традиционной HTML-страницы может быть трудной для понимания. Чтобы понять общую структуру и значение отдельных блоков страницы, часто приходится исследовать ее таблицу стилей. А использование семантических элементов HTML5 позволяет разработчику предоставить в разметке страницы дополнительную информацию о ее структуре. Это облегчит вам жизнь, когда потребуется редактировать эту страницу через несколько месяцев, и будет еще более кстати, если вашу работу придется редактировать кому-то другому.

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

Оптимизация поисковых движков . Поисковые движки наподобие Google или Yandex используют мощные поисковые роботы — автоматизированные программы, которые методически обходят Интернет и просматривают все страницы, которые они могут найти — для сканирования содержимого веб-страниц и составления для них указателей в своих поисковых базах данных.

Чем лучше Google понимает вашу веб-страницу, тем больше шансов, что он сможет сопоставить ее содержимое с поисковым запросом, и тем больше шансов, что ваша веб-страница будет отображена в результатах чьего-либо поиска. В настоящее время поисковые роботы уже проверяют на наличие некоторых семантических элементов HTML5, чтобы собрать всю возможную информацию об индексирующих их веб-страницах.

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

Модифицирование традиционной HTML-страницы

Легче всего начать знакомство с новыми семантическими элементами, а также обучаться их применению для структурирования страницы на классическом HTML-документе и вставить в него некоторые облагораживающие элементы HTML5. На рисунке ниже показан первый пример, который вы можете попробовать реализовать:

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

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

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

В следующем листинге приводится сокращенная версия разметки:

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

В данном случае перед таблицей стилей стоит легкая задача форматирования. Для всей страницы установлена максимальная ширина в 1000 пикселов, чтобы текст не отображался длинными строками на широкоформатных мониторах. Верхний колонтитул помешен в блок синего цвета, содержимое отцентрировано:

Структурирование страницы с помощью HTML5

Чтобы исправить такую ситуацию, в HTML5 некоторые элементы

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

Соответственно изменятся и селекторы стилей CSS:

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

Обратите внимание на блок

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

Конечная структура страницы показана на рисунке:

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

В предыдущем примере мы удачно применили элемент . Но кроме этого элемента в HTML5 добавлен еще один элемент для работы с заголовками: . Официальные правила его применения следующие.

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

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

Увесистый верхний колонтитул, т.е. включающий кроме заголовка еще какое-то содержимое (например, краткое содержание статьи, дату публикации, имя автора, изображение или ссылки на подтемы), можно обернуть в элемент :


Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента подзаголовок обозначен элементом

С первого взгляда такая разметка может показаться потенциально сбивающей с толку. С точки зрения структуры она могла бы подразумевать, что все последующее содержимое является частью подраздела, который начинается с заголовка второго уровня, что не имеет особого смысла. В конце концов, кому нужна статья, состоящая целиком из одного большого подраздела? И даже если такая структура не влияет на отображение страницы в браузере, она меняет принцип создания схемы документа браузерами и другими инструментами.

К счастью, эта проблема решается автоматически элементом . В структурном аспекте он обращает внимание только на заголовки верхнего уровня (в данном случае это

). Другие заголовки отображаются в браузере, но они не включаются в схему документа. Такое поведение вполне логично, т. к. эти заголовки предназначены для обозначения подзаголовков, а не подразделов.

Вставка рисунков с помощью элемента

Многие веб-страницы оформляются изображениями. Но концепт рисунка несколько иной, чем изображения. Спецификация HTML5 советует рассматривать рисунки во многом подобно рисункам в книге, иными словами, изображение, отдельное от текста, но на которое в тексте делаются ссылки.

В общем, рисунки размещаются как плавающие объекты, т.е. их вставляют в первое удобное место в тексте, вместо того чтобы закреплять возле конкретного слова или элемента. Часто рисунки снабжены подписями, которые плавают вместе с ними.

В следующем листинге показан пример разметки HTML, которая добавляет рисунок к статье с помощью стандартного синтаксиса:

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

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

Добавление боковой панели с помощью элемента

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

Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента

В этот раз таблица стилей врезает плавающую цитату справа:

Создание навигационных ссылок с помощью элемента

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

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

Создание разворачиваемых блоков с помощью элементов и

Несомненно, вы часто видели на веб-сайтах разворачиваемые блоки, разделы содержимого, которые можно показать или скрыть, щелкнув на заголовке. Создание разворачиваемого блока является одним из самых легких трюков веб-дизайна, который можно провернуть с помощью базового сценария JavaScript. Нужно просто отреагировать на щелчок по заголовку и изменить параметры стиля, чтобы скрыть блок.

В этом отношении представляет интерес то обстоятельство, что HTML5 добавляет два семантических элемента, предназначенных для автоматизации этого поведения. Идея заключается в том, что разворачиваемый блок вставляется в элемент , а заголовок блока — в элемент . Получим разметку наподобие следующей:

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

Отношение веб-разработчиков к элементам и несколько противоречивое. Многие из них считают, что эти элементы не совсем семантические, т.е. они имеют дело больше со стилем, чем с логической структурой.

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

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Aside HTML5

Тег aside в языке HTML5

Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта.

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

Сайдбар можно расположить не только сбоку, но и внизу над подвалом страницы.

Тег as >блочный элемент .
Семантика — используется для обозначения сопутствующей информации основной статьи страницы сайта, но при этом не являющейся частью основной статьи.

Структура страницы HTML5

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


Если вы посмотрите на сайт « HTML5 Herald », то увидите, что он разделен следующим образом:

  • шапка сайта с логотипом и заголовком;
  • панель навигации;
  • содержимое тела разделено на три столбца;
  • статьи и рекламные блоки в столбцах;
  • подвал сайта, содержащий информацию об авторе и авторских правах.

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

Элемент header

Первым элементом структуры HTML , который мы рассмотрим, является элемент header . Спецификация описывает его кратко — « группа вводных или навигационных элементов ».

Вопреки мнению, вы можете использовать header , чтобы представить каждый раздел контента. Когда мы используем здесь слово « раздел », мы не ограничиваемся разделами, разбитыми с помощью элемента section. Технически мы говорим о том, что в HTML5 называется « секционным контентом ». Это означает любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это приведет к тому, что на одной странице будет несколько таких фрагментов.

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

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

Элемент section

Спецификация дает для него такое определение :

Элемент section представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком.

Далее поясняется, что section не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS – то, что для этого использовать? В этом нам поможет элемент div , который не имеет определенного семантического значения.

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

Некоторые примеры корректного использования элемента section в структуре HTML страницы :

  • отдельные разделы интерфейса с вкладками;
  • сегменты страницы « О нас » может включать разделы, посвященные истории компании;
  • различные части длинной страницы « условий обслуживания »;
  • различные разделы сайта онлайн-новостей — статьи могут быть сгруппированы в разделы, посвященные спорту, политике и экономическим новостям.

Корректное использование section

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

  • section является общим элементом, поэтому, если требуется более конкретный семантический элемент ( например, article , aside или nav ), используйте их.
  • section имеет семантическое значение. Это означает, что контент, который он содержит, связан. Если вы не можете кратко описать весь контент, который хотите добавить в раздел, используя всего несколько слов, то нужно использовать семантически нейтральный контейнер — скромный div .

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

В структуре сайта HTML разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона.

Элемент article

Элемент article во многом аналогичен элементу section , но есть и существенные различия. Определение спецификации гласит:

Элемент article представляет собой полный или самодостаточный набор в документе, на странице, в приложении или на сайте. Он может независимо распространяться или повторно использоваться.

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

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

Вот некоторые рекомендациями по применению article :

  • сообщение на форуме;
  • журнальная или газетная статья;
  • запись в блоге;
  • комментарий, оставленный пользователем в блоге или к статье.

Как и в случае с section , элементы article могут быть вложены в другие article . Также можно вложить элемент section внутрь article , и наоборот.

Элемент nav


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

В любом случае элемент nav должен быть зарезервирован для навигации, и это его первостепенное значение. Рекомендуется избегать использования nav для краткого списка ссылок, размещаемого в подвале сайта.

Примечание: Пропуск ссылок навигации

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

При каждом переходе на новую страницу нет смысла слушать главное меню навигации сайта! Элемент nav может помочь в решении этого вопроса. Если экранный диктор видит элемент nav, он может позволить пропустить навигацию, не требуя дополнительной ссылки. В спецификации указано:

« Пользовательские агенты ( например, программы чтения с экрана ), предназначенные для пользователей, которые могут получить пользу от навигационной информации, опущенной при первоначальном рендеринге, или получить пользу от немедленного доступа к навигационной информации, могут использовать элемент в качестве способа определения, какой контент на странице сначала пропустить или предоставить по запросу ».

Примечание. Пользовательские агенты

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

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

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

Данное решение в конечном итоге зависит от вас. Ян Хиксон , главный редактор спецификации HTML5 WHATWG , прямо ответил на этот вопрос: « Используйте [его] там, где бы вы использовали > ».

Элемент aside

Представляет часть страницы, которая « связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого ».

Элемент aside можно использовать для обертывания части контента, которая имеет отношение к:

  • Конкретному контенту ( например, статья или раздел );
  • Целой странице или документу, как это обычно делается при добавлении боковой панели на страницу или сайт.

Элемент aside не должен использоваться для обертывания разделов страницы, которые являются частью основного содержимого.

Другими словами, aside не должен быть основным родительским элементом. Содержимое aside может размещаться само по себе, но оно все равно должно быть частью большего целого.

Варианты использования элемента aside в структуре index html : боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside (как и в случае с элементов header ) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте.

Как и в случае с элементом header , может быть несколько элементов footer на одной странице, и вы должны использовать footer вместо

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

Часто footer будет содержать информацию об авторских правах, списки связанных ссылок, информацию об авторе и другую информацию, которую принято размещать в конце блока контента. Но, как и в случае с aside и header , элемент footer не определяется его положением на странице. Поэтому он не обязательно размещаться в конце раздела или в нижней части страницы. Например, информация об авторе поста в блоге может отображаться над постом, а не ниже, и будет по-прежнему считаться информацией футера в структуре HTML .

Данная публикация представляет собой перевод статьи « HTML5 Page Structure Basics » , подготовленной дружной командой проекта Интернет-технологии.ру

Семантические элементы HTML5

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

В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было

Рассмотрим подробнее семантические элементы и их значения.

Элемент

Элемент формирует заголовочный блок или “шапку” документа, используется как контейнер для группировки вводных и навигационных элементов (логотип, навигационное меню, форма поиска и т.д.).

Тег «aside» — использование в seo продвижении

-na-prodvizhenie-sajta» target=»_blank» rel=»nofollow»>Как влияет на продвижение сайта?

В Google утверждают, что поисковые роботы обрабатывают тег так же, как и другие виды контента на странице. По крайней мере, об этом написал в Twitter Джон Мюллер — специалист отдела качества поиска. Таким образом, контент в рамках тега индексируется, и использовать его для прикрытия спама и других запрещенных методов оптимизации не получится.

Официальная SEO-функция тега – предоставлять поисковым роботам данные о других источниках, которые являются содержимым врезом или сайдбара. Таким его воспринимают все поисковые системы, поэтому лучше использовать только по прямому предназначению, не пытаясь через него реализовать «серые» и «черные» методы SEO.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL