Целью тегов HTML является передача смысла документу. Не беспокойтесь о том, как ваша веб-страница выглядит. Сосредоточьтесь на значении каждого тега, который вы будете использовать.
В зависимости от написанного вами содержимого, вы можете выбрать подходящий элемент, соответствующий смыслу текста.
Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде (для отображения результата вычисления) или (для отображения хода выполнения задачи).
Структурные элементы: организация страницы
Структурные элементы позволяют организовать основные части вашей страницы. Они обычно содержат другие элементы HTML.
Вот что типичная веб-страница может в себя включать:
в качестве первого элемента страницы, который может включать в себя логотип и слоган;
в качестве списка ссылок, которые ведут на разные страницы сайта;
в качестве заголовка страницы;
в качестве основного содержимого страницы, вроде статьи блога;
в качестве последнего элемента страницы, расположенного внизу.
Текстовые элементы: определение контента
Внутри структурных элементов вы обычно находите текстовые элементы, призванные определить цель вашего содержимого.
Вы, в основном, будете использовать:
для абзацев;
для (неупорядоченных) списков;
для (упорядоченных) списков;
для отдельных пунктов списка;
для цитат.
Строчные элементы: различный текст
Поскольку текстовые элементы могут быть длинными, но с разным содержанием, строчные элементы позволяют различать части текста.
Есть много строчных элементов, но вы обычно столкнётесь со следующими:
Просто читая этот код HTML, вы можете легко понять, что означает каждый элемент HTML.
Общие элементы
Когда ни один семантический элемент не подходит для вашего содержимого, но вы всё ещё хотите вставить элемент HTML (в целях группирования или стилизации), то можете остановиться на одном из двух общих элементов:
для блочных элементов;
для строчных элементов.
Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся когда мы начнём использовать CSS.
Не заморачивайтесь на семантике
Существует около 100 семантических элементов HTML на выбор. Это много. Может оказаться непреодолимым пройтись по этому списку и выбрать соответствующий элемент для вашего контента.
Но не тратьте слишком много времени, беспокоясь об этом. Если вы будете придерживаться следующего списка на данный момент, этого будет достаточно.
HTML5 Семантика
Семантика — это изучение значений слов и фраз на языке HTML.
Семантические элементы = элементы со смыслом.
Что такое семантические элементы?
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Примеры несемантических элементов: и — Ничего не говорит о его содержании.
Поддержка браузеров
Да
Да
Да
Да
Да
Семантические элементы HTML5 поддерживаются во всех современных браузерах.
Кроме того, вы можете «выучить» как обращаються старые браузеры с «неизвестными элементами».
Новые семантические элементы в HTML5
Многие веб-сайты содержат код HTML как: для обозначения навигации, верхнего и нижнего колонтитулов.
HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:
HTML5
Элемент определяет раздел в документе.
Согласно документации HTML5 W3C: «section — это тематическая группа контента, обычно с заголовком.»
Домашняя страница обычно разделяется на разделы для введения, содержания и контактной информации.
Пример
WWF
Всемирный Фонд природы (WWF).
HTML5
Элемент задает независимое, автономное содержимое.
Статья должна иметь смысл сама по себе и ее можно читать независимо от остальной части веб-сайта.
Примеры того, где можно использовать элемент :
Сообщения форумов
Блог
Газетная статья
Пример
Что делает WWF?
Миссия WWF — остановить деградацию естественной среды нашей планеты, построить будущее, в котором люди заживут в гармонии с природой.
Вложить в или наоборот?
Элемент задает независимое, автономное содержимое.
Элемент определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет, мы не можем!
Итак, в интернете вы найдете страницы HTML с элементами содержащих elements и элементами содержащих элемент .
Вы также найдете страницы с элементами содержащих элемент , и элемент содержащий элементы .
Пример для газеты: Спорт в спорте section, может иметь техническое section в каждом .
HTML5
Элемент задает заголовок документа или раздела.
Элемент должен использоваться в качестве контейнера для вводного содержимого.
Можно использовать несколько элементов в одном документе.
В следующем примере определяется заголовок статьи:
Пример
Что делает WWF?
Миссия WWF:
Миссия WWF — остановить деградацию естественной среды нашей планеты , постройть будущее, в котором люди будут жить в гармонии с природой.
HTML5
Элемент задает нижний колонтитул для документа или раздела.
Элемент должен содержать информацию о содержащем его элементе.
Нижний колонтитул обычно содержит автор документа, информацию об авторских правах, ссылки на правила пользования, контактная информация и т. д.
Можно использовать несколько элементов в одном документе.
Пример
HTML5 /h2>
Элемент определяет набор навигационных ссылок.
Обратите внимание, что не все ссылки документа должны быть внутри элемента . Элемент предназначен только для основного блока навигационных ссылок.
Пример
HTML5
Элемент определяет некоторое содержимое aside из контента, в который он помещен (например, боковая панель).
Содержимое должно быть связано с окружающим контентом.
Пример
Моя семья, посетили центр Epcot этим летом.
Центр Epcot
Epcot — это тематический парк в Диснейуорлде, штат Флорида.
HTML5 и
Цель подписи к рисунку — добавить визуальное объяснение к изображению.
В HTML5 изображение и заголовок можно сгруппировать в элементе :
Пример
Рис. 1. — Прекестулен, Норвегия.
Элемент определяет изображение, элемент определяет заголовок.
Почему семантические элементы?
В HTML4 разработчики использовали собственные имена id/class для стилизации элементов: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т. д.
Это сделало невозможным для поисковых систем определить правильный контент веб-страницы.
Новые элементы HTML5 ( ), станет легче выполнить.
Согласно W3C, семантический веб: «Позволяет совместно и повторно использовать данные между приложениями, предприятиями и сообществами.»
Семантические элементы в HTML5
Ниже приведен алфавитный список новых семантических элементов в HTML5.
Ссылка к нашему полному Справочнику HTML5.
Тег
Описание
Определение статьи
Определяет содержимое aside из содержимого страницы
Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
Определяет заголовок для элемента
Указывает автономный контент, например иллюстрации, диаграммы, фотографии, списки кодов и т. д.
Определяет нижний колонтитул для документа или раздела
Задает заголовок для документа или раздела
Определяет основное содержание документа
Определяет маркированный / выделенный текст
Определяет ссылки навигации
Определяет раздел в документе
Определяет видимый заголовок элемента
Определяет дату/время
Мы только что запустили SchoolsW3 видео
Что такое семантическая верстка и зачем она нужна для SEO
И пока вы не успели закрыть эту страницу из-за совершенно непонятного термина, позвольте объяснить!
Когда вы открываете любой сайт, то сразу видите, где здесь основной блок с информацией, где контакты, где панель навигации и тому подобное. Это и есть заслуга верстки — все структурировано, логически разделено на блоки, удобно размещено на странице и затем оформлено в CSS.
Однако задача семантической верстки — не просто сделать комфортно пользователю. У нее есть и другая важная цель — создать правильную структуру страниц для поисковых ботов, для которых любая из них — это всего лишь набор кода. И если его не оформить правильно, то боты просто не смогут корректно понять, где какой элемент находится, где наиболее важный контент на странице, а где второстепенный, какую часть выводить в результатах поисковой выдачи, а какую можно скрыть или вообще не нужно индексировать. Это и есть те задачи, которые решаются с помощью семантической верстки.
Что такое семантическая верстка?
Семантическая верстка — это подход к разметке страницы, при котором упор сделан не на содержание, а на смысловое предназначение каждого блока, а также на логическую структуру всего документа.
Для лучшего понимания взгляните на два примера ниже:
Ваш креативный заголовок
И еще немного отличного текста
Ваш креативный заголовок
И еще немного отличного текста
Дело в том, что оба этих варианта можно в итоге оформить абсолютно идентично, и на странице они будут отображаться так, что обычный пользователь не заметит ни малейшей разницы. Вот только с точки зрения семантики первый вариант совершенно не годится.
Почему? Об этом расскажем далее!
Почему семантика сайта важна
Продолжим рассматривать наш пример!
Тег
обозначает «параграф/абзац». С его помощью удобно делать разбивку текста с переносом строки. Вот только с точки зрения поисковых алгоритмов он не несет особой информации. Вы можете обернуть заголовок тегом
и даже ярко его В Ы Д Е Л И Т Ь (никогда так не делайте). Пользователь поймет, что это заголовок, но вот для алгоритмов Google он все еще остается обычным блоком текста — не более важным, чем последующие. Без семантической верстки ваша страница для поисковика будет просто большим текстовым документом, где невозможно выделить основную информацию и эффективно использовать алгоритмы поиска.
Семантическая структура сайта важна по двум ключевым причинам.
1) Улучшение позиций веб-ресурса в поисковой выдаче
Разметка помогает поисковикам лучше понимать, что именно находится на странице, где расположена ключевая информация, а где не столь важная , где блок с навигацией, где хедер, а где футер, где основная статья, а где повторяющийся на разных страницах блок (например, та же навигация или контакты).
Можем привести неплохой пример пользы семантической верстки. Введите в Google запрос «расписание поездов Киев», и одним из первых результатов будет следующий график:
Используя правила семантической верстки, разработчики «показали» поисковику, что это за блок и что именно его стоит выводить в результатах поиска по релевантному запросу. Если бы расписание было заключено в обычные теги
, поисковые боты просто не поняли бы, что именно они отвечают на вопрос пользователя и что их стоит показать в выдаче.
2) Повышение доступности сайта
Слабовидящие или незрячие люди тоже пользуются интернетом, только не так, как мы с вами. Для них созданы специальные программы — скринридеры, которые зачитывают текст со страницы. Чтобы скринридер работал корректно, определял и указывал заголовки, основной текст, навигационные элементы и прочее, их обязательно нужно обрамлять соответствующими тегами.
В противном случае программа просто монотонно считает вообще всю информацию со страницы, начиная с названия сайта, заканчивая списком контактов. Полноценно пользоваться веб-ресурсом без семантической верстки люди с ограниченными способностями попросту не смогут.
Семантические теги в HTML
С теорией немного разобрались, теперь давайте перейдем к более практическим вещам: рассмотрим основные семантические теги HTML, познакомимся со способами их использования в современной верстке.
Этим тегом обычно обозначают вводную часть раздела/страницы. Говоря более простым языком, — это «шапка» сайта, которая зачастую одинаковая на всех страницах. Здесь в основном размещают ссылки на основные разделы сайта, контакты, кнопки обратной связи, выбор языка и тому подобное.
Это тег для блока навигации на сайте. Он может быть вложенным в хедер или оставаться отдельным блоком. Иногда на одной странице встречается несколько навигационных блоков — это нормально.
» width=»800″ height=»446″ />
Завершающая часть страницы или отдельного смыслового раздела. На одной странице может быть несколько футеров, но обычно он один. Здесь часто размещают различную дополнительную информацию и ссылки: контакты, линки на другие страницы, логотипы и тому подобное. также принято называть «подвалом» сайта.
Откройте сайт, сделайте скриншот страницы и попробуйте в любом графическом редакторе обвести блоки, указав, где какой тег используется (или может использоваться).
На самом деле у нас на сайте применяется немного другая верстка, но такой вариант, как на скриншоте, тоже возможен. Главное для вас сейчас — понять принципы блочной структуры страниц.
Примеры семантической верстки
Мы приведем несколько простых примеров HTML-кода с корректной версткой. Обратите внимание на структуру и вложенность разных элементов.
Основные ошибки
Хотя HTML-верстка и считается довольно несложной задачей, но правильная семантическая разметка даже сейчас есть далеко не на всех сайтах, вплоть до весьма известных.
Самое главное — это не выучить все теги назубок, а понять логику их использования, что гораздо важнее. Именно логический подход поможет вам избежать таких распространенных ошибок, как:
применение как обертки для оформления;
переизбыток блоков ;
обрамление всех ссылок в тег ;
путаница с тегами , и .
Еще одна довольно частая ошибка среди начинающих верстальщиков — использование семантических тегов HTML для разного рода «украшательств» (например, цветной шрифт, его начертание, размер и прочее). Так делать не нужно. Используйте HTML только для создания структуры документа. Весь визуал делайте в CSS — это правильно.
Попробуем объяснить, почему нужно делать именно так.
Представьте, что вы, размещая статью в блоге, решили, например, выделить первые слова в каждом абзаце красным цветом. Зачем? Захотелось, и все тут. Можно ли это сделать прямо в HTML? Да! Достаточно применить дополнительный тег для изменения характеристик шрифта и задать ему цвет. Вот только придется потратить немало времени, потому как для каждого абзаца вы будете прописывать теги и оформление вручную.
Вот вы, наконец, все сделали, а через неделю поняли, что получилось как-то не очень. Соответственно, теперь вам придется каждый абзац «чистить» вручную.
CSS же позволяет сделать все гораздо быстрее. Присваиваем нужным тегам
определенный класс (одинаковый для выбранных нами), а в CSS буквально одной строчкой прописываем оформление. Надоел красный цвет — меняем всего одно правило, и он изменяется на дефолтный черный ДЛЯ ВСЕХ
с тем же классом. Либо можно стереть правило для класса и тем самым убрать оформление.
В общем, какое-либо оформление непосредственно в HTML — скорее исключение из правил, нежели стандартная практика. Поэтому применяйте HTML только для верстки. Не усложняйте себе и другим разработчикам жизнь.
Вывод
Семантическая верстка и умение правильно использовать семантические теги — это критически важно в первую очередь для SEO. Продвигать корректно структурированный и систематизированный сайт гораздо проще и эффективнее. А веб-ресурс, в котором допущено много ошибок либо не используется семантика верстки в принципе, никогда не будет в топе Google.
Мы ведем к тому, что при разработке и продвижении сайтов очень важно не стараться бездумно экономить, обращаясь к начинающим верстальщикам или пытаясь верстать страницы самостоятельно, не имея должного опыта. Если хотите, чтобы все было сразу сделано правильно, а вам не пришлось платить дважды за одну работу, обращайтесь в Elit-Web. Мы к вашим услугам!
Семантика в HTML: почему важно знать, понимать и применять на практике
Почему семантика важна? Зачем подбирать правильные теги для контента? Зачем вообще это все, если можно слепить все с использованием тега div? Ответы на эти и другие вопросы вы найдете ниже.
Краткая история появления HTML5
HTML появился в далеком 1991 году, когда великий отец интернета сэр Тим Бёрнерс Ли показал миру его первую версию. В данном документе содержалось всего 20 тегов для описания страницы. На тот момент времени их было достаточно, но, если смотреть с точки зрения современного мира, это критически мало.
Спустя некоторое время на свет появляется W3C — консорциум всемирной паутины, и он выпускает вторую версию. Также они издают спецификацию, которая описывает в мельчайших подробностях весь HTML.
Далее идет итерация новых версий: в 1997 году — HTML 3.2, чуть позже появляется HTML4, а в 1999 году маленькая модификация HTML4.01.
Наконец в 2000 году человечество видит рождение XHTML, который по задумке должен был выкинуть все теги, а также привести разработчиков к строгости синтаксиса. Спустя время стало понятно, что XHTML только наносит вред, так как возникали проблемы с совместимостью HTML и XHTML, плюс сообщество стало выражать свое недовольство в сторону политики развития языка разметки.
HTML5 возник, когда крупные компании и влиятельные деятели индустрии перестали терпеть текущую ситуацию, создав свою организацию WHATWG. Выход пятой версии датируется 2006 годом.
W3C по итогу отказался от своего, немного странного, XHTML. Пользователи, разработчики и все причастные к интернету не поддержали их идею, они ждали выход новой версии HTML. Отказ случился в 2009 году, а что еще более интересно, W3C стал совместно с WHATWG развивать HTML5.
На сегодняшний день самая актуальная спецификация — это живой стандарт HTML от WHATWG.
Почему важна семантика при верстке
Давайте для начала определимся с понятием семантики, а затем соотнесем его с темой статьи.
Итак, семантика — это раздел лингвистики, который изучает смысловое значение единиц языка. Что касается семантики в языке разметки HTML, то это подход создания страниц с помощью определенного набора тегов, которым четко задан смысл и их конкретное применение.
На картинке выше перечислено некоторое количество тегов. На данный момент их более 100 штук. Какие-то полностью утверждены спецификацией, и браузеры могут их распознать и «отрендерить», т.е. отобразить на странице. Некоторые являются устаревшими и не рекомендуются к использованию.
Нужны ли все эти теги? Возможно нет, но людям, которые профессионально занимаются вебом, нужно их знать обязательно.
Ниже расположен короткий список причин, почему важно знать семантику и использовать правильные теги для построения страниц.
Доступность
Поисковые роботы
Спецификация
и другие, помогают людям с ограниченными возможностями воспринимать сайт полностью без проблем.
и его элементы
, то в таком случае читалка сообщит примерно следующее: «навигация => список из 5 элементов => О компании ссылка».
Если построить меню с использованием данных тегов, то люди, имеющие проблемы со зрением, будут вам благодарны. Они получат полную, удобную для них информацию и смогут пользоваться сайтом в полной мере.
Основная цель и задача верстки — это передать смысл блоков, из которых состоит сайт. Ведь по сайтам ходят не только люди, но еще и роботы. Для человека легко разделить сайт на смысловые блоки, роботы же опираются на теги, написанные разработчиками.
К примеру, существуют поисковые роботы, которые ежедневно «парсят» или, по-простому, просматривают миллионы сайтов в интернете. Они считывают код, получают сведения, передают данные на поисковые сервера и т.п. В конце концов сайт ранжируется в поисковой выдаче.
Такие теги, как header, footer, aside, main, section, article, задают основную структуру страницы. Используя их, вы показываете роботу, где у вас шапка сайта, где подвал, а где основной контент страницы. Робот поймет сайт быстрее, поставит плюсик и пойдет дальше.
Есть очень хороший пример правильного, семантичного использования тегов при построении страницы. Посмотрите на изображение ниже.
Разработчики сайта РЖД сконструировали расписание с помощью тега table, вместо использования div. Тем самым робот google считал информацию, и их сниппет появился в выдаче по важному коммерческому запросу.
Семантика каждого тега четко прописана в стандартах. Каждый тег имеет свое описание и четкую роль. На данный момент есть еще разработчики, которые по старой привычке используют универсальный блочный тег div (о нем мы еще поговорим).
К примеру, выше на изображении показана вырезка из спецификации по тегу nav. Здесь описаны его категория, контентная модель, контекстная модель, атрибуты и прочие вещи. Сразу же после описывается смысл тега и какие-либо расширяющие комментарии.
Спецификации уже не первый год, браузеры давно научились понимать и распознавать теги, однако, к сожалению, на настоящий момент времени далеко еще не все используют семантические теги.
Есть отличный доклад одного популярного в узких кругах разработчика «Семантика для циников». Всем тем, кто причастен к разработке сайтов, горячо рекомендую посмотреть.
Больше статей на схожую тематику:
Лендинг для B2B и B2C: 7 глобальных отличий, которые важно учесть при разработке
10 эвристик юзабилити от Якоба Нильсена
6 способов определить шрифт на картинке
Основные семантические теги и их описание
С теорией покончено, приступаем к описанию некоторых основных тегов, которые используются при верстке страниц. Пройдемся по их применению, значению и покажем некоторые интересные практики.
В первую очередь затронем основополагающие теги, которые выстраивают самые крупные блоки сайта. Если взглянуть на типовую страницу, то ее контент можно легко разделить на смысловые блоки. Один из примеров разбития схематично проиллюстрирован ниже:
Данный тег используется для группировки вводной части смыслового раздела или всего сайта. Как правило, содержит в себе навигацию, телефоны, почту, строку поиска, логотип и пр. Таким образом чаще всего данный тег используют как шапку сайта.
Кстати, в нашем блоге мы рассказывали, как создать шапку сайта — рекомендуем ознакомиться. Ниже вы можете увидеть типичное применение данного тега.
Есть некоторая особенность у тега header, которую большинство разработчиков упускают из виду при его применении. В спецификации не зря написано, что данный тег служит вводной частью смыслового раздела. То есть его смело можно использовать как шапку какого-то блока, а не всего сайта, как все привыкли делать. К сожалению, такое редко встретишь на просторах интернета.
Этот тег используется для создания навигации на сайте. Его следует использовать для основной навигации на сайте, а не только для каких-то групп ссылок. Ниже представлен один из вариантов меню.
Например, в подвале сайта, как правило, дублируются ссылки на внутренние страницы — их тоже можно объединить в навигацию, однако все остается на усмотрение верстальщика. Спецификация не будет считать это ошибкой.
Интересным применением тега nav будет ситуация при построении пагинации.
Ведь если задуматься, то что такое пагинация? Это ссылки на страницы. Если это ссылки, то почему бы в данном случае не использовать тег .
Main отвечает за основное, главное, доминирующее и неповторяющиеся на других страницах содержимое. Важно, чтобы на странице данный тег не повторялся и использовался только единожды. Исключение одно — если не указан специальный атрибут, который отвечает за скрытие элемента.
Тег используется как заключительная часть смыслового раздела или всего сайта. Как правило, содержит дополнительные ссылки, копирайт, ссылки на социальные сети, политики конфиденциальности и т.д. Обычно его используют для создания подвала, который будет повторяться на всех страницах.
«Футер» необязательно использовать только как подвал сайта. Повторять его можно сколько угодно раз, главное, чтобы он использовался как окончание какого-то смыслового блока на странице.
Представляет собой полную, независимую смысловую единицу на странице. Может легко использоваться и повторяться в любой его части. Ярким примером служит статья в блоге, какой-нибудь виджет, твит и так далее.
Внутри данного тега очень желательно использовать заголовок соответствующего уровня, и тогда блок станет независимым и целостным на все 100%. Иногда возникает дилемма, какой же тег выбрать для блока — section или article? По смыслу они очень похожи, но если копнуть чуть глубже, то сразу станет понятно. Об этом читайте ниже.
Данный элемент представляет собой смысловой и логический раздел страницы. Зачастую используется в виде тематической группы контента с заголовком.
Теперь понимаете, в чем отличие между article и section? Один элемент самостоятельный и независимый, другой четко и логически привязан к определенной странице.
Нравится статья? Тогда смотрите наши курсы!
Мини-курс «Создаем сайт, который будет продавать 24/7»
Курс «Сайт на Тильде с нуля»
Мини-курс «Дизайн и юзабилити»
Представляет собой раздел страницы, который косвенно или побочно связан с основным контентом. Информацию, размещенную в нем, можно рассматривать как самостоятельный, так и отдельный вид контента. Как правило, такие разделы представлены в виде боковых панелей на сайте.
Главное — не стоит забывать, что тег aside не должен быть только сайдбаром в правой или левой части страницы.
На примере ниже очень удачно расположили ссылки на социальные сети в aside. Они как раз являются косвенным контентом по отношению к главной информации сайта.
Очень интересная группа тегов, представляющая собой список описаний или список ассоциаций, который состоит из нуля или более групп пары «имя — значение».
(сокращение от «description list») обозначает сам список описаний;
(сокращение от «description term») обозначает термин;
(сокращение от «description definition») обозначает описание или определение.
Использование данных тегов редко можно встретить. Возможно, это связано с тем, что многие не понимают их смысла и не умеют их правильно использовать.
Google нашел этим тегам очень интересное применение на одной своей странице.
Разработчики взяли меню в подвале страницы, во-первых, обернули его в тег , во-вторых, группу ссылок обернули в dl, его заголовок поместили в dt, и ссылку в dd. Проще это увидеть, чем описать.
Возможно, у вас возник вопрос о правильности и целесообразности использования данных тегов в текущем месте, но, кажется, разработчики google знают, что делают.
Однако все же есть очень спорный момент. Они сделали по такому же принципу блок с ссылками на подписку в соц. сетях.
Весьма неоднозначное решение и оформление блока с такого рода информацией. Оставим вопрос правильности применения открытым.
Закончим наше описание самым популярным и простым тегом. Он не имеет какого особого значения. Это просто тег с помощью которого можно построить блок на сайте или страницу. или весь сайт.
В теории с помощью div можно сделать все что угодно. Забудьте все то, что было написано выше! Ведь можно использовать div и клепать сайты одним за одним. Если ты знаешь, как использовать div, то ты, получается, верстальщик и можешь идти на свое первое собеседование! Шутка, конечно, лучше использовать правильные и подходящие для этого теги.
Это далеко не все теги, которые существуют в html, мы описали лишь некоторые из них. Можно еще часами разговаривать о их семантике, как их правильно использовать, находить лучшие практики.
Примеры роста кликов, конверсий, заказов и прибыли:
Комплексный дизайн сайта с нуля для косметологической клиники
Продающая страница для компании по продаже коммерческого транспорта
Интернет-магазин с Индивидуальным дизайном
Вывод
Семантика очень важна при верстке страниц сайта. Как минимум её не просто так придумали и занесли в спецификацию.
При первом знакомстве семантика кажется сложной, непонятной и отталкивающей, но если вникнуть, потерпеть и разбираться шаг за шагом, то станет все понятно и легко. HTML5 привнес много полезного, а разработчики вздохнули с облегчением. Помните, лучше иметь минимальную семантику, чем совсем ее не иметь!
А если вам нужен семантичный сайт, где теги используются по назначению, где к верстке подошли с особой скрупулёзностью, то можете смело обращаться к нам. Мы поможем вам в этом нелегком деле. 🙂
103
2
2
1
2
Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×
