Как сказал Robots: « а если без шуток, …, дилетантам лучше читать и учиться, а создание топиков оставить профессионалам.»

В ходе многих статей, которые в последствии назывались «непрофессиональными», расставляю для будущих писателей все точки над… Дабы больше не возникало нареканий в вашу сторону.

Не раз боролся Delka (Зенич Игорь) за семантичность кода, который пишут в статьях и который в последствии может использоваться как некий учебник для начинающих, тем самым осуществляя нарастание ошибок.

В этой статье я объединил (скомпилировал) уже изложенные мысли (!) многих людей, но почему-то так и не донесенные до большинства. (www.flack.ru, www.pepelsbey.net и некоторые другие)


(все дельные дополнения коментариями будут включены)

Оригинал статьи на временно.нет

Часть 1. Теория.

Семантика — наука о понимании определённых знаков, последовательностей символов и других условных обозначений;

В данный момент мы говорим о семантике в HTML-верстке. Поэтому заведомо не будем проводить все её связи с лингвистикой.

Прежде всего, семантика в вёрстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметки в простой текст.

Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

Так же семантика невозможна без внедрения в код микроформатов.
Микроформаты — это способ внедрения специфических семантических данных в HTML.

Но, стоп, это не все. Стоит заведомо сказать, что семантика как таковая делится на три раздела, которые все три стоит учитывать:

• Правильное применение HTML-элементов;
• Именование элементов;
• Комбинация именованных элементов;

Вывод части: Поэтому, для тех, кто в танке, давайте прежде чем выкладывать свои коды, все таки думать.

Часть 2. Перед практикой.

То, с чего должна начинаться верстка, это с указания правильного DOCTYPE`а.
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Все подробности уже давно бережно описаны Джеффри Зельдмана в переводе Макса Россомахина «Почему так важен DOCTYPE»

Часть 3. The «начало»

Так как мы хотим добиться не только валидной семантическй разметки, но еще и кроссбраузерной, я рекомендую использовать «сброс стилей». Для этого воспользуемся статьей Эрика Мейера.

И так. Что бы все таки окончательно убедиться для чего используются те или иные элементы (если вы не уверены ;) необходимо обратиться к спецификации HTML 4.01.

Отрывок спецификации о элементе ADDRESS:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.


В добавлении: POSH — Plain Old Semantic HTML – (использование HTML-элементов по их назначению) — «старый добрый семантический HTML».

Часть 4. Учимся думать.

Ну что ж. Давайте приведем пример. Самое просто что есть это простой неупорядоченный список. Чаще всего это меню сайта. Как можно его сверстать, держа в голове «верстка дивами, именование элементов …»

Пункт 1<br>
Пункт 2<br>
… <br>



Теперь давайте посмотрим спецификацию и выберем что же наиболее нам подходит для семантически правильного решения данного вопроса.
Мы выбираем неупорядоченный список c элементами списка внутри, а визуальное форматирование — в CSS. Почему мы так решили? Ответ вполне очевиден: в исходном коде у нас есть корневой группирующий элемент, неупорядоченный список пунктов, элементы визуального форматирования.

Немного усложним ситуацию и применим все 3 составляющие семантики:
В качестве примера возьмем описанный нами элемент ADDRESS.

Иван Васильев, ivan@exmail.ru

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

Иван Васильев

ivan@exmail.ru

Далее следую пункту два, правильно назовем классы всех элементов:

Иван Васильев

ivan@exmail.ru

Чем дальше, тем сложнее. Вспомним (ну если не вспомним, то прочитаем) о микроформате hCard. Используем корневой класс, указание имени, фамилии и электронной почты.

<h1 class=”fn n”>
Иван
Васильев

ivan@exmail.ru


Итак мы получили полноценную визитную карточку. И все таки: hCard — это клон старого-доброго vCard, формата электронной визитки, в терминах XHTML. Внедряется бесконечно просто: создаётся (или изменяется текущий) элемент (обычно div или span) с именем класса vcard (значением аттрибута class="vcard"). В нём создаются дочерние элементы с именами классов, соответствующие полям vCard/hCard.
На сайте Sphinx.net.ru достаточно подробно описаны другие аспекты введения в микроформаты.

Часть 5. Не забудем братьев меньших. IE и его причуды.

Думать, научились, начинаем действовать, но вот проблема, в IE все не так как хотелось. Думаем дальше. Есть два выхода и этой ситуации:

• «star html hack»;
• conditional comments;

Первое - «star html hack». В кратце:

#element {
position:relative; /* Основное правило для всеx браузеров */
}
* HTML #element {
position:static; /* Переопределение правила для IE младше седьмой версии */
}


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

Второе - conditional comments. Или проще говоря обычное подключение CSS-файлов, но видимое только IE.

/>
< !--[if IE] >/>< ![endif]-- >

Подробности там же.

Часть 6. ID и class.

В начале давайте поймем что такое ID, что такое class. ID — это имя уникального элемента, class - это общее имя множества элементов и, соответственно, их общая семантическая роль.

Поэтому, удобнее ID использовать для описания структурной разметки.

…
…
…


При именовании важно помнить о множественных классах для одного элемента. Например:

Яндекс


Отсюда становится ясно следующее: что эта ссылка ведёт на сайт (url) организации (org) под названием (fn) «Яндекс».

Таким образом, применяя id для структурной разметки, мы создаём некие пространства имён, благодаря которым мы можем адресовать применение стилей для элементов с одинаковыми смысловыми ролями и, соответственно, именами классов.

Семантически верное именование HTML-элементов при помощи атрибутов id и class, помимо самой семантики, привносит упорядоченность не только в сам документ, а ещё и в процесс разработки.

Часть 7. Подробнее о микроформатах и комбинации именованных элементов.

• Microformats — официальный блог и wiki-документация
• Microformatique — блог Джона Оллсопа (John Allsopp)
• Микроформаты — о микроформатах по-русски на Хабрхабре

Пример использования, написанный Вадимом Макеевым:

Разметка имени пользователя и маленькой иконки рядом, который используется в сервисе блогов Livejournal.com. Вот, каким образом это выглядит сейчас:

<span class='ljuser' lj:user='kuteev' style='white-space: nowrap;'>
<img src='#' alt='[info]' width='17' height='17'
style='vertical-align: bottom;
border: 0; padding-right: 1px;' />

kuteev



Полезного:

• Юзернейм не переносится, ибо white-space: nowrap
• Головастика выровняли по вертикали, отключили у него рамку, отступ и задали размеры — width='17' height='17' style='…'
• Кутеев, оказывается, полужирный, поскольку kuteev

Но что можно сделать с помощью микроформата hCard:

<a href="#" target="_blank"
class="ico" title="Профиль">


<a href="#" target="_blank"
class="fn nickname url" title="Журнал">
kuteev


Что же нового мы теперь можем узнать:

• Мы имеем дело с мини-визиткой Кутеева, потому как class=«vcard»
• Ссылка с головастика ведёт в профиль — мы уточнили title=«Профиль»
• Никнейм Кутеева — kuteev, мы видим class=«fn nickname»
• Ссылка с никнейма ведёт на сайт Кутеева — class=«nickname url», а точнее — в журнал, — мы уточнили title=«Журнал»

Соответственно, вся информация из приведённых примеров становится доступна поисковым машинам и плагинам ваших браузеров, поскольку её разметка формализована в спецификации микроформата hCard.

Часть 9. И так!

Давайте ка все таки прочитаем оригиналы статей, выучим наизусть и не будем больше заниматься глупостями:

• Семантическая вёрстка. Часть первая
• Семантическая вёрстка. Часть вторая
• Семантическая верстка — советы и решения. Часть первая. Капля теории, DTD и ластики
• Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE
• Семантическая верстка — советы и решения. Часть третья. Блочная модель
• Семантическая верстка — советы и решения. Часть IV. Создание «резиновых» макетов с использованием отрицательных полей>
• Семантическая верстка — советы и решения. Часть V. Навигация по сайту или укрощение списков