Рассуждения о семантике кода HTML с примерами. Основной заголовок страницы. Плавный переход шаблона с XHTML на HTML5
Подготовил: Евгений Рыжков Дата публикации: 22.01.2010
У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:
- зачем вообще нужно грамотное использование заголовков в верстке?
- какова правильная иерархия заголовков в HTML?
- сколько и каких заголовков должно быть на странице?
- а если заголовок картинкой?
- нужен ли title заголовку?
Зачем вообще нужно правильное использование заголовков в верстке?
Во-первых, это дает возможность быстро сориентироваться на странице, на которой зачастую море информации. Это как в журнальной статье, быстро пробегая глазами по заголовкам, ты сразу отмечаешь на чем стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с таблицами стилей), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют голосовые браузеры и устройства чтения Брайля. Плюс не забываем, что не все устройства хорошо поддерживают каскадные таблицы стилей (например, мобильные устройства). А еще существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у opera .
Во-вторых, поисковым роботам будет проще работать со страницей, проще выделить главное и второстепенное, а значит больше шансов попасть в топ.
В-третих, четкая логическая структура документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.
Спецификации гласят следующее:
Заголовки на странице должны иметь четкую иерархию по уровням, т.е. h2 должен следовать после h1, h3 после h2 и т.д. Пропуск уровней в последовательности заголовков может создать впечатление, что структура документа не была должным образом продумана или что определенные заголовки были выбраны для их визуального исполнения, а не их значения.
Google говорит практически тоже самое:
Не советуем:
- использовать теги заголовков там, где больше подошли бы теги или
- беспорядочно переключаться от заголовков одного размера к другому
Не разбрасывайтесь заголовками. Используйте заголовки только там, где они действительно необходимы. Слишком большое количество заголовков на странице дезориентирует пользователя и затрудняет понимание того, где заканчивается одна тема и начинается другая.
- засорять страницу лишними заголовками,
- использовать заголовки только для стилизации текста, без определения структуры страницы.
- использовать заголовки только там, где действительно заголовки
- соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней
- желательно чтобы первый заголовок (по коду) на странице был h1
- не следует неупорядоченно переключаться от заголовков одного размера к другому
соблюдай четкую иерархию вложенности заголовков
Сколько и каких заголовков должно быть на HTML странице?
Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:
- h1 — один на странице
- h2 — 2-3
- h3 — 4-6
- и т.д.
Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.
Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.
Рассмотрим несколько примеров использования заголовков на веб страницах:
На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на главной странице логотип является заголовком первого уровня:
Если заголовок картинкой
Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:
Фирма Рога и копыта
H1 { width: 250px; height: 100px; background: url(../../training/semantic-html/path-to/logo.png); text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */ overflow: hidden; }
Нужен ли атрибут title заголовку?
Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.
В этой статье вы узнаете как пользоваться семантической разметкой в HTML5 и как это делать правильно.
Что такое семантический HTML5?
Если вы более менее знакомы с HTML, то вы должны знать про HTML теги, которые в большинстве своём используются для форматирования контента - они говорят браузеру как показывать контент на странице. Они не дают определение типу содержащегося контента или какую роль играет контент на странице.
Семантический HTML5 устраняет этот недостаток, определяя точные теги для пояснения четкой роли контента на странице. Эта дополнительная информация помогает роботам/индексаторам, таким как Google и Bing лучше понять какой контент важен, какой является второстепенным, какой используется для навигации и так далее. Добавляя семантические HTML теги на ваши страницы, вы даете дополнительную информацию, которая помогает поисковикам понимать роли и относительную важность разных частей ваших страниц.
Примеры
Это примеры не семантических HTML элементов. Они служат как хранители для передачи браузеру того, как контент должен отображаться. Они не дают информации о роли содержимого контента на странице.
А это семантические элементы. Они ясно определяют роль содержимого контента.
Почему надо это использовать?
Для внимательного пользователя обычно легко определить различные части веб-страницы с первого взгляда. Заголовки, меню и основной контент - все мгновенно, визуально очевидно. А теперь представьте, что вы слепы.
Google и Bing боты, если и не слепы, то имеют серьёзное ослабление со зрением. Для них визуальные пояснения феноменально сложно увидеть и понять.
Им нужна ваша помощь. Если вы можете успешно передавать поисковикам, какая часть страницы является хедером, какая подвалом и какая навигацией, то они поблагодарят вас. Самое важное, говорить им какая часть контента самая важная, делая это вы даете им расширенные инструкции по приоритезации вашего же контента.
Most important content - самый важный контент
Само по себе, использование HTML5 не произведет революции в работе вашего SEO. Как вы знаете, успешное SEO это совокупность многих и многих мелких деталей. И это одна из таких малых деталей, которая улучшит понимание контента вашего сайта со стороны любого поисковика, что заметно внесет вклад в ваши SEO усилия.
Смотря наперед, учитывая как будет развиваться поисковая оптимизация в предстоящие года, расширенный и связная коммуникация с этими системами будет одним из двух краеугольных камней вашей SEO/AEO стратегии.
Как всё это выглядит?
Примеры семантических HTML тегов включают в себя
Следующие HTML5 теги могут использоваться вместо
Ясная установка границ и подробная расстановка атрибутов ролей для каждой части контента, делает страницу горазду понятнее и легче для правильно индексации для Google и Bing.
Обратите внимание, что эти теги ведут себя как
Примеры семантического HTML5
Супер простой семантический HTML5 пример:
Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать - header, nav, main, footer.
Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.
При неверном исполнении, вы посылаете противоречащие и сбивающие с толку с толку сигналы, которые сделают только хуже, а не лучше.
Правильное и простое выполнение это уже большой шаг вперед в ваших коммуникациях с поисковиками. Не будьте чрезмерно амбициозными. Сделаете неправильно и вы можете получить больше проблем, чем решите.
Более сложные примеры
Использование секций и
Тут мы сделали иерархическую систему в нашем главном контенте. Тут есть охватывающая всё
Примите к сведению, что дизайн (оранжевые блоки) не используется для определения семантических зон страницы. Выглядит немного сбивающим с толку, но показывает довольно четко, что шаблон HTML и семантический HTML имеют разные роли.
В реальном же мире, семантическая разметка часто следует за основной разметкой более явно, чем в этом примере. Запомните главное правило: Секция формирует часть чего-то ещё, а
Связанный Aside
Тут мы добавили две части связанного контента к главной
Косвенно связанный aside
Обратите внимание, что aside не обязательно быть сайдбаром рядом с основным контентом. Он также может быть применен для блоков под основным контентом, включая в себя заголовок, текст и ссылку на другую страницу.
Тут мы определили несколько косвенно связанного контента на странице, за пределами основного
Наша финальная версия
Это очень обсуждаемая тема. И нет четких правил о и
Личный совет. Я заметил, что вложенные секции внутри
Вложенные элементы
Элементы могут вкладывать в себя другие элементы. Для примера,
Как упоминалось выше, для SEO целей, вам нужно сконцентрироваться на создании четкого и простой структуры.
Чего НЕ ДЕЛАТЬ
Просто предупреждаю. Я видел много сайтов, использующих визуальный дизайн как руководство для применения HTML5. Как показано ниже, это не то для чего разработан семантический HTML5.
Этот необычайно простой пример просто дублирует визуализацию шаблона. Более чем бессмысленно, он определяет то, что страница состоит из 4 разных тем, вместо одной главной темы и 3-х подтем. Явно давая вводящую в заблуждение информацию для поисковиков, такая схема будет иметь негативное влияния для своего понимания в целом.
Следующие шаги?
Применение семантического HTML5 на ваших страницах значительно улучшит передачу информации для поисковиков. Так как они хотят то, о чем вообще ваш сайт. Они хотят чтобы вы ясно говорили им на понятном им языке и они хотят, чтобы вы обучали их. По-этому делайте это.
Общение
Общение с поисковиками (HTML5 имеет важную роль) это одна из двух колон долгосрочной SEO стратегии, которая приведет к успеху в мире где нам нужно будет оптимизироваться для поисковых систем. Есть много отличных вещей, которые вы можете сделать для улучшения подобного общения. И семантический HTML5 тому пример. Schema разметка это ещё один пример.
Надежность
Вторая колонна это надежность. Есть также клевые вещи, делая которые вы усилите доверие к себе. Все SEO и AEO сходятся к общению и надежности.
В завершение: памятка для хорошей HTML5 SEO разметки
Структура, важность, роли и иерархичность это вещи, которые люди часто понимают инстинктивно в дизайне шаблона. Правильное использование семантического HTML5 вместо
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницы
Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега
Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные
Заголовок страницы
Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.
Site title
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.
site sloganSite title
Замечание по поводу тега 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. Так колонка с сайдбаром может выглядеть следующим образом:
Article title
Article sub-title
Сайдбар или колонка с виджетами
Тег section
Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента –
) для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег
Пример использования тега section в списке с перечислением городов:
An Event Apart
Cities
Join us in these cities in 2010.
Seattle
Follow the yellow brick road.
Boston
That"s Beantown to its friends.
Minneapolis
It"s so nice.
Accommodation not provided.Подвал сайта — Footer
Подвал сайта оформляется тегом
Заключение
Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.
Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.
В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org
Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.
Статьи и материалы
Подготовил: Евгений Рыжков Дата публикации: 22.01.2010
У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:
- зачем вообще нужно грамотное использование заголовков в верстке?
- какова правильная иерархия заголовков в HTML?
- сколько и каких заголовков должно быть на странице?
- а если заголовок картинкой?
- нужен ли title заголовку?
Зачем вообще нужно правильное использование заголовков в верстке?
Во-первых, это дает возможность быстро сориентироваться на странице, на которой зачастую море информации. Это как в журнальной статье, быстро пробегая глазами по заголовкам, ты сразу отмечаешь на чем стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с таблицами стилей), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют голосовые браузеры и устройства чтения Брайля. Плюс не забываем, что не все устройства хорошо поддерживают каскадные таблицы стилей (например, мобильные устройства). А еще существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у opera .
Во-вторых, поисковым роботам будет проще работать со страницей, проще выделить главное и второстепенное, а значит больше шансов попасть в топ.
В-третих, четкая логическая структура документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.
Спецификации гласят следующее:
Заголовки на странице должны иметь четкую иерархию по уровням, т.е. h2 должен следовать после h1, h3 после h2 и т.д. Пропуск уровней в последовательности заголовков может создать впечатление, что структура документа не была должным образом продумана или что определенные заголовки были выбраны для их визуального исполнения, а не их значения.
Google говорит практически тоже самое:
Не советуем:
- использовать теги заголовков там, где больше подошли бы теги или
- беспорядочно переключаться от заголовков одного размера к другому
Не разбрасывайтесь заголовками. Используйте заголовки только там, где они действительно необходимы. Слишком большое количество заголовков на странице дезориентирует пользователя и затрудняет понимание того, где заканчивается одна тема и начинается другая.
- засорять страницу лишними заголовками,
- использовать заголовки только для стилизации текста, без определения структуры страницы.
- использовать заголовки только там, где действительно заголовки
- соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней
- желательно чтобы первый заголовок (по коду) на странице был h1
- не следует неупорядоченно переключаться от заголовков одного размера к другому
соблюдай четкую иерархию вложенности заголовков
Сколько и каких заголовков должно быть на HTML странице?
Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:
- h1 — один на странице
- h2 — 2-3
- h3 — 4-6
- и т.д.
Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.
Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.
Рассмотрим несколько примеров использования заголовков на веб страницах:
На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на главной странице логотип является заголовком первого уровня:
Если заголовок картинкой
Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:
Фирма Рога и копыта
H1 { width: 250px; height: 100px; background: url(path-to/logo.png); text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */ overflow: hidden; }
Нужен ли атрибут title заголовку?
Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.
Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.
Что такое семантическая верстка?
Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.
Давайте взглянем на отличие семантического элемента от обычного.
Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.
Теперь семантические form , table , и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:
XHTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Надеюсь на этом этапе вы уловили разницу между типами тегов. Хочу сразу отметить, что это не единственные теги, их много, а с появлением html5 стало еще больше. Дальше мы познакомимся с ними.
Почему семантическая верстка сайта так важна?
Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.
Исходя из этого семантическая верстка является обязательной, если вы хотите чтобы ваш сайт был доступен любым посетителям с разнообразных устройств, и хорошо ранжировался в поисковых системах. Не стоит забывать и о тексте, который тоже должен быть хорошо структурирован, чтобы пользователям было комфортно его читать.
Как реализовать семантическую верстку страницы?
Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div
Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:
- Теги структуры документа
- Текстовые теги
- Медиа теги
- Корреляционные теги
Теги структуры документа
В прошлом элемент div был основным с помощью которого создавалась , W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.
header: Элемент который используется как контейнер для логотипа, названия сайта и меню. Также для определения заголовков, в статьях и т.д.
footer: Используется в основном для описания нижней части страницы, обычно содержит информацию об авторе, контакты, копирайт, дополнительное меню и кнопку которая ведет к верху страницы.
main: Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.
nav: элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.
section: Описывает разделы документа, должен содержать в себе заголовок h1 — h6
aside: Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.
article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.
Текстовые теги
Существует множество тегов для работы с текстом на странице, но не все они семантические. К примеру можно использовать span для стилизации текста, но информацию о содержимом браузеру он не передает.
h1, h2, h3, h4, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h1, за ним идут в порядке убывания важности заголовки уровня h2 — h6.
strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.
mark: используется для выделения текста в определенном контексте. Например, он может быть использован, чтобы выделить каждое вхождение ключа поиска на странице результатов поиска.
cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.
blockquote и q: элементы используются для вставки цитаты из текста другого источника.
time: тег может быть использован, чтобы сказать браузеру, поисковикам и другим устройствам, что конкретная часть контента представляет собой время и дату.
Медиа теги
HTML5 также включает в себя три тега, которые определяют тип медиа контента. Теги подсказывают браузеру как именно отображать данный контент. а так же они придают смысловое значение для контента.
audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.
video: подобен аудио тегу, но используется для добавления видео контента в документ.
picture: Элемент picture дает разработчикам возможность более гибко отображать картинку на странице. Часто используется в адаптивной верстке, так как может содержать сразу несколько картинок которые отображаются при определенных медиа условиях.
Корреляционные теги
Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:
ol: тег нумерованного списка, аналогичен с тегом ul
figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.
address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.
Если вы новенький в html то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.