Семантика HTML5: больше доступности и SEO в ваших проектах

  1. Но зачем это?
  2. Семантическая метка

Прежде всего, вы знаете, что означает слово семантика?

se · ma · ti · co
1. Относительно семантики
2. Относительно значения, к значению. = ЗНАЧИТЕЛЬНЫЙ.

https://www.priberam.pt/dlpo/sem%C3%A2ntica [доступно 29-11-2017].

Затем мы можем понять, что семантика HTML связана со значением тега в соответствии с тем, что он должен представлять на веб-сайте ...

Но зачем это?

Хорошо, когда у нас есть возможность визуализировать макет, мы можем различить по цвету, размеру формы и тому подобному, на что ссылается каждая часть сайта, на которую ссылается этот компонент, верно? А что если мы говорим о человеке, который не имеет возможности рассматривать наш сайт как слабовидящих или даже роботов?

Используя семантику HTML, мы можем облегчить ведение, понимание документа, помочь в чтении программ сайтов, используемых для слабовидящих, и, самое главное, помочь в распознавании информации для индексации поисковой системы, которая является одним из методов, используемых для SEO (поисковая оптимизация).

Семантическая метка

HTML5 включает несколько тегов с целью улучшения семантики нашей страницы, основными добавленными семантическими тегами были:

  • <header> - Представляет вводный / заголовочный контент тега раздела.
  • <nav> - представляет собой группу ссылок, используемых для перехода на другие страницы или части той же страницы.
  • <main> - представляет контент, связанный с основной темой страницы или основной частью приложения.
  • <aside> - представляет контент, который связан с контентом на вашей стороне.
  • <section> - представляет тематическую группировку контента, обычно с заголовком с использованием тегов <h1> ~ <h6>
  • <article> - представляет полный контент, который можно использовать без зависимостей.
  • <нижний колонтитул> - представляет конечный контент / нижний колонтитул тега раздела

Возможная композиция тегов для разработки сайта может быть примерно такой:

Эти семантические теги уже существовали до HTML5, некоторые из них - <img>, <p>, <form> и связанные ... помимо этих тегов, которые используются внутри тега HTML-тела, в теге head также есть теги метаданных, Чрезвычайно важным использованием таких тегов является создание предварительного просмотра содержимого веб-сайта, которое появляется, главным образом, когда пользователь разделяет сайт в социальной сети или в приложениях обмена сообщениями.

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

Но зачем это?
Но зачем это?
А что если мы говорим о человеке, который не имеет возможности рассматривать наш сайт как слабовидящих или даже роботов?