Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Семантическая верстка — советы и решения. Часть первая. Капля теории, DTD и ластики

29 ноября 2007 · Комментариев: 14 · HTML/CSS, Рецептарий

Сегодня я начинаю публиковать по частям статью, написанную для русского издания PC Magazine, в которой рассказывается о приёмах семантической вёрстки. Первая часть: немного теории, DTD и ластики. Уровень — начинающие.

Вместо вступления

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны.

Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки.

Именно ее мы называем семантической. Слово на первый взгляд довольно расплывчато, но в то же время лишено недостатков более популярного термина «бестабличная», который подразумевает всего лишь отказ от использования таблиц при реализации макетов. На самом деле все куда сложнее. Под семантической версткой мы подразумеваем следующее:

  1. Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
  2. Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
  3. Разрабатываемый вами код соответствует стандартам (X)HTML и CSS. Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

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

Проблемы кроссбраузерности и их решения

Правильный DOCTYPE

Правильный DOCTYPE — это то, с чего должен начинаться любой сайт. Вы можете написать трижды правильный (X)HTML и СSS код, но с неправильным или отсутствующим DOCTYPE он не будет валидным и, что самое ужасное, будет работать неправильно.

Согласно спецификациям HTML и XHTML тег DOCTYPE, указанный в первой строке документа, указывает браузеру, какую именно версию (X)HTML вы используете в своем документе. Без указания DOCTYPE браузер будет воспринимать ваш документ в режиме Quirks mode, что приведет, в частности, к неправильной интерпретации блочной модели.

Правильный DOCTYPE обязан содержать полный абсолютный путь к файлу DTD, хранящемуся на серверах w3.org.

Использование правильного DOCTYPE — первый и необходимый путь к валидной кроссбраузерной верстке.

В этой статье мы используем указанный выше XHTML 1.0 Strict.

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

Ластики

Одна из самых пространенных причин того, что сайт выглядит по-разному в разных браузерам вызвана тем, что браузеры по умолчанию оформляют многие элементы по-своему.

Для примера возьмем небольшой код:

<fieldset>
    <legend>Авторизация</legend>
    <label for="login">Логин:</label>
    <input id="login" maxlength="15" type="text" />
    <label for="password">Пароль:</label>
    <input id="password" maxlength="15" type="password" />
</fieldset>

Взгляните на результат в Firefox 2.0 (слева) и Internet Explorer 6 (справа):
Результат

Разница вызвана тем, что разные браузеры имеют различные значения для полей (margin) и отступов (padding). Разумеется, если задать конкретные величины в правилах для нужных элементов, то все исправится, но можно поступить проще.Существует замечательный селектор *, который выбирает все элементы в документе. Таким образом мы можем заранее обнулить значения для отступов и полей и в дальнейшем задавать их только тогда, когда дефолтные значения нас не устраивают. Эта, на первый взгляд мелочь, поможет вам избежать множества незначительных, но трудно находимых кроссбраузерных несоответствий и просто ошибок в процессе имплементации дизайна.

Добавим чуть-чуть CSS:

* {margin:0;padding:0;}

и посмотрим на результат:

Результат

Уже гораздо ближе к тому кроссбраузерному сооветствию, что мы ищем.

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

Во всех примерах нашей статьи вышеупомянутый «ластик» используется по умолчанию.

Материалы для изучения:

Комментариев: 14 ↓

  • Artem.Chertov

    Привет, Леш.
    Хорошо пишешь – все просто и понятно.
    Я бы сказал проще: семанитическая разметка – это код, отвечающий логике содержимого. А семантика без валидности возможна, запросто :)
    Вместо w3c.org – w3.org :)

    Сейчас тоже думаю продолжить эту тему у себя.

  • Michael Yakovis

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

  • Flack

    > Тоже кажется, что это совершенно несвязанные вещи, и еще как возможна.
    Не буду спорить. Сознательно стараюсь исповедовать перфекционизм.

  • Chupa

    Семантика – это то свойства, которое отличает обычный текст от гипертекста.

  • Chupa

    Точнее наоборот )

  • Oracle

    “Материалы для изучения” – вторая ссылка не работает.

  • FX Poster

    А почему не использовать более “продвинутые” виды ластике, типа этого?

  • Flack

    Продвинутые ластики на вкус и цвет. Я вполне обхожусь без них.

  • Тири

    Хотела еще ознакомиться с материалом “И отступили поля”, но его по ссылке не существует.

  • Necondition

    Спасибо. Действительно все конкретно и очень практично. Будем применять.

  • Roman

    Если ты реально писал это для новичков, то стоило расписать более подробно…

  • Дмитрий

    За изложенный материал благодарен.У меня постоянно возникали проблемы с разными браузерами,теперь буду чаще применять * {margin:0;padding:0;}

  • patryk

    эта страничка Вашего сайта
    опера, validate

    6 ошибок.
    среди которых:
    – Line 355, Column 7: end tag for “body” omitted, but OMITTAG NO was specified
    – Line 355, Column 7: end tag for “html” omitted, but OMITTAG NO was specified

    так что, имхо, РАНО говорить о семантической верстке и валидности…

  • Flack

    Школота :)
    Поправил.

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