html5 semantic tags

Раздел 1. Структурирование контента с помощью семантических тегов HTML5

1.1. Структура

• HTML позволяет нам структурировать документ в соответствии с значением контента
• Div, табличные теги используются для создания структуры, макета, но не семантично
• Семантические теги HTML - структура веб -страницы, чтобы показать значение, а не просто макет
• HTML Semantic Structural/Secturing Elements помогает создавать страницы более читаемые, доступные, лучшие результаты поисковой системы, простые в модификации/обновлении
• Семантический элемент четко описывает его значение как для браузера, так и для разработчика

Примечание : семантические элементы HTML5 поддерживаются во всех современных браузерах.

Элементы заголовка HTML

от H1 до H6

HTML5 Семантические структурные/серийные элементы

Ярлык	Использовать
<main>	Определяет основное содержание документа
<header>	Определяет заголовок для документа или раздела
<nav>	Определяет навигационные ссылки
<section>	Определяет раздел в документе
<article>	Определяет статью.
<aside>	Определяет контент помимо содержания страницы
<footer>	Определяет нижний колонтитул для документа или раздела

Почему введены семантические конструкционные/серийные элементы HTML5?

• Раньше с HTML разработчики использовали/создали свои собственные идентификаторы/классные имена для стиля, такие как заголовок, нижний колонтитул, верхняя навигация, нижняя навигация, главное меню, навигацию, основной левый правый нижний контейнер, содержание, левая статья, правая боковая панель и т. Д.
• Это затрудняло и невозможным для поисковых систем идентифицировать правильное содержание веб -страницы, а также разработчик в браузере и редактировать контент
• С новыми семантическими/значимыми элементами HTML5, такими как ( <header> <footer> <nav> <section> <article> <aside> ), это станет проще
• HTML5 Семантические/значимые элементы делают страницы более читаемыми для машин, а также пользователей с доступностью, результатами поисковых систем, более последовательными и простыми в использовании и стиле

• Согласно W3C, семантическая паутина: «позволяет обмен и повторно использоваться данными между приложениями, предприятиями и сообществами»

Внедрение структурной иерархии

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

• Предпочтительно вам следует просто use a single <h1> per page - это заголовок верхнего уровня, а все остальные находятся ниже этого в иерархии
• Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <h3>s для представления подзаголовков, за которыми следуют <h2>s для представления подзаголовков-это не имеет смысла и приведет к странным результатам

Зачем нам нужна структура?

• Пользователи, смотрящие на веб -страницу, имеют тенденцию быстро сканироваться, чтобы найти соответствующий контент. Если они не видят ничего полезного в течение нескольких секунд, они, вероятно, будут разочарованы и пойдут куда -нибудь еще.
• Поисковые системы, индексирующие вашу страницу, рассматривайте содержание заголовков как важные ключевые слова для влияния на рейтинг поиска страницы. Без заголовков ваша страница будет работать плохо с точки зрения SEO (Search Engine Optimization)
• Люди с нарушениями зрения часто не читают веб -страницы; вместо этого они слушают их. Если заголовки не доступны, они будут вынуждены выслушать весь документ, читаемый вслух громко

1.2. Очертания

• HTML использует семантические элементы, заголовки, семантические теги для генерации/описания описания документа содержимого страницы (Document Outline = Темы, содержимое, индекс)
• Набросок документов используется устройствами/браузерами для сканирования и содержания поиска, перейдите к конкретному/конкретному разделу, чтобы определить, как содержимое связано друг с другом
• HTML5 Outliner используется для понимания и знания точной структуры страницы IE IE страницы HTML/документ
• Используйте утилиту Outliner: https://gsnedders.html1.org/outliner/
• Текстовый редактор, такой как Crackets, использует Document Outliner Plugin/extension чтобы показать правильный контур документов/содержимое/темы/Индексация страницы
• Кроншеты -> Меню просмотра -> Показать набросок документа

1.3. Навигация

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

Примечание : это не правило, что все ссылки документа должны быть внутри

Элемент элемент предназначен только для основного блока навигационных ссылок

1.4. Раздел

• Представляет собой общий раздел документа или применения
• А
  Элемент определяет раздел в документе
• HTML
  Элемент представляет отдельный раздел

• Согласно документации W3C HTML5: «Раздел - это тематическая группировка контента, обычно с заголовком»

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

1.5. Статья

• Представляет собой независимую часть содержания документа, такого как запись в блоге или газетная статья
• Элемент определяет независимый, автономный контент
• Элемент HTML представляет собой автономную композицию в документе
• Тег HTML используется в сообщении в блоге/форуме, в газетной статье, записи в блоге и т. Д.

1.6. В стороне

• Представляет часть контента, который немного связан с остальной частью страницы
• Элемент определяет некоторый контент помимо контента, в который он помещен (как боковая панель)
• Доводы часто представляются в виде боковых панелей или ящиков вызовов

1.7. Заголовок

• Представляет собой группу вступительных или навигационных средств
• Элемент указывает заголовок для документа или раздела
• Элемент должен использоваться в качестве контейнера для вступительного контента
• Элемент HTML представляет вводной контент, как правило, группа вводных или навигационных пособий
• Он может содержать некоторые элементы заголовка, а также логотип, форма поиска, имя автора и другие элементы
• У вас может быть несколько элементов в одном документе

1.8. Нижний колонтитул

• Представляет нижний колонтитул для секции
• Элемент указывает нижний колонтитул для документа или раздела
• Элемент HTML представляет нижний колонтитул для ближайшего содержимого секции или корневого элемента раздела
• Нижний колонтитул обычно содержит информацию об авторе раздела, данные об авторском праве или ссылки на связанные документы
• У вас может быть несколько элементов в одном документе

1.9. Дивизион

• Tag Div известен как Division, Divider tag
• Элемент разделения контента HTML (
  ) является общим контейнером для содержания потока
• До получения семантических тегов HTML5 тег DIV используется в HTML для создания подразделений контента на веб -странице, таких как (текст, изображения, заголовок, нижний колонтитул, навигационная панель и т. Д.)
• А
  Тег - пустой тег контейнера, который определяет разделение или раздел, указав детские элементы
• С помощью семантических тегов HTML5 Div - мощный тег, также используемый для структурирования, деления, макета, страницы раздела/контента с CSS или манипулированных сценариями
• А
  Тег-это элемент уровня блока, поэтому разрыв линии помещается до и после него
• Div является наиболее полезным тегом в веб -разработке, потому что он помогает нам отделить данные на веб -странице, и мы можем создать конкретный раздел
• Он используется для группы различных тегов HTML, чтобы можно было создавать разделы и применять стиль к ним

1.10. Вай-ария

• Доступная инициатива для веб-доступности богатые интернет-приложения
• Это набор атрибутов, которые помогут улучшить семантику веб -сайта или веб -приложения, чтобы помочь вспомогательным технологиям, таким как читатели экрана для слепых, размышляют о некоторых вещах, которые не являются родными для HTML
• Aria (Wai-Aria)-это набор атрибутов, которые вы можете добавить в элементы HTML. Эти атрибуты передают семантику роли, государства и имущества с помощью вспомогательных технологий с помощью API -интерфейсов доступности, реализованных в браузерах
• ARIA (WAI-ARIA) предоставляет пользователю хороший способ перемещаться и взаимодействовать с вашим сайтом. Сделайте ваш HTML -код максимально семантическим, чтобы код был легко понять для посетителей и читателей экрана
• Wai-Aria-невероятно мощная технология, которая позволяет разработчикам легко описывать цель, состояние и другие функциональные возможности визуально богатых пользовательских интерфейсов
• Ориентировочные роли (считыватели экрана и другие устройства сканируют и прыгают на требуемую роль)

    - <header role="banner">
    - <nav role="navigation">
    - <main role="main">
    - <article role="article">
    - <footer role="footer">
    - <aside role="complementary">
    - <footer role="contentinfo">

1.11. Веб -сайты / блоги

• https://www.w3schools.com/html/html_accessibility.asp
• https://www.w3.org/wai/standards-guidelines/aria/
• https://www.w3.org/tr/wai-aria/
• https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/