Пятница, 28 Декабря 2012 13:07

Семантическая HTML верстка

Written by 
Оцени эту запись
(3 Голоса)

Долго не доходили руки написать эту статью, но всегда понимала, что нужно это сделать. Семантическая верстка - это очень обширная и важная тема. Она особенно актуальна с выходом HTML5 и ажиотажем вокруг него. Но эта тема не менее важна и для предыдущих версий HTML и XHTML. А также требование семантической верстки есть почти в каждой вакансии HTML верстальщика. Хотя не думаю, что эту тему понимают те, кто такое требование пишет! :-) 

 

Итак, в данной статье, посвященной семантической верстке, я постараюсь раскрыть все факты этой темы: Семантическая HTML верстка

 

 

  • Использование HTML тегов по их назначению
  • Правильные наименования элементов
  • Группировка элементов
  • Семантическая верстка и валидность
  • Разделение контента и оформления
  • Почему так важна семантика

 

 

Семантика в HTML верстке - это использование HTML тегов по их назначению, правильное их наименование и их группировка.

 

Понятие семантической HTML верстки стало актуальным с увеличением возможностей CSS. Раньше для реализации сложной структуры страницы верстальщики делали табличную верстку. Все блоки, относящиеся к структуре, и функциональные блоки размещались в ячейках таблички. С развитием 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 для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.

 

 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов