Семантическая верстка: понятие и примеры семантического кода

Семантическая верстка: понятие и примеры семантического кода
═════════════════════
Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Семантика в HTML верстке – это соответствие тегов к информации находящейся внутри них. Семантика кода также достигается путем уменьшения количества тегов. Таким образом, мы создаем чистый, читабельный, валидный HTML код. Такая страница будет быстрее грузиться и ранжироваться поисковыми системами.
═════════════════════
Как достигнуть семантики кода?
═════════════════════
Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый из них уникален.
═════════════════════
Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:
═════════════════════
* Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не B и STRONG.
* При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
* Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
* Параграф блока текста создается с помощью P тега, но никак не DIV.
* Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
* То же самое по поводу JavaScript.
* Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
═════════════════════
Использование HTML тегов по их назначению
═════════════════════
Назначение и смысловая нагрузка HTML тегов описаны в DTD (Document Type Definition), который прописан в <!DOCTYPE>, либо в спецификации соответствующей версии HTML. Так, например, тег h1 описывает заголовок документа. Заголовков есть шесть видов h1-h6, которые отличаются размерами и значимостью(в стандартных стилях они отличаются размерами, а отличие на вашем сайте должны сделать вы сами). Думаю, с заголовком все понятно. Есть также ссылки <a>, списки <ul> и <ol>, таблички <table> и много других. Если есть задача сделать таблицу, то каждый, не задумываясь, будет использовать тег <table>. Но бывают и спорные моменты. Например, меню относится к спискам ссылок. А значит, меню нужно верстать при помощи ненумерованного списка <ul> (для HTML5 есть специальный тег <menu>).
______________________________
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>

<li><a href="#">Контакты</a></li>
</ul>
______________________________
Для другого примера семантической верстки вернемся обратно к ссылкам. Если в контенте есть ссылка на другую страницу, то ее мы просто делаем тегом <a>. Это понятно. А вот, например, есть кнопка со стилями cursor:pointer, которая имеет состояния :hover и :active, а при клике на нее всплывает окошко с какой-то формой. Ее тоже делать ссылкой? Нет! Ведь при клике на нее мы не переходим на другую страницу. Потому для такого элемента(он называется активным - Оформление активных элементов) нужно использовать какой-то нейтральный тег - <div> или <span>.

Верстая форму, вам наверняка нужно будет делать подписи к полям формы - "Ваше имя" или "Введите email". Эти подписи нужно делать при помощи тега <label>. Именно он предназначен для данного элемента. К тому же, помимо семантики, вы получите и правильный функционал. Например, подписи в элементам <input type="checkbox"> и <input type="radio">, при клике на них, будут делать активными(выделенными) соответствующие элементы управления.

Возможности CSS позволяют из почти любого элемента сделать визуально другой вид, менять элементы местами, скрывать их и т.д. Для проверки правильности выбора тега, попробуйте отключить CSS. Если заголовок остался похожим на заголовок, список на список, а ссылка на ссылку, то вы идете в правильном направлении.
═════════════════════
Правильные наименования элементов
═════════════════════
Речь идет о задании правильных названий классам и идентификаторам. Напомню, что разница между class(класс) и id(идентификатор) заключается в том, что идентификатор должен быть уникальным, то есть единственным на странице. Вообще, идентификаторами нужно пользоваться осторожно. Их чаще используют для обращения к ним из скриптов или при работе с формами. Потому желательно не задавать элементам идентификаторы без особой необходимости.

Так вот, вернусь к правильным наименованиям. Я уже приводила пример с меню и тегом <ul>, ему можно задавать классы menu, main_menu и т.д. Также и другим элементам - header, footer, content, breadcrumbs(хлебные крошки), title, search. То есть, названия должны быть логичными и интуитивно понятными. Это также поможет ориентироваться в вашем коде другим людям и легче запоминать классы элементов.
═════════════════════
Группировка элементов
═════════════════════
HTML страница в общем случае должна быть поделена на блоки - header, footer, menu, left, right. Эти блоки делятся не только для красоты, но и по функциональности. В шапке сайта обычно лого компании, девиз, контакты - вся самая важная информация сайта. В контентной части - статья. Это самая важная информация данной страницы. А в боковой части - дополнительная информация. Это может быть список категорий, материалы по теме, другая информация. Страница сайта не может быть построена из простого набора блоков, они должны быть в правильном порядке и иметь четкую и правильную структуру.
═════════════════════
Семантическая верстка и валидность
═════════════════════
Также семантика связана и с валидностью. Тег <a> не может содержать другого тега <a>, в строчный элемент не может содержать блочный. Если ваша страница не прошла проверку на валидность, то скорее всего у нее проблемы и с семантикой.
═════════════════════
Разделение контента и оформления
═════════════════════
Ну и последнее, что я хочу сказать, - важно разделять контент страницы и ее оформление. Для этого достаточно просто вынести все CSS стили в отдельный CSS файл, а скрипты - в JavaScript файл. Картинки должны быть на странице только в роли картинок - в теге <img> с атрибутом alt. А все изображения, относящиеся к оформлению, стоит сделать в виде блоков с фоновым изображением.

Не стоит прописывать стилизацию элемента в теге style, если нет особой необходимости. Ведь теперь есть псевдоклассы, при помощи которых вы можете выбрать элементы по их порядковому номеру, четные и нечетные, первые и последние.Также не стоит прописывать стили в атрибутах, типа width или color. Это было актуально при табличной верстке, сейчас это можно делать проще и красивее.
═════════════════════
Почему так важна семантика верстки
═════════════════════
Семантика HTML страницы нужна не ради "галочки" или хорошей репутации. Она важна для дальнейшего удобного использования сайта посетителями и для раскрутки сайта.

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

Ну а для раскрутки сайта польза семантики, думаю, ясна. Поисковый робот первым делом ищет на странице заголовок по тегу <h1>. Ему будет сложно это сделать ,если ваш заголовок не находится в теге <h1>! 😊 Также важно правильное оформление меню, хлебных крошек. Очередной раз напомню, что не обойтись без атрибутов title для ссылок и alt для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.
═════════════════════
Ссылки по теме:
═════════════════════
https://ru.wikipedia.org/wiki/Элементы_HTML
http://xiper.net/learn/tegofenshuj/about-semantic
http://pepelsbey.net/2008/04/semantic-coding-1/
http://zaurmag.ru/priemy-verstki-html-css/osnovy-sema..

Далее несколько практических примеров...