Отправляет email-рассылки с помощью сервиса Sendsay

Клуб профессиональных программистов

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Килограмм килобайтов" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
RXL

Статистика

1.297 подписчиков
-1 за неделю
←   Все выпуски   →

Клуб профессиональных программистов :: Выпуск #42




Рассылка Клуба профессиональных программистов "Весельчак У"
comp.soft.prog.veselchak
выпуск #42
Сегодня в рассылке фрагмент статьи Sla о семантической верстке.

О семантической верстке


Автор: 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 специалиста, прячет беспорядочный набор ключевых слов от взгляда контент-пользователя, но усиливает взгляд робота.



Прочитать статью целиком можно на нашем сайте.

А теперь прощаемся с Вами до следующего выпуска.

                                        С уважением, команда Клуба.
В избранное