LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Семантический код: Что? Почему? Как?

Семантический код: Что? Почему? Как?

Веб-дизайнеры и разработчики любят бросаться жаргонами и заумными фразами, которые нам иногда сложно понять. В этой статье речь пойдет о семантическом коде. Давайте разберемся, что же это такое!

Что такое семантический код?

Даже если вы не веб-дизайнер, вы наверное знаете, что ваш сайт был написан в HTML. HTML был первоначально предназначен как средство описывающие содержание документа, а не как средство, чтобы сделать вид визуально приятным. Семантический код возвращается к этой оригинальной концепции и призывает веб-дизайнеров писать код, который описывает содержание, а не то как оно должно выглядеть. Например, заголовок страницы может быть запрограммирован следующим образом:

<font size="6"><b>Это заголовок страницы </b></font>


Это сделало бы название крупным и жирным, придавая ему вид заголовка страницы, но в нем нет ничего, что описывает его как “заголовок” в коде. Это означает, что компьютер не может определить это как заголовок страницы.

При написание названия семантически для того, чтобы компьютер распознавал его как “заголовок”, мы должны использовать следующий код:

<h1>Это заголовок</h1>


Внешний вид заголовка может быть определен в отдельном файле, который называется “каскадные таблицы стилей” (CSS), при этом не вмешиваясь в ваш описательный (семантический) код HTML.

Чем важен семантический код?

Возможность компьютера правильно распознавать контент важно по нескольким причинам:

  • Многие слабовидящие люди полагаются на речевые браузеры для чтения страниц. Такие программы не смогут точно интерпретировать страницы, если они не были четко разъяснены. Другими словами, семантический код служит средством доступности.
  • Поисковые системы должны понимать о чем ваш контент, для того чтобы правильно ранжировать вас в поисковиках. У семантического кода есть репутация по улучшению ваших размещений в поисковых системах, так как его легко понимают “поисковые роботы”.

Также у семантического кода есть и другие преимущества:

  • Как вы видите из приведенного выше примера, семантический код короче, а загрузка быстрее.
  • Семантический код облегчает обновления на сайте, так как вы можете применять стили к заголовкам по всему сайте, а не постранично.
  • Семантический код прост для понимания, поэтому, если новый веб-дизайнер подхватывает данный код, то ему будет легко его разобрать.
  • Поскольку семантический код не содержит элементы дизайна, то тогда изменить внешний вид веб-сайта можна без перекодирования всего HTML.
  • Еще раз, потому что дизайн проводится отдельно от содержания, семантический код позволяет любому желающему добавить или редактировать страницы без необходимости хорошего глаза на дизайн. Вы просто описываете содержание, а CSS определяет как это содержание будет выглядить.

Как убедиться в том, что веб-сайт использует семантический код?

На данный момент не существует инструмента, который может проверить наличие семантического кода. Все сводится к проверке наличия в коде цветов, шрифтов или макетов, вместо описания контента. Если анализ кода звучит страшновато, то прекрасной отправной точкой будет вопрос к вашему веб-дизайнеру – кодирует ли он соблюдая семантику? Если он тупо на вас смотрит или начинает нелепую болтовню, то тогда вы можете быть уверены, что он не кодирует данным способом. В этот момент вы должны решить, предоставите ли ему новое направление в работе, или найдете себе нового дизайнера?!

20-03-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".