Категоризация вашего контента в HTML5
Если вы фронтенд-разработчик, то наверняка слышали о семантических тегах. Для многих это любимый вопрос на собеседовании.
Хотите знать, что это такое?
Поверьте, это не имеет большого значения. Семантика просто позволяет вам более точно описать ваш контент.
Позвольте мне привести очень простой пример, если вы хотите, чтобы на вашем веб-сайте были верхний и нижний колонтитулы, что вы обычно делаете.
<div class=” header”>….</div> <div class =”footer”>….</div>
Итак, теперь с HTML5 вы можете написать приведенный выше пример:
<header>….</header> <footer>….</footer>
Как видите, вместо использования тега div вы можете использовать правильный тег, такой как верхний и нижний колонтитулы, которые просто описывают ваш контент.
Так много смысловых элементов, которые можно найти здесь.
Но имейте в виду, что это всего лишь теги, вам все равно нужно сказать им, какую позицию вы хотите, чтобы они заняли и какой стиль они должны соблюдать. Да, надо.
Если вы напишете
<footer>….</footer> <header>….</header>
Вы не можете ожидать, что верхний колонтитул будет вверху, а нижний колонтитул - внизу, они просто будут следовать за потоком документов, и вы получите нижний колонтитул вверху и заголовок после него.
Непонятно… .думая, чем они полезны ????
Во-первых, его гораздо легче читать. Вероятно, это первое, что вы заметите, глядя на блок кода, использующий семантические элементы. Чем легче читать и понимать этот код, тем легче он облегчает вашу работу.
Во-вторых, он имеет большую доступность. Не только вам легче понять семантические элементы. Поисковые системы и вспомогательные технологии, особенно с учетом роста числа интеллектуальных устройств (например, программ чтения с экрана для пользователей с нарушением зрения), также могут лучше понимать контекст и контент вашего веб-сайта, что означает лучший опыт для ваших пользователей.
Семантический HTML5 - это невероятно мощный способ сообщить поисковым системам, таким как Googlebot и Bingbot, роль, которую играет каждая часть вашей страницы. И когда у них есть точное понимание этого, они могут более точно аннотировать ваш контент при его сохранении.
Помогите Googlebot и Bingbot, и они помогут вам, и это улучшит SEO веб-сайта, что является большим делом.
Итак, в следующий раз, когда вы будете создавать свой веб-сайт, подумайте о том, что вы хотите передать поисковой системе, что именно будет выводить ваш элемент, а затем используйте семантический тег, который отлично играет свою роль.
Хотя будьте осторожны с семантикой, как в случае, если вы создали три раздела (используя тег ‹section›), хотя информация связана и на самом деле это один раздел с тремя темами подразделов, это может привести к плохому SEO.
Явное предоставление вводящей в заблуждение информации роботам Googlebot и Bingbot отрицательно скажется на их понимании и ограничит полноту и точность их аннотаций, что затруднит поиск вашего контента с помощью алгоритмов ранжирования.
Вы можете обратиться к этому для более ясного понимания.
Свяжитесь со мной в Linkedin
Не забудьте подписаться на публикацию The Lean Programmer Publication, чтобы увидеть больше таких статей, и подпишитесь на нашу новостную рассылку tinyletter.com/TheLeanProgrammer
