Вы находитесь здесь: Главная - Создание сайта - Секреты семантического HTML5 для структурирования документа


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

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

Если у вас есть основная идея о языке HTML, так что вы, наверное, знаете в формате HTML (язык разметки гипертекста) это стандартный язык разметки для веб-страниц. Мы используем в HTML-теги веб-страниц для форматирования контента, как эти теги поручить браузеру, как отображать содержимое страницы. Это элементарные и простые вещи, которые мы знаем все. Но, делать в HTML-теги позволяйте знать браузеру, какой тип контента, который они имеют, и какую роль играют разные типы контента? Нет, не они. Именно здесь семантический код HTML 5 играет важную роль, так как он использует определенные теги, чтобы браузер четко понимать, какой тип содержимого этих тегов.

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

Содержание

  • Почему следует использовать семантический HTML 5?
  • Как выглядит семантический HTML?
  • Как правильно использовать семантические теги HTML
  • Какие теги HTML являются семантическими?

Почему следует использовать семантический HTML 5?

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

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

Как выглядит семантический HTML?

К основным семантическим тегам HTML5 относятся <nav>, <footer> и <section>. Также существует большое количество других семантических тегов. Но мы поговорим о тех, которые нужны для разбиения содержимого веб-страницы на основные части:

  • <header>;
  • <nav>;
  • <main>;
  • <article>;
  • <section>;
  • <aside>;
  • <footer>

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

Как правильно использовать семантические теги HTML

Многие вебмастера допускают ошибки при использовании следующих семантических тегов:

  • Применение тега<blockquote> для добавления отступа к тексту, который не является цитатой. Так как цитаты по умолчанию выделяются отступом. Вместо этого лучше использовать CSS-свойство margin.
  • Применение <p> для добавления разрывов между элементами веб-страницы. Но этот тег предназначен для определения абзаца текста. Для добавления разрывов лучше применять CSS-свойства padding или margin.
  • Применение<ul> для добавления отступа к тексту. Это семантически неверный и неправильный HTML-код, так как теги <li> используются только вместе с <ul>.

Какие теги HTML являются семантическими?

  • <abbr> — сокращение/аббревиатура.
  • <acronym> — акроним.
  • <blockquote> — длинная цитата.
  • <dfn> — определение.
  • <address> — адрес автора (авторов) документа.
  • <cite> — цитата.
  • <code> — часть кода.
  • <div> — блочный элемент.
  • <span> — контейнер для встроенного стиля;
  • <del> — удаленный текст.
  • <ins> — добавленный текст.
  • <em> — акцент, выделение.
  • <strong> — сильный акцент.
  • <h1> — заголовок первого уровня.
  • <h2> — заголовок второго уровня.
  • <h3> — заголовок третьего уровня.
  • <h4> — заголовок четвертого уровня.
  • <h5> — заголовок пятого уровня.
  • <h6> — заголовок шестого уровня.
  • <hr> — тематический разрыв;
  • <kbd> — названия клавиш.
  • <pre> — предварительно отформатированный текст.
  • <q> — короткая встроенная цитата;
  • <samp> — пример вывода.
  • <sub> — подстрочный текст.
  • <sup> — надстрочный текст.
  • <var> — переменная или пользовательский текст.

Пример использования семантических тегов HTML5 приведен ниже.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *