Статья
Версия для печати
Обсудить на форуме (2)
О семантической верстке

Автор: Sla


Несколько мыслей о семантической верстке, чтобы понять, в основном, себя, и других. Первым делом - лезем в словарь. Не все так просто. Однозначно никто так и не объяснил термина семантика. А так хотелось простого объяснения.
Вот здесь мне понравилось больше всего. Я не вижу смысла приводить ни цитаты, ни тем более всю статью.
Семантика в программировании: система правил истолкования отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.
И все же...


Семантическая верстка для Web.

Подход к верстке не должен быть фанатичен: верстка - не ради верстки, верстка - для людей. Кроссбраузерность - вещь вообще отдельная, но семантически сверстанная страница не обязана выглядеть одинаково при просмотре в любом браузере. Стандарт должен быть одинаков для всех - ведь для того он и стандарт. А если разработчики не придерживаются стандартов? Раз сказали о стандартах, то семантическая верстка должна быть валидна, т.е. соответствовать рекомендациям W3C. Семантическая верстка обязана иметь логичную и последовательную иерархию страницы. Иерархию логичную, в первую очередь, для человека. Web - для людей, а не для роботов. Использование каждого элемента должно быть оправдано.


Логичность

Я, например, видел такую интерпретацию логичности (дабы не придумывать свое).

Пример 1. Несемантическая, нелогичная верстка.
Код: (HTML)
<!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. Семантическая верстка.
Код: (HTML)
<!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. (Для упрощения я опущу обязательные строки и теги.)
Код: (HTML)
<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 обязан начинаться с указания информации о версии, которой он от первой строки до последней будет соответствовать.

Строгое определение типа документа, в соответствии с HTML 4.01.
Код: (HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

Документ, соответствующий спецификации, не может содержать в разметке нерекомендуемые спецификацией элементы.

Переходное определение типа документа, в соответствии с HTML 4.01.
Код: (HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

Документ, соответствующий переходному определению типа документа, разрешает использовать нерекомендуемые (устаревшие) элементы.

Определение типа документа для фреймов, в соответствии с HTML 4.01.
Код: (HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
       "http://www.w3.org/TR/html4/frameset.dtd">

Документ, соответствующий определению типа документа для набора фреймов, разрешает использовать нерекомендуемые (устаревшие) элементы и фреймы.
После строки определения типа документа, следуют: корневой элемент документа - html, затем "голова" - head и "тело" документа - body.

Пример 4.
Код: (HTML)
<!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, не обязательно.


Использование CSS

Каждый хозяин сайта или странички, хочет чтоб его сайт или страничка были часто посещаемы. Естественное желание. Стили лучше вынести в отдельный файл. Однажды загруженные стили кешируются, что уменьшает трафик. Но, первый раз, их нужно загрузить. HTML код становится читабельным и управляемым.

Как вынести стили из 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 - элементы тегов разметки пишутся БОЛЬШИМИ (ПРОПИСНЫМИ), а у меня написаны строчными. Оставлю как есть - кто-то должен знать, что здесь - несоответствие стандарту.

Я пока закончу. Думаю, что продолжение будет. Будут изменения.
Версия для печати
Обсудить на форуме (2)