{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a6f3aaaca37930ee2985048"},"contents":{"6a6f3aaaca37930ee2985048":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучшие практики семантической верстки в HTML","type":"atomic:image","key":"76spv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантическая верстка — это не просто модный тренд, а основа современного веб-разработки. Если вы когда-нибудь пытались разобраться в чужом коде без документации, то знаете, как это больно. А если этот код еще и не семантический — вообще кошмар. Сегодня я расскажу, как сделать вашу верстку понятной, доступной и дружелюбной к поисковикам. Без лишней воды, только практика.","type":"unstyled","key":"8bhtb"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":20,"offset":0}],"inlineStyleRanges":[],"text":"Digital-студия WNDER","type":"unstyled","key":"b0fco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое семантическая верстка и зачем она нужна","type":"header-two","key":"86sm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантическая верстка — это когда каждый HTML-тег используется по своему прямому назначению. Например,

для шапки,

для навигации,

для статьи. Это как в жизни: вы же не кладете носки в холодильник, правда? Вот и теги должны быть на своих местах.","type":"unstyled","key":"chnv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем это нужно? Во-первых, для SEO. Поисковики лучше понимают структуру страницы, если она семантическая. Во-вторых, для доступности. Люди с ограниченными возможностями используют скринридеры, которые ориентируются на теги. В-третьих, для поддержки кода. Когда вы вернетесь к проекту через полгода, семантическая верстка спасет вас от головной боли.","type":"unstyled","key":"9bnta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Правило №1: Не используйте

там, где есть подходящий семантический тег.

— это последняя инстанция, когда ничего другого не подходит.","type":"unstyled","key":"cajio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные семантические теги HTML5","type":"header-two","key":"3j38r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте пробежимся по ключевым тегам, которые вы должны знать как свои пять пальцев. Вот таблица для наглядности:","type":"unstyled","key":"3re33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"ТегНазначениеПример использования

Шапка страницы или разделаЛоготип, навигация, заголовок

Навигационное менюСсылки на главные разделы

Основное содержимое страницыУникальный контент

Независимая часть контентаПост в блоге, новость

Группа связанного контентаГлава статьи, блок услуг

Боковая панель или дополнительный контентРеклама, ссылки на похожие статьи