Русский перевод — Александр Шабуневич

Содержание

  1. Введение
  2. История
  3. Веб-стандарты
  4. Структрура и представление
  5. (X)HTML
  6. CSS
  7. Доступность
  8. URL-ы
  9. Ссылки
  10. Словарь терминов

1. Введение

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

2. История

Когда интернет и веб стали действительно популярны во второй половине 90-х, производители веб-браузеров еще как следует не подготовили реализацию CSS — каскадных таблиц стилей — для веб-разработчиков, чтобы позволить им контролировать внешний вид HTML-документа. Недостаток реализации можно понять, принимая во внимание, что спецификация CSS Level 1 была опубликована в 1996 г., а спецификация для CSS Level 2 была опубликована в 1998 г.

Плохая поддержка CSS в браузерах, сопровождаемая повышенными требованиями графических дизайнеров, желающих получить уровень контроля как при работе с печатными материалами, привели к неправильному употреблению HTML для визуального представления веб-страниц. Главным достижением стало открытие, что используя атрибут border="0" для сокрытия рамок у таблиц можно получить невидимую сетку, которую начали использовать для контроля создаваемой разметки. Другим примером может служить использование прозрачных, и потому невидимых, GIF-рисунков (распорок) для контроля страниц.

Так как HTML никогда не предназначался для контроля внешнего вида документа, хаки, неправильный код и проприетарные элементы (теги) и атрибуты стали использоваться все чаще. О валидации кода знали очень немногие. Мешанина из тегов — вот лучшее название такого типа кода.

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

3. Веб-стандарты

Что такое веб-стандарты?

Веб-стандарты — это технологии, установленные консорциумом W3C и другими организациями, используемые для создания и интерпретации веб-контента (содержимого веб-сайтов). Эти технологии разработаны для опубликованных в Сети документов, ориентированных на будущее, и предназначены для того, чтобы сделать эти документы как можно доступнее.

Структурные языки

Языки представления

Объектные модели

Скриптовые языки

Этот документ фокусируется на XHTML 1.0 Strict для структуры, CSS уровня 1 и уровня 2 для представления и ECMAScript 262 для скриптов.

Когда говорится, что документ следует веб-стандартам, это означает, что документ, кроме прочего, использует следующие технологии:

Заметьте, что «работать в любом браузере» не означает «одинаково выглядеть в любом браузере». Заставить документ выглядеть идентично во всех браузерах и на всех платформах практически невыполнима. Даже использование одних изображений не сделает вид сайта везде одинаковым. Документы, опубликованные в сети, могут быть доступны для широкого круга устройств с различными операционными системами и мониторами разного размера и качества (или вообще без монитора), а также для пользователей, изменивших размер текста своих браузеров и другие настройки. Приняв это, вы сделаете свою жизнь менее напряженной. Любой, кто занимается разработкой веб-сайтов должен понимать, что есть некоторые технические условия, с которыми необходимо считаться, так же как те, кто работает с полиграфией или на телевидении имеют свои условия.

Зачем использовать веб-стандарты?

Чаще всего, веб-разработчики и веб-дизайнеры противятся использованию веб-стандартов. Обычные аргументы Это слишком сложно, Это и так работает и Инструменты, которые я использую, создают неправильный код.

Очень просто отреагировать эмоционально и выстраивать защиту против изучения чего-то нового, выбрасывая технологии, которые вы уже знаете и используете. Однако, если вы посмотрите на ситуацию логично, то увидите, что есть много преимуществ изучения и использования веб-стандартов. Например:

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

Дополнительное чтение:

Валидация

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

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

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

Нет причин не проводить валидацию HTML и CSS. Наоборот — одни преимущества.

Статья Why we won’t help you, написанная Mark Pilgrim — это прекрасное объяснение преимуществ валидации. Она также объясняет почему бывает трудно получить помощь от людей на форумах и листах рассылок, если вы даже не проводили валидацию ваших документов перед тем как задавать вопросы.

Некоторые редакторы HTML, например BBEdit и Homesite имеют встроенные инструменты для валидации. Если ваш редактор не имеет таких инструментов, вы можете использовать онлайновый сервис от W3C:

Понимание сообщений об ошибках, генерируемых валидаторами, может быть непростым делом. Ошибка в начале документа может повлечь за собой несколько дополнительных. Исправив первую ошибку, проведите валидацию снова — это может сильно уменьшить общее число сообщений об ошибках. Некоторые самые распространенные сообщения об ошибках поясняются в списке Common XHTML Validation Errors на сайте Black Widow Web Design.

Убедиться в том, что ваш код полностью валиден — это всегда хорошая идея, но могут возникнуть проблемы с вылавливанием отдельных ошибок. Наиболее частый пример — внедрение в документ флеш-роликов или другого содержимого, требующего плагины. Прочитайте о проблемах с флеш в статье Flash Satay: Embedding Flash While Supporting Standards, а также Embedding flash without <embed>.

4. Структура и представление

Обсуждая веб-стандарты, важно понимать значение разделения структуры от представления. Понять разницу между структурой и представлением поначалу может быть непросто, особенно если вы не думаете о семантической структуре документа. Однако, это очень важно, так как контроль представления при помощи CSS становится гораздо проще, если структура и представление разделены.

Структура содержит обязательные части документа, а также семантическую и структурную разметку содержимого документа.

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

Отделяйте структуру от представления, как только можете. В идеале, вы должны получить HTML-документ, содержащий структуру и контент, а представление контролировать полностью при помощи CSS.

Полностью отделить структуру от представления сейчас не так просто. HTML-код большинства веб-сайтов плохо отражает и структуру и семантику.

Таблицы для разметки

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

Дополнительное чтение:

Семантический HTML

Другая важная часть отделения структуры от представления — использование семантической разметки для структуры содержимого документа. Когда сам HTML-элемент придает структурное значение своему содержимому, нет смысла использовать что-то еще. Другими словами, не используйте CSS для маскировки HTML-элементов и придания им вида других элементов, например, используя элемент <span> вместо <h1> для задания заголовка.

Используя семантический HTML, вы придаете значение различным частям документа для любого браузера — будь то самый последний графический веб-браузер на современном PC, старый браузер, не поддерживающий CSS или текстовый консольный клиент в среде UNIX.

Заголовки

Для пометки заголовков, используйте <h1>, <h2>, <h3>, <h4>, <h5> или <h6> в зависимости от уровня заголовка. <h1> — самый высокий уровень.

Примеры:
<h1>Заголовок документа</h1>
<h2>Подзаголовок</h2>

Заголовок документа

Подзаголовок

Параграфы

Используйте элемент <p> для параграфов. Не используйте элемент <br /> для разделения двух абзацев текста. Границы между ними необходимо определить при помощи CSS для правильной разметки параграфов.

Пример:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing
mollis neque. Aliquam in nulla.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.

Списки

Многие вещи должны быть представлены в виде списков. В HTML три типа списков: ненумерованные списки, нумерованные списки и списки определений.

Ненумерованные списки, также известные как списки с маркерами, начинаются с <ul> и заканчиваются </ul>. Каждый пункт списка окружен элементом <li>.

Нумерованные списки начинаются с <ol> и заканчиваются </ol>.

Списки определений немного отличаются и могут использоваться для разметки списка терминов и описаний. Списки определений начинаются с <dl> и заканчиваются </dl>. Каждый описываемый термин содержится в элементе <dt>, а его описание содержится в одном или нескольких элементах <dd>.

Примеры:
<ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>
<ol>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ol>
  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
<dl>
    <dt>веб-сайт</dt>
    <dd>Коллекция страниц, связанных ссылками,
    которая представляет компанию или
     частное лицо.</dd>
    <dt>веб-страница</dt>
    <dd>Базовая единица информации в Сети,
    содержащая текст, графику и т. д.</dd>
</dl>
веб-сайт
Коллекция страниц, связанных ссылками, которая представляет компанию или частное лицо.
веб-страница
Базовая единица информации в Сети, содержащая текст, графику и т. д.

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

Цитаты

Элемент <q> используется для коротких, строчных цитат. Веб-браузеры должны автоматически вставлять пометки цитаты до и после содержимого элемента <q>. К сожалению, Internet Explorer этого не делает, а в некоторых случаях элемент <q> даже может вызвать проблемы с доступностью. Из-за этого, многие рекомендуют отказаться от использования <q>, и вставлять пометки цитат вручную. Содержащий строчные цитаты элемент <span>, с соответствующим классом, позволяет использовать CSS для стилизации цитат, хотя и не имеет при этом семантического значения. Прочитайте статью Mark Pilgrim The Q tag для детального объяснения проблем с элементом <q>.

Для больших цитат, занимающих один или несколько параграфов, используйте элемент <blockquote>. Потом вы сможете стилизовать цитаты при помощи CSS. Заметьте, что нельзя помещать текст непосредственно внутри элемента <blockquote> — вы должны включить текст цитаты в другой элемент, обычно в <p>.

Атрибут cite может быть использован вместе с элементами <q> и <blockquote> для указания URL ресурса цитаты. Заметьте, что если вы используете элемент <span> вместо <q> для строчных цитат, то вы не можете использовать атрибут cite.

Примеры:
<p>W3C говорит, что <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">представление элементов
фраз зависит от браузера клиента.</q>.</p>

W3C говорит, что представление элементов фраз зависит от браузера клиента..

<p>W3C говорит, что <span class="quote">&#8220;
представление элементов фраз зависит от
браузера клиента.&#8221;</span>.</p>

W3C говорит, что “представление элементов фраз зависит от браузера клиента.”.

<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/
struct/text.html">
    <p>&#8220;The following sections discuss issues surrounding
    the structuring of text. Elements that present text (alignment
    elements, font elements, style sheets, etc.) are discussed
    elsewhere in the specification. For information about characters,
    please consult the section on the document character set.&#8221;</p>
</blockquote>

“The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.”

Выделение в тексте

<em> используется для выделения в тексте, а <strong> — для особого выделения. Большинство веб-браузеров отобразит выделенный текст курсивом, а особо выделенный текст — жирным начертанием. Однако, это не обязательное требование, так что для полной уверенности в том, как текст будет отображаться, лучше использовать CSS. Избегайте использования выделения, когда вам нужен лишь визуальный эффект.

Пример:
<p><em>Выделенный</em> текст обычно отображается
курсивом, <strong>особо выделенный</strong> обычно
отображается жирным.</p>

Выделенный текст обычно отображается курсивом, особо выделенный обычно отображается жирным.

Таблицы

HTML таблицы не должны использоваться для разметки. Содержание табличных данных — вот для чего они нужны. Для того чтобы сделать данные таблицы максимально доступными, важно знать о правильном использовании компонентов таблицы. Примерами могут служить заголовки таблиц (<th>), назначение (атрибут summary) и подписи (элемент <caption>).

Пример:
<table class="example" summary="Эта таблица показывает
годовое увеличение популяции Швеции
в 1999-2003 годах.">
    <caption>Годовое увеличение популяции Швеции,
		1999–2003</caption>
    <thead>
        <tr>
            <td>&#160;</td>
            <th scope="col">1999</th>
            <th scope="col">2000</th>
            <th scope="col">2001</th>
            <th scope="col">2002</th>
            <th scope="col">2003</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Популяция</th>
            <td>8 861 426</td>
            <td>8 882 792</td>
            <td>8 909 128</td>
            <td>8 940 788</td>
            <td>8 975 670</td>
        </tr>
        <tr>
            <th scope="row">Увеличение</th>
            <td>7 104</td>
            <td>21 366</td>
            <td>26 368</td>
            <td>31 884</td>
            <td>34 882</td>
        </tr>
    </tbody>
</table>
Годовое увеличение популяции Швеции, 1999–2003
  1999 2000 2001 2002 2003
Популяция 8 861 426 8 882 792 8 909 128 8 940 788 8 975 670
Увеличение 7 104 21 366 26 368 31 884 34 882

Для детального описания таблиц и их использования, смотрите статьи Bring on the tables, Tables in HTML documents и HTML Techniques for Web Content Accessibility Guidelines 1.0.

Дополнительное чтение:

5. (X)HTML

XHTML 1.0 — это переработка HTML 4 в XML 1.0, разработанная для замены HTML. Заметьте, что ничто не заставляет вас отказываться от использования HTML 4.01 для построения современных, структурированных и совместимых со стандартами веб-сайтов.

Однако, для более гладкого перехода к чистой, семантической разметке, а также для лучшей подготовки возможной конвертации в XML и другие будущие языки разметки, вы можете решить использовать XHTML 1.0 Strict. Выбор за вами.

Большее значение, чем выбор между HTML и XHTML, имеет использование типа документа Strict (Cтрогий) и правильное разделение структуры от представления. Тип документа Strict не разрешает презентационную разметку и заставляет отделять структуру от представления.

XHTML 1.0 Strict используется в примерах данного документа.

XHTML 1.1, являющийся последней версией XHTML, технически более сложен для использования, так как спецификация определяет,что документы XHTML 1.1 должны иметь MIME-тип application/xhtml+xml и не должны обрабатываться как text/html. Использование text/html не запрещено, но не рекомендуется. В то же время, XHTML 1.0, который должен использоваться как application/xhtml+xml, может использовать MIME-тип text/html, так как он совместим с HTML. Заметка W3C XHTML Media Types содержит обзор MIME-типов, рекомендованных для применения.

К сожалению, некоторые старые браузеры, а также Internet Explorer, не распознают MIME-тип application/xhtml+xml, и могут отобразить исходный код страницы, или вовсе отказаться показывать документ.

Если вы хотите использовать application/xhtml+xml, то должны проверять на серверной стороне, может ли браузер обрабатывать данный MIME-тип, и посылать text/html для всех остальных браузеров.

Если вы используете PHP для написания скриптов, то следующий код условий передачи содержимого в разных MIME-типах может быть использован для различных браузеров:

<?php
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml") ||
stristr($_SERVER["HTTP_USER_AGENT"],"W3C_Validator")) {
    header("Content-Type: application/xhtml+xml; charset=iso-8859-1");
    header("Vary: Accept");
    echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
    }
else {
    header("Content-Type: text/html; charset=iso-8859-1");
    header("Vary: Accept");
    }
?>

Скрипт проверяет, посылает ли пользовательский агент (браузер) HTTP заголовок Accept, содержащий значение “application/xhtml+xml”, или агентом является валидатор W3C, который не посылает HTTP заголовок Accept, но может правильно обработать application/xhtml+xml. Если хоть одно из этих условий выполняется, то документ выдается как application/xhtml+xml. Этим браузерам также посылается XML заголовок. Для других браузеров, включая все версии Internet Explorer, документ выдается как text/html. К документу не добавляется XML заголовок, так как это заставит IE/Win работать в режиме обратной совместимости (Quirks mode), чего мы не хотим.

После заголовка Content-Type, посылается заголовок Vary, говорящий кеширующим механизмам (прокси-серверам) о том, что тип содержимого зависит от возможностей клиента, запросившего документ.

Для более продвинутого PHP-скрипта, обратитесь к статье Serving up XHTML with the correct MIME type. Указанный скрипт запрашивает q-рейтинг браузера (оценка способности обрабатывать конкретные MIME-типы) и конвертирует XHTML в HTML 4 перед посылкой документа в качестве text/html тем клиентам, которые не понимают application/xhtml+xml.

Вот пример подобного кода для тех, кто использует ASP и VBScript:

<%
If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0
Or InStr(Request.ServerVariables("HTTP_USER_AGENT"), "W3C_Validator") > 0 Then
    Response.ContentType = "application/xhtml+xml"
    Response.Write("<?xml version=""1.0"" encoding=""iso-8859-1""?>" & VBCrLf);
Else
    Response.ContentType = "text/html"
End If
Response.Charset = "iso-8859-1"
%>

Заметьте, что документы с MIME-типом application/xhtml+xml некоторые браузеры, например Mozilla, могут не отобразить если они содержат ошибки. Это может быть полезно на стадии разработки, но на рабочем сайте приведет к проблемам, особенно если сайт будет обновляться людьми, которые не слишком разбираются в XHTML. В таком случае вы можете решить использовать HTML 4.01 Strict.

Вот список наиболее значительных правил при использовании XHTML 1.0 Strict вместо HTML 4.01 Transitional (или любого другого HTML):

Дополнительное чтение:

Тип документа (Doctype)

Сейчас очень малое количество HTML-документов имеют правильное и полное указание типа документа, или DTD (Document Type Declaration). Оно использовалось больше для декоративных целей, однако, вот уже несколько лет, указание DTD может оказать очень сильный эффект на отображение документа в браузере.

Все HTML и XHTML-документы должны иметь объявление типа документа для того, чтобы быть правильными. Тип документа устанавливает версию HTML или XHTML, используемую в документе. Это используется валидатором при валидации, а также веб-браузером при выборе режима отображения. Если в документе приведен правильный и полный DTD, многие браузеры переключаются в стандартный режим, это означает, что они ближе следуют спецификации CSS. Также документ быстрее отображается, так как браузер не пытается по-своему интерпретировать неправильный HTML. Это также заметно уменьшает разницу в результатах обработки страницы разными браузерами.

Следующий тип документа объявляет, что документ — XHTML 1.0 Strict, и заставляет браузеры, имеющие т. н. «переключатель типов документа», использовать стандартный режим.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Дополнительное чтение:

Кодировка символов

Все документы XHTML должны указывать свою кодировку символов.

Лучшим способом указать кодировку является настройка веб-сервера на посылку HTTP-заголовка content-type с указанием кодировки. Для детальной информации о том, как это сделать проверьте документацию вашего сервера.

Если вы используете сервер Apache, вы можете указать кодировку, добавив одно или несколько правил в ваш файл .htaccess. Например, если все ваши файлы используют кодировку utf-8, добавьте следующее:

AddDefaultCharset utf-8

Для указания кодировки для файлов с определенными расширениями, укажите:

AddCharset utf-8 .html

Если ваш сервер позволяет работать PHP-скриптам, вы можете использовать следующий код:

<?php
    header("Content-Type: application/xhtml+xml; charset=utf-8");
?>

Для обработки ваших страниц как HTML, замените application/xhtml+xml на text/html. Если у вас нет возможности настроить свой сервер для уточнения кодировки, используйте элемент <meta> в секции документа <head>. Хорошо указывать кодировку таким способом и в случае правильно настроенного сервера.

Например, указанный код <meta> говорит браузеру, что документ использует кодировку ISO-8859-1:

<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
Дополнительное чтение:

6. CSS

Раньше CSS использовался в основном для указания свойств начертания шрифта. Теперь вы можете использовать CSS для контроля всей разметки документа. Однако, для того чтобы делать это эффективно, вам необходимо перестать мыслить таблицами.

Семантический, структурный XHTML — необходимое требование для эффективного контроля разметки при помощи CSS.

Поддержка браузеров

Как было отмечено ранее, поддержка CSS браузерами была значительно улучшена в последние годы. К сожалению, разработчики браузеров не выглядят заинтересованными во внедрении открытых стандартов, так что уровень их поддержки варьируется от браузера к браузеру. Кроме того, мешают ошибки программного обеспечения, которые заставляют браузеры вести себя так, как они не должны себя вести.

В настоящее время (2004), браузерами с лучшей поддержкой CSS являются Mozilla (и другие браузеры, основанные на движке Gecko: Firefox, Camino, Netscape 6+), Opera и Safari (и другие браузеры, основанные на WebCore: OmniWeb 4.5 и поздние). Internet Explorer 6/Win не имеет такого же уровня поддержки CSS, но позволяет вам делать основные вещи. Internet Explorer 5/Mac имеет очень хорошую поддержку CSS 1, но не поддерживает большинство правил CSS 2. IE 5.* для Windows поддерживает достаточно, но имеет некоторые проблемы, о которых вы должны знать. Более ранние версии Internet Explorer не имеют хоть сколько-нибудь стоящей поддержки стандартов. Тоже самое относится к Netscape версиям ранее 6.

Так как большинство людей использует Internet Explorer для Windows, вам часто придется использовать этот браузер как нижнюю планку. Однако, это не значит, что вы не можете и не должны использовать свойства браузеров с лучшей поддержкой CSS для улучшения дизайна, предназначенного специально для них.

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

Важно отметить, что эти люди не будут отброшены. В 90-х годах, скрипт проверки клиента был популярным способом перенаправить любого, использующего «неправильный» браузер (обычно, что угодно кроме Internet Explorer для Windows) на страницу, требующую обновить их браузер для получения доступа на сайт.

Сегодня вы можете обслуживать неподдерживаемые браузеры лучшим способом. Одним из преимуществ использования логичной, семантической верстки XHTML является то, что это делает документы доступными и используемыми даже без должной поддержки CSS. Представление документа — то как документ выглядит — не будет таким же, как и в современном браузере, однако, содержание будет то же самое. Вот почему лучше посылать страницу без стилей для браузеров без поддержки стандартов, чем просто закрывать для них сайт.

Есть несколько способов сделать это. Одним из самых распространенных путей — использование @import для подключения ассоциированного файла стилей. Netscape 4 и другие старые браузеры не понимают конструкцию @import и не подключают CSS файл. Есть несколько других способов спрятать CSS от браузеров. Они обычно основаны на ошибках в интерпретации CSS браузерами (т. н. CSS-хаки). Это означает, что очередное обновление браузера может исправить подобную ошибку, но не те проблемы, из-за которых файл скрывался от этого браузера. Так что, чем меньше вы полагаетесь на CSS-хаки, тем лучше.

Конечно, вы можете использовать серверные технологии для проверки браузера, посылая разные CSS-файлы (или вообще их не посылать) различным браузерам. Если вы будете так поступать, убедитесь что скрипт определения поддерживается в нормальном состоянии, чтобы не послать неправильный файл совсем новому браузеру.

Дополнительное чтение:

Разные способы применения CSS

Есть несколько способов применения CSS к элементам HTML-документа.

Внешний

Есть несколько преимуществ в хранении всех правил CSS в одном или нескольких отдельных файлах. HTML-документы становятся меньше, CSS-файлы сохраняются в кеше браузера и скачиваются всего один раз, а вам необходимо отредактировать всего один файл для изменения внешнего вида целого сайта. Внешний файл может выглядеть так:

h1 {
    font-weight:bold;
}

Заметьте: во внешнем CSS-файле нет элемента <style>.

Вы можете сделать ссылку на CSS-файл в документе HTML, используя элемент <link>:

<link rel="stylesheet" type="text/css" href="styles.css" />

или используя правило @import в элементе <style>:

<style type="text/css">
@import url("styles.css");
</style>

Строчный

Используя атрибут style, вы можете применять CSS непосредственно к HTML-элементам:

<h1 style="font-weight:bold;">Rubrik</h1>

Этого необходимо избегать, так как это смешивает структуру и представление.

Внутренний

Внутренний CSS содержится в элементе <style>, который, в свою очередь, располагается в элементе <head>:

<style type="text/css">
h1 {
    font-weight:bold;
}
</style>

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

Дополнительное чтение:

Синтаксис CSS

Правило CSS состоит из селектора и одного или нескольких объявлений. Селектор определяет к какому элементу HTML будет применено правило. Каждое объявление состоит из свойства и значения. Блок объявления окружается фигурными скобками { }, каждое объявление заканчивается ; (точкой с запятой).

A simple CSS rule looks like this:

p {
    color:#0f0;
    font-weight:bold;
}

В этом случае, p — это селектор, показывающий, что правило будет применяться ко всем элементам <p> в документе. Правило имеет два объявления, которые вместе делают весь текст,содержащийся в элементе <p> зеленым и жирным.

Для более детального объяснения правил CSS, смотрите, например CSS Beginner’s Guide, CSS from the Ground Up или книгу по CSS.

Дополнительное чтение:

Избыточность элементов и классов

Начиная работать с CSS, люди часто совершают ошибки, используя ненужные XHTML-элементы, избыточные классы и лишние элементы <div>. Это не означает, что их ненужность делает код неправильным, просто это противоречит одной из причин разделения структуры от представления — получению более простой, чистой верстки.

Пример использования ненужных XHTML-элементов:

<h3><em>Headline</em></h3>

Если вы хотите сделать начертание заголовка курсивным, используйте CSS для стилизации элемента <h3>:

h3 {
    font-style:italic;
}

Чрезвычайно излишнее использование классов может выглядеть так:

<div id="main">
    <div class="maincontent">
        <p class="maincontenttext">
            Lorem ipsum dolor
        </p>
    </div>
</div>

Это можно сделать так:

<div id="main">
    <div>
        <p>
            Lorem ipsum dolor
        </p>
    </div>
</div>

Для управления элементами, содержащимися в div#main, используйте контекстные селекторы в коде CSS. Это должно выглядеть примерно так:

div#main p {
    /* rules */
}

В большинстве случаев, CSS может использоваться для стилизации логического XHTML без добавления лишней разметки. Однако, есть ситуации, когда введение дополнительного кода того стоит.

CSS советы

Очевидно, что как только вы начнете серьезно использовать CSS, вы будете сталкиваться с некоторыми проблемами. Одни могут возникнуть из-за непонимания, другие — из-за нечетких спецификаций или ошибок браузеров. Документ CSS Crib Sheet — это коллекция полезных советов, собранных Dave Shea. Здесь приведены наиболее значительные из них, а также некоторые дополнительные.

CSS разметка

Существует множество примеров и учебников о том, как использовать CSS для разметки. Хороший совет: начните с простой разметки, изучите как она работает, а затем начинайте верстать более сложные сайты.

Дополнительное чтение:

7. Доступность

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

Главное недоразумение — это мнение, что делая сайт доступнее, вы делаете его менее привлекательным, чем другой, малодоступный сайт. Это не так. Доступность совсем не оказывает влияния на представление.

Вот пример, как доступность может помочь всем: сайт имеет веб-форму, используемую для регистрации на семинаре. В форме вы можете выбрать семинар в одном из трех городов. Каждое название города расположено рядом с кнопкой-переключателем. В мыслях создателя формы, любой человек, использующий графический браузер, помещает курсор на маленькую кнопку и кликает по ней, выбирая город. Если разработчик знает о доступности, то он помечает надписи рядом с кнопками элементом <label>. В этом случае, кроме самой кнопки, вы сможете кликнуть на названии города для его выбора. Какой способ использования веб-формы проще для всех?

Использование семантического, хорошо структурированного XHTML приведет вас на долгий путь к изготовлению доступных сайтов. Для улавливания общей идеи о доступности документа, попробуйте посмотреть его в текстовом браузере наподобие Lynx, чтобы понять что из себя представляет его содержимое. Это очень далеко от проверки на доступность, которая вам необходима, но это хорошее начало.

Фреймы

Многие веб-дизайнеры любят использовать фреймы для разделения окна браузера на несколько независимых частей, каждая из которых содержит отдельный HTML-документ. Это может оказаться полезным для какого-нибудь Intranet-приложения. Однако, на общественном сайте у фреймов обнаруживается много недостатков:

Кроме того, вы сами усложняете себе жизнь. Фреймы делают веб-сайт более технически сложным.

Tables

Очень часто люди решают не использовать таблицы для разметки, а также не использовать таблицы вообще. Это неправильное решение. Если вы имеете табличные данные, то для разметки вы должны использовать таблицу. Однако, важно понимать, что есть много способов сделать таблицы логичнее и доступнее.

Дополнительное чтение:

Формы

Веб-формы часто бывают неоправданно сложны в использовании, частично это происходит из-за их нелогичного построения, частично из-за того, что составляющий их HTML-код не содержит элементы, предназначенные специально для того, чтобы сделать формы более доступными и простыми в использовании. Элементы <label>, <fieldset> и <legend> существуют и должны использоваться.

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

Read more:

JavaScript и cookie

Избегайте полагаться на JavaScript. Очень многие люди отключают JavaScript в своих браузерах из-за вопросов безопасности или борясь со всплывающими окнами. Кроме того, они могут пользоваться браузерами, которые вообще не поддерживают JavaScript. В соответствии с TheCounter.com, 6% пользователей не имеют JavaScript. W3Schools.com говорит о 8%.

В большинстве случаев JavaScript использовать совсем не обязательно. Конечно, бывают ситуации, когда JavaScript может улучшить работу пользователя. Один из примеров — валидация данных форм.

Заметьте, это не означает, что вы должны прекратить использование JavaScript. Это означает лишь то, что вы должны избегать изготовления сайтов, чья работа целиком зависит от JavaScript.

То же самое можно сказать и о cookie. Используйте cookie так, чтобы сайт мог продолжать работать, даже в случае непринятия их пользователем.

8. URL-ы

Этот раздел повествует не о веб-стандартах или доступности, а находится он здесь из-за того, что ваша работа с URL может оказать большой эффект на индексацию сайта поисковиками, а также на удобство использования его вашими посетителями.

Поисковый паук не пойдет по ссылке, которая оканчивается строкой запроса. Такой тип ссылок часто можно увидеть на динамических веб-сайтах, берущих свое содержимое из базы данных, и выглядят они примерно так:

http://example.com/products.asp?item=34627393474632&id=4344

Самый простой способ построения URL, который лучше подходит, как для поисковиков, так и для людей — маскировка его под структуру директорий. Предыдущий пример может выглядеть так:

http://example.com/products/item/34627393474632/id/4344/

Веб-сервер интерпретирует новый URL и конвертирует его к начальному состоянию, дополняя строкой запроса. В конце этого раздела будут приведены дополнительные ссылки о том, как это сделать.

Еще лучшим, правда и более сложным способом представления URL, является полная перепись видимой части ссылки в формат, понятный человеку:

http://example.com/products/flowers/tulips/

Преимущества использования таких ссылок в том, что поисковые системы будут индексировать сайт лучше, людям станет проще понимать URL-ы, а также вы избавляетесь от зависимости от какой-то конкретной серверной технологии. Так как подобные ссылки не содержат специфичных файловых расширений, типа .asp, .cf, .cgi или .jsp, вам будет легче сменить язык программирования, если в этом возникнет необходимость.

Если вы захотите использовать строки запросов в своих ссылках, важно помнить о необходимости кодирования всех амперсандов, &, в их HTML-сущности — &amp;. Если вы не будете этого делать, то некоторые браузеры будут, как и должны, считать амперсанд началом HTML-сущности. А если текст, следующий сразу за амперсандом, будет совпадать с какой-то сущностью, браузер конвертирует ссылку, и это испортит строку запроса.

Другой вопрос, на который стоит обратить внимание: на большинстве сайтов использовать поддомен www необязательно, то есть достаточно писать http://example.com/ вместо http://www.example.com/. Больше информации об этом вы сможете найти на сайте no-www.org. В любом случае, используете вы поддомен www или нет, хорошей идеей будет такая настройка вашего сервера, чтобы он перенаправлял весь траффик с http://example.com/ и http://www.example.com/ на один URI.

Дополнительное чтение:

9. Ссылки

Подборка рекомендуемых книг, веб-сайтов и листов рассылки.

Книги

CSS

Общая информация по веб-разработке

HTML

Доступность

Веб-стандарты

XHTML

10. Словарь терминов

Доступность (Accessibility)
Доступный сайт доступен и может использоваться всеми, не важно какое программное и материальное обеспечение они используют, а также вне зависимости от способа, который они используют для навигации по сайту.
CSS (Каскадные таблицы стилей)
Правила, описывающие как документ должен выглядеть.
HTML (Гипертекстовый язык разметки)
Используется для разметки структуры документа.
Представление (Presentation)
Вид (или звук) веб-сайта.
Структура (Structure)
Обязательные части документа вместе с логической разметкой содержимого документа.
Разметка (Markup)
Размечая документ, вы придаёте ему и его содержимому структуру и смысл. В Сети, для разметки используются HTML и XHTML.
Валидация (Validation)
Валидация — это процесс, контролирующий подчиняется ли документ правилам используемого языка. Вы можете сравнить это с проверкой текста на грамматические ошибки.
W3C (World Wide Web Консорциум)
Организация, разрабатывающая спецификации, указания и инструменты для Сети.
Веб-стандарты (Web standards)
Веб-стандарты — это технологии, установленные консорциумом W3C и другими организациями, используемые для создания и интерпретации веб-контента (содержимого веб-сайтов). Эти технологии разработаны для опубликованных в Сети документов, ориентированных на будущее, и предназначены для того, чтобы сделать эти документы как можно доступнее.
XHTML (Расширяемый гипертекстовый язык разметки)
Переработанный HTML, следующий правилам XML.
XML (Расширяемый язык разметки)
Язык разметки, выглядящий как HTML, но позволяющий автору описывать данные, определяя подходящие для этого элементы.

Нравится статья? Digg it или Del.icio.us it

Комментарии, вопросы или предложения? Пожалуйста дайте мне знать.

© Copyright 2004–2006 Roger Johansson