Какая версия html поддерживает теги header footer article

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

Все указанные скрипты должны располагаться в коде перед CSS.

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

1. установить доктайп ;
2. включить скрипт из примера 6.4 или 6.5;
3. в стилях для новых тегов установить display : block .

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 6.6 показано добавление тега .

Пример 6.6. Использование тега

HTML5 IE Cr Op Sa Fx

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

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

Пример 6.7. Использование

HTML5 IE Cr Op Sa Fx

          
История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.
  

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

Пример 6.8. Использование

HTML5 IE Cr Op Sa Fx

Содержит описание для тега . Тег должен быть первым или последним элементом в группе.

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

Пример 6.9. Использование

HTML5 IE Cr Op Sa Fx

       
Персональный сайт Кристины Ветровой
 
 
Добро пожаловать!
 
Рада приветствовать вас на своем сайте.
 
   

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела (пример 6.10).

Пример 6.10. Использование

HTML5 IE Cr Op Sa Fx

       
Кристина Ветрова
 
Персональный сайт
 
  

Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

Пример 6.11. Использование

HTML5 IE Cr Op Sa Fx

       
Чебурашка и крокодил Гена
 
  
Добро пожаловать!
 
  

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

Пример 6.12. Использование

HTML5 IE Cr Op Sa Fx

       
Съёмки фильма Полипропилен
 
История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.
 
 
Хороший язык
 
История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.
 
  

Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.

Для каждой единицы существует своя заданная форма и ограничения.

• Год — задается четырьмя цифрами (1860).
• Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
• День — две цифры от 01 до 31.
• Час — две цифры от 00 до 23.
• Минуты — две цифры от 00 до 59.
• Секунды — две цифры от 00 до 59.
• Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Пример 6.13. Использование

HTML5 IE Cr Op Sa Fx

       
Опубликовано: сегодня
 
1957-10-04 запущен первый искусственный спутник Земли.
 
1960-08-19 первый полёт собак в космос.
 
1961-04-12 первый полёт человека в космос.





 
1963-06-16 первый полёт женщины-космонавта.
 
1969-07-21 высадка человека на Луну.
  

HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main

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

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

Тэги header и footer

Как уже отмечалось ранее, 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.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

Тэг main

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

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

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

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

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

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

Пример использования тэга main:

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

Из уникальности тэга main следует, что использовать его на сайте достаточно сложно. Ну, сами представьте себе такой сайт, где на каждой странице нужно выделить уникальную часть. Представили? Лично я вижу лишь простенький сайт-визитку на 5 – 6 страниц, где содержимое каждой страницы уникально и не повторяется нигде больше на сайте.

А взять, к примеру, любой блог на WordPress. Как выделить уникальное содержимое, если на главной страницы присутствуют анонсы статей, в архиве тоже есть выдержки? Какая уж тут уникальность! Разве что на статичных страницах типа «О сайте» или «Контакты».

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

Рекомендую почитать статью Избегаем распространенных ошибок в HTML5 разметке, где наглядно показано, что не стоит необдуманно менять старые добрые div-ы на новые теги. Ключевая фраза оттуда:

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

• float, flexbox или grid — что использовать сегодня?
• Как убрать последний разделитель у горизонтального меню
• Разделительная линия в виде волны на css
• Адаптивная верстка сайтов | Макет на основе сетки
• Адаптивная верстка сайтов | Сначала мобильные

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

Игорь Квентор | 17.11.2015

Это дааа… Хотя, полагаю, до сих пор существуют махровые верстальщики, тайком пописывающие таблицы и втюхивающие их наивному обывателю 🙂 Но время бежит. Скоро и адаптивная верстка станет вчерашним днем. То-то еще будет!

ссылка «HTML5 новые тэги time, figure, video, audio, canvas» — неверная
Игорь Квентор | 26.11.2015
Точно. Спасибо!

hgroup — бестолковый тег, исключен из спецификации. Если честно, я не могу представить реальной ситуации, где бы он мог пригодиться.

Александр | 11.08.2016
А про main забыли?
Игорь Квентор | 24.02.2017

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

regprog24 | 11.11.2017

Приветствую.
Прошу ответить на вопрос.
Зачем всё это нужно?
Тег header ни чем не отличается по функционалу от div, кроме того что он глючный и приходится явно в css прописывать его свойства.
Проще ведь сверстать всё одними тегами, например дивами.
Собственно те же претензии к футерам с артиклями на мейнах.

Игорь Квентор | 12.11.2017

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

regprog24 | 12.11.2017

Благодарю за помощь, ответ в статье найден.
«семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое» Поясню. Структура семантических тегов не годится для автоматического выравнивания частей сайта на разных экранах. Разные части страницы не путаются на маленьких экранах, проблема в их содержимом, которое имеет свойство искажаться на маленьком экране. От того что сайт будет открыт на маленьком экране шапка не уедет в подвал. Ни разу с таким не сталкивался. Зато текст на резиновой вёрстке в столбик превращался, жёстко заданные картинки фоны за границы экрана уезжали или обрезались. То есть надо создавать инфраструктуру свойств файла цсс, которые будут автоматически форматировать содержимое.
В результате ответ один, новые теги придумали для того, что бы легче автоматически собирать содержимое сайтов. Это плохо для всех сайтов. Для публичных интересно выдать в поисковик только положительные сведения о себе в правильном, с точки зрения рекламы, виде. То есть если поисковики жёстко заработают на этих тегах, то очень скоро отзывы будут иметь тег навигации, каждое ключевое слово в небольшом тексте будет выделено арткилем и прочие подобные ухищрения. Про частные сайты, для ограниченного круга лиц, вообще не должны иметь таких тегов, что бы не светиться в поисковой системе.

• Обзор сервиса создания мультиссылок NETHOUSE.ID
• Если не используете редактор Gutenberg, удалите это из кода
• Код страницы 307. Что за фигня?
• Смешанный контент на сайте WordPress
• Google PageSpeed и скорость загрузки сайта
• Обзор услуг хостинговой компании NTUP
• 20 лучших HTML CSS шаблонов сайтов на русском языке от TemplateMonster
• Почему большинство текстов в рунете УГ
• Обзор услуг хостинговой компании VDSina
• Как зарабатывать в интернете. Работа на дому. Реальные способы заработать в интернет из личного опыта