Несколько мыслей о семантической верстке, чтобы понять, в основном, себя, и других. Первым делом - лезем в словарь. Не все так просто. Однозначно никто так и не объяснил термина семантика. А так хотелось простого объяснения.
Вот
здесь мне понравилось больше всего. Я не вижу смысла приводить ни цитаты, ни тем более всю статью.
Семантика
в программировании: система правил истолкования отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.
И все же...
Подход к верстке не должен быть фанатичен: верстка - не ради верстки, верстка - для людей. Кроссбраузерность - вещь вообще отдельная, но семантически сверстанная страница не обязана выглядеть одинаково при просмотре в любом браузере. Стандарт должен быть одинаков для всех - ведь для того он и стандарт. А если разработчики не придерживаются стандартов? Раз сказали о стандартах, то семантическая верстка должна быть валидна, т.е. соответствовать рекомендациям W3C. Семантическая верстка обязана иметь логичную и последовательную иерархию страницы. Иерархию логичную, в первую очередь, для человека. Web - для людей, а не для роботов. Использование каждого элемента должно быть оправдано.
Я, например, видел такую интерпретацию логичности (дабы не придумывать свое).
Пример 1. Несемантическая, нелогичная верстка.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример несемантической, нелогичной верстки</title>
</head>
<body>
<div id="menu">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<a href="#">Ссылка 4</a>
<a href="#">Ссылка 5</a>
</div>
</body>
</html>
Пример 2. Семантическая верстка.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример семантической верстки</title>
</head>
<body>
<ul id="menu">
<li><a href="#">Ссылка 1</a>
<li><a href="#">Ссылка 2</a>
<li><a href="#">Ссылка 3</a>
<li><a href="#">Ссылка 4</a>
<li><a href="#">Ссылка 5</a>
</ul>
</body>
</html>
С точки зрения браузеров, оба примера можно привести к одинаковому виду с помощью CSS. Затрудняюсь сказать, как это будет выглядеть в текстовых браузерах, но аудио-устройства (например, браузеры для слабовидящих), потребляющие html-контент, эти два примера будет интерпретироваться по разному. Оба примера достаточно спорны. Навигационные ссылки меню, по своей сути, являются списком. И, если это список, то и надо обозначить (описать) его - списком. Но о том, что это навигационные списки, знает только верстальщик. Кроме того, с помощью списков часто оформляют и горизонтальные меню.
Пример 3. (Для упрощения я опущу обязательные строки и теги.)<style type="text/css">
h1 { display: none; }
</style>
<div title="блок с текстом">
<h2>Заголовок</h2>
<h2>Подзаголовок</h2>
<h1>Беспорядочный набор ключевых слов</h1>
<p>содержание блока</p>
</div>
Тут и простому смертному понятно: Заголовок должен быть больше Подзаголовка и т.д. Или, по крайней мере, отличаться "весом". Но простому смертному может быть не понятен финт с тегом <h1> в приведенном примере. Что ж - вот это и есть "танцы с бубном". Вернее только начало танцев. К сожалению, поисковики анализируют содержимое в тегах h1...6. В данном коде верстальщик, возможно, с подачи SEO специалиста, прячет беспорядочный набор ключевых слов от взгляда контент-пользователя, но усиливает взгляд робота.
Любой файл HTML обязан начинаться с указания информации о версии, которой он от первой строки до последней будет соответствовать.
Строгое определение типа документа, в соответствии с HTML 4.01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Документ, соответствующий спецификации, не может содержать в разметке нерекомендуемые спецификацией элементы.
Переходное определение типа документа, в соответствии с HTML 4.01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Документ, соответствующий переходному определению типа документа, разрешает использовать нерекомендуемые (устаревшие) элементы.
Определение типа документа для фреймов, в соответствии с HTML 4.01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Документ, соответствующий определению типа документа для набора фреймов, разрешает использовать нерекомендуемые (устаревшие) элементы и фреймы.
После строки определения типа документа, следуют: корневой элемент документа - html, затем "голова" - head и "тело" документа - body.
Пример 4.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Название страницы</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
...
</body>
</html>
Отсутствие определения типа документа - ошибка. Отсутствие тега head - ошибка. А вот открывать и закрывать элементы html, head и body, по спецификации html 4.01, не обязательно.
Каждый хозяин сайта или странички, хочет чтоб его сайт или страничка были часто посещаемы. Естественное желание. Стили лучше вынести в отдельный файл. Однажды загруженные стили кешируются, что уменьшает трафик. Но, первый раз, их нужно загрузить. HTML код становится читабельным и управляемым.
Как вынести стили из HTML.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Как страницу назовем. Так мы с ней и поплывем</title>
<link rel="stylesheet" href="ссылка на файл стилей" type="text/css" media="screen">
</head>
<body>
...
</body>
</html>
Когда я опубликовал статью, меня все время мучала мысль, что где-то я не прав. Так оно и оказалось. Взял в руки "букварь" и... увидел. В приведенных "doctype" указана спецификация HTML 4.01, в файлах dtd - элементы тегов разметки пишутся БОЛЬШИМИ (ПРОПИСНЫМИ), а у меня написаны строчными. Оставлю как есть - кто-то должен знать, что здесь - несоответствие стандарту.
Я пока закончу. Думаю, что продолжение будет. Будут изменения.