Структура html5 страницы. но мы здесь не за этим. Настоящая проблема - в неправильном употреблении. Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш лого
Я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.
Не используйте как обёртку для оформления
Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов - это произвольная замена элементов
Моя супер-пупер страница
Вместо этого я вижу следующее:
Честно говоря, это неправильно: Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы
Если вы не уверены, какие элементы использовать, я рекомендую вам обратиться к нашей пошаговой схеме выбора HTML5-элементов для разметки содержимого. Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.
Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы Думаю, что вы в курсе, что
Если ваш
Раз уж зашла речь о заголовках - я часто вижу неправильное использование . Не следует использовать в сочетании с Первая проблема выглядит так:
Ричард Кларк В этом случае стоит избавиться от и оставить только заголовок:
Ричард Кларк Следующая проблема состоит в очередном использовании элементов там, где они необязательны:
Когда - это единственный дочерний элемент
Больше примеров использования вы можете найти . На момент написания статьи существует более 30-ти новых элементов и неудивительно, что у нас разбегаются глаза, когда дело доходит до создания осмысленной структурной разметки. Поэтому не стоит злоупортреблять всеми доступными сейчас суперсемантическими элементами. Что, к сожалению, часто происходит с элементом Элемент Замечание: не все группы ссылок на странице должны быть обёрнуты в элемент Ключевая фраза - «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит: И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования Если вы не уверены, стоит ли оборачивать список ссылок в Если ответ на оба эти вопроса «нет», то, скорее всего, это не Ах, Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обёрнута в Спецификация обозначает Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:
Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри
Другое распространённое заблуждение насчёт Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков. Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории: Категории контента:
потоковое содержимое.
Элемент Категории контента:
В качестве элементов панели навигации можно использовать не только элементы списков:
... Также можно добавлять заголовки внутрь элемента:
Категории контента:
потоковое содержимое, секционное содержимое.
Категории контента:
потоковое содержимое, секционное содержимое.
Можно создавать родительские элементы
Категории контента:
потоковое содержимое, секционное содержимое.
Категории контента:
потоковое содержимое. В одном веб-документе может быть несколько элементов
Категории контента:
потоковое содержимое. Категории контента:
потоковое содержимое. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент Элемент Категории контента:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time): Категории контента:
потоковое содержимое, текстовое содержимое. Категории контента:
потоковое содержимое, текстовое содержимое. Категории контента:
потоковое содержимое, текстовое содержимое. Категории контента:
потоковое содержимое, текстовое содержимое. Элементы Элемент С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5
появились новые семантические теги
, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке? Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно. Согласно спецификации HTML5
, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого: Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr
. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp
. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках. Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer
и address
, а также в сам тег header
. Как видно из названия тега, служит для создания блока навигации, различных меню и блоков ссылок. Можно использовать несколько раз на странице. Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег. Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д. Этот тег позволяет выделить какое-либо содержимое страницы в отдельную логическую часть, например, с его помощью можно сделать боковую колонку, как в книге. Тег служит для создания футера на сайте, места в котором обычно размещается информация о сайте, копирайте и т.д. Можно использовать несколько раз на странице. Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом. Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav
. Данный тег используется для выделения автономного контента, например, с его помощью можно сделать блок, содержащий фотографию и описание к ней. Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице. Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах. Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это желтый цвет, но можно изменить цвет стилями. Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку. Таким образом, новые теги позволяют эффективно производить разметку страницы, это крайне важно для поискового продвижения и для использования веб-страниц в различных сервисах. Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа. В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами. Рисунок - Семантическая структура для HTML5 страницы. Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.
site slogan Замечание по поводу тега 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 только в том теге где указано время публикации. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи. Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:
Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег Пример использования тега section в списке с перечислением городов: Join us in these cities in 2010. Follow the yellow brick road. That"s Beantown to its friends. It"s so nice. Подвал сайта оформляется тегом
© 2015 сайт Copyright Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам. Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче. В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org Важное замечание по использованию HTML5 тегов.
В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа. Статьи и материалы В этой статье мы рассмотрим, какие элементы необходимо использовать при построении базовой структуры HTML
документа. Если вы посмотрите на сайт «HTML5 Herald
», то увидите, что он разделен следующим образом: Прежде чем мы определим, какие HTML-элементы
подходят для разных частей страницы, давайте рассмотрим ряд других вопросов. Прежде всего, мы познакомимся с несколькими новыми семантическими элементами HTML5
, которые можно использовать, чтобы разделить страницу и сделать структуру документа более осмысленной. Первым элементом структуры HTML
, который мы рассмотрим, является элемент header
. Спецификация описывает его кратко — «группа вводных или навигационных элементов
». Вопреки мнению, вы можете использовать header
, чтобы представить каждый раздел контента. Когда мы используем здесь слово «раздел
», мы не ограничиваемся разделами, разбитыми с помощью элемента section. Технически мы говорим о том, что в HTML5
называется «секционным контентом
». Это означает любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это приведет к тому, что на одной странице будет несколько таких фрагментов. Элемент header
может использоваться для включения вводного контента или средств навигации, которые являются специфическими для любого раздела страницы, или применяются ко всей странице. Хотя элемент header
часто размещается в верхней части страницы или раздела, его определение не зависит от положения. В структуре сайта может быть указано, что заголовок статьи или записи в блоге может размещаться справа, слева или даже ниже контента. Независимо от этого, все равно можете использовать header
для описания контента. Спецификация дает для него такое определение
: Элемент section
представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком.
Далее поясняется, что section
не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS
– то, что для этого использовать? В этом нам поможет элемент div
, который не имеет определенного семантического значения. Возвращаясь к определению из спецификации, содержимое элемента section
должно быть «тематическим
», поэтому неправильно использовать его для группировки несвязанных фрагментов контента. Некоторые примеры корректного использования элемента section
в структуре HTML страницы
: Каждый раз, когда веб-дизайнерам предоставляется новая семантическая разметка, будет обсуждаться, что является правильным использованием этих элементов, какую цель преследовало ее введение в спецификации и т. д. Вкратце
: В некоторых случаях есть место для свободной интерпретации. Если чувствуете, что имеет смысл использовать именно данный элемент, а не другой, делайте это. Даже если кто-либо упрекнет вас в этом, дискуссия, которая возникнет в результате, может быть интересной и познавательной для всех, кто в ней участвует. В структуре сайта HTML
разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона. Элемент article
во многом аналогичен элементу section
, но есть и существенные различия. Определение спецификации
гласит: Элемент article
представляет собой полный или самодостаточный набор в документе, на странице, в приложении или на сайте. Он может независимо распространяться или повторно использоваться.
Ключевыми моментами этого определения являются самодостаточный набор и независимо распространяться. В то время как section
может содержать любой контент, который может быть сгруппирован тематически, article
должен представлять собой единый контент, который может использоваться сам по себе. Это различие может быть трудно различимо для вас. Поэтому, когда вы сомневаетесь, попробуйте протестировать синдикацию: если часть контента может быть переиздана на другом сайте без изменения, или если ее можно выложить как обновление через RSS
, у нее есть признаки article
. Как и в случае с section
, элементы article
могут быть вложены в другие article
. Также можно вложить элемент section
внутрь article
, и наоборот. Можно предположить, что элемент nav
будет использоваться практически в каждой структуре HTML файла
. Он представляет собой то, что подразумевается: группу навигационных ссылок. Хотя наиболее распространенное использование для nav
будет заключаться в размещении маркированных списков ссылок. Есть и другие варианты. Например, можно обернуть в элемент nav
абзац текста, содержащего основные ссылки навигации страницы или раздела. В любом случае элемент nav
должен быть зарезервирован для навигации, и это его первостепенное значение. Рекомендуется избегать использования nav для краткого списка ссылок, размещаемого в подвале сайта. Решение, применение которого вы видели на многих сайтах — это ссылка «пропустить навигацию»
. Идея состоит в том, чтобы позволить пользователям экранных дикторов быстро пропустить основную навигацию сайта, если они уже прослушали ее. При каждом переходе на новую страницу нет смысла слушать главное меню навигации сайта! Элемент nav может помочь в решении этого вопроса. Если экранный диктор видит элемент nav, он может позволить пропустить навигацию, не требуя дополнительной ссылки. В спецификации указано: «Пользовательские агенты (например, программы чтения с экрана
), предназначенные для пользователей, которые могут получить пользу от навигационной информации, опущенной при первоначальном рендеринге, или получить пользу от немедленного доступа к навигационной информации, могут использовать элемент в качестве способа определения, какой контент на странице сначала пропустить или предоставить по запросу
». При изучении спецификации структуры HTML 5
вы столкнетесь с термином «пользовательский агент
». Он обозначает браузер, который пользователь использует для доступа к содержимому веб-страницы. Причина, по которой в спецификации не говорят просто «браузер
», заключается в том, что пользовательские агенты могут включать в себя программы чтения с экрана или другие технологические средства. Можно использовать nav более одного раза на странице. Если у вас есть основная панель навигации сайта, она обертывается в элемент nav
. Кроме этого, если есть вторичный набор ссылок, указывающих на разные части текущей страницы, его тоже можно обернуть в элемент nav
. Некоторые разработчики считают, что nav подходит для разбивки на страницы или ссылок «хлебных крошек
». А также для формы поиска, которая является основным средством навигации по сайту. Данное решение в конечном итоге зависит от вас. Ян Хиксон
, главный редактор спецификации HTML5 WHATWG
, прямо ответил на этот вопрос: «Используйте [его] там, где бы вы использовали class = nav
». Представляет часть страницы, которая «связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого
». Элемент aside
можно использовать для обертывания части контента, которая имеет отношение к: Элемент aside
не должен использоваться для обертывания разделов страницы, которые являются частью основного содержимого. Другими словами, aside
не должен быть основным родительским элементом. Содержимое aside
может размещаться само по себе, но оно все равно должно быть частью большего целого. Варианты использования элемента aside
в структуре index html
: боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside
(как и в случае с элементов header
) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте. Как и в случае с элементом header
, может быть несколько элементов footer
на одной странице, и вы должны использовать footer
вместо Моя супер-пупер страница
Используйте
до
, представляя собой структурный заголовок в случае, когда заглавие имеет несколько уровней, вроде подзаголовков, альтернативных названий или слоганов.
Злоупотребление
Мой лучший пост
Неправильное использование
Мой лучший пост
Мой лучший пост
Моя компания
Основана в 1893 году
Моя компания
Основана в 1893 году
Не оборачивайте все списки ссылок в
Общие ошибки с элементом
Не каждая картинка это
Ваш логотип - это не
, но мы здесь не за этим. Настоящая проблема - в неправильном употреблении
Название компании
Элемент
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов Описание HTML5-элементов
1. Элемент
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов Site description
2. Элемент
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри или <оl> , он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты
...
3. Элемент
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы ...
4. Элемент
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент ...
...
...
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: 6. Элемент
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.7. Элемент
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента 8. Элемент
Элемент Пудель
О породе
9. Элемент
Элемент 10. Элемент
11. Элемент
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:12. Элемент
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.13. Элемент
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.14. Элемент
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.15. Элементы для описания Восточно-Азиатских символов
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов
— один и более элементов
Элемент Тег header (потоковое)
Тег nav (потоковое, секционное)
Тег article (потоковое, секционное)
Тег section (потоковое, секционное)
Тег aside (потоковое, секционное)
Тег footer (потоковое)
Тег address (потоковое)
Тег main (потоковое)
Тег figure (потоковое, корневое)
Тег figcaption (-)
Тег time (потоковое, текстовое)
Тег mark (потоковое, текстовое)
Тег bdi (потоковое, текстовое)
Тег wbr (потоковое, текстовое)
DOCTYPE и meta теги в заголовке страницы
Заголовок страницы
Site title
Site title
Навигация на странице
Контент на странице
Оформление статьи
Article title
Article sub-title
Сайдбар или колонка с виджетами
Тег section
–
) для обозначения темы секции.
An Event Apart
Cities
Seattle
Boston
Minneapolis
Подвал сайта — Footer
Заключение
Элемент header
Элемент section
Корректное использование section
Элемент article
Элемент nav
Примечание: Пропуск ссылок навигации
Примечание. Пользовательские агенты
Элемент aside
Элемент footer