Продвинутая семантика и доступность.
В этой статье вы узнаете как пользоваться семантической разметкой в 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 вместо
Целью тегов HTML является передача смысла документу. Не беспокойтесь о том, как ваша веб-страница выглядит. Сосредоточьтесь на значении каждого тега, который вы будете использовать.
В зависимости от написанного вами содержимого, вы можете выбрать подходящий элемент, соответствующий смыслу текста.
Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде
Структурные элементы: организация страницы
Структурные элементы позволяют организовать основные части вашей страницы. Они обычно содержат другие элементы HTML.
Вот что типичная веб-страница может в себя включать:
в качестве первого элемента страницы, который может включать в себя логотип и слоган; в качестве заголовка страницы;
в качестве основного содержимого страницы, вроде статьи блога;
Текстовые элементы: определение контента
Внутри структурных элементов вы обычно находите текстовые элементы, призванные определить цель вашего содержимого.
Вы, в основном, будете использовать:
Для абзацев;
-
для (неупорядоченных) списков;
-
для (упорядоченных) списков;
- для отдельных пунктов списка;
для цитат.
Строчные элементы: различный текст
Поскольку текстовые элементы могут быть длинными, но с разным содержанием, строчные элементы позволяют различать части текста.
Есть много строчных элементов, но вы обычно столкнётесь со следующими:
Просто читая этот код HTML, вы можете легко понять, что означает каждый элемент HTML .
Какие-то всякие разные штуки и некоторые выделенные и
даже важные слова.
Другой абзац.
Основной заголовок страницы
Подзаголовок
Однажды сказано
Общие элементы
Когда ни один семантический элемент не подходит для вашего содержимого, но вы всё ещё хотите вставить элемент HTML (в целях группирования или стилизации), то можете остановиться на одном из двух общих элементов:
- для блочных элементов;
- для строчных элементов.
Хотя эти элементы HTML на самом деле не несут какого-либо смысла , они пригодятся когда мы начнём использовать CSS.
Не заморачивайтесь на семантике
Существует около 100 семантических элементов HTML на выбор. Это много. Может оказаться непреодолимым пройтись по этому списку и выбрать соответствующий элемент для вашего контента.
Но не тратьте слишком много времени, беспокоясь об этом. Если вы будете придерживаться следующего списка на данный момент, этого будет достаточно.
Структурные Текстовые Строчные
Семантика и доступность - это естественные части HTML по замыслу, однако они не используется в полной мере, если не применяются правильно. Знание, как писать семантический и доступный код правильно начинается с понимания того, как семантика и доступность работают и как пользователи и машины их интерпретируют. Писать семантический и доступный код невероятно сложно и это может занять много времени. Однако в долгосрочной перспективе преимущества побеждают.
Одна из наиболее важных частей, о которой следует помнить при написании семантического и доступного кода - это сделать всё возможное, чтобы использовать стандартный язык разметки. Приложите усилия, чтобы по возможности писать чистый код и гордитесь своей работой. Вообще говоря, не используйте бессмысленный элемент там, где другой элемент может придать более семантический смысл, к примеру, использование
там, гдеподходит лучше. Используйте семантические элементы и атрибуты, а также микроданные и WAI-ARIA, чтобы расширить значение вашего кода.
Кроме того, будьте адвокатом семантики и доступности . Расскажите, почему вы написали определённый код и дайте обоснование, почему некоторые модули содержимого размечены таким образом. Обозначьте цели и задачи в вашем коде и объясните, как эти цели и задачи выполняются. Практика написания семантического и доступного кода растёт, однако внедрение в целом ещё не завершено. Будьте адвокатом для кода, который вы пишете.
Мотивация для семантики
Иногда можно спросить, реально ли семантика изменит ситуацию. Вы можете услышать, что она замедляет разработку, плохо поддерживается или даже что она своевольна. Хотя это иногда и так, вам по-прежнему необходимо сохранить целостность и продолжить писать по возможности лучший код, потому что семантика вкладывает больший смысл в написании кода.
Важным фактом является то, что семантика в значительной степени полезна всем . Для начинающих семантика наделяет содержимое однозначным смыслом. Семантика придаёт содержимому устойчивую структуру и значение, а также в угоду доступности предоставляет более качественный пользовательский интерфейс и дополнительную информацию для вспомогательных технологий. Поиск и глобализация в большей степени связаны с семантикой, что позволяет проще обслуживать контент на международном уровне и делает его более дружественным поисковой системе. Если это недостаточно, семантика также способствует совместимости операционных систем, что позволяет обмениваться и пользоваться информацией на различных платформах и устройствах.
Можно с уверенностью сказать, что семантика важна и она здесь надолго. Если кратко подытожить, семантика обеспечивает:
- однозначный смысл для содержимого;
- доступность;
- поиск и глобализацию;
- совместимость.
Структурная семантика
В руководстве для начинающих мы обсудили использование структурной семантики , в частности, применение элементов
, 
Загрузка...Возможно вам будет интересно:
Последние статьи
