Главная / HTML / XHTML Верстка / Валидная верстка /

Валидная верстка XHTML Strict 1.0

Пятница, 21 Январь 2011

Понятие валидная верстка часто можно встретить в требованиях заказчика к верстке, подобного требования пугаются большинство начинающих верстальщиков (я не был исключением). Исправление всех этих ошибок о которых сообщает валидатор, просто ужасает когда впервые с этим сталкиваешся... Но ошибок не будет и верстка будет валидна только в том случае если верстальщик правильно формирует структуру HTML документа, со всеми ее обязательными дескрипторами и тп. В этом посте я постараюсь дать основные понятия из которых состоит термин валидная верстка, и как обычно привести пример.

Для начала немного об истории языка разметки HTML. Как известно создателем языка HTML и протокола HTTP является Тим Бернерс-Ли (Tim-Berners-Lee). Работая в одном из шведских научно-исследовательских институтов, он хотел создать несложный язык разметки для специалистов института, который бы позволял им публиковать свои научные статьи в интернете.

В основу языка HTML Бернерс-Ли положил стандартный обобщенный язык разметки (SGML - Standard Generalized Markup Language), международный стандарт разметки документов, используемый для публикации статей в области физики. В основе языка SGML заложена концепция раздельного рассмотрения структуры документа и его представления. Для HTML же не характерно столь строгое разделение структуры и представления, как для SGML. Из-за этого по мере развития HTML и перерастания Интернета в коммерческую сеть, Web-разработчикам требовалось все больше и больше инструментов, для создания превлекательных документов.

В ответ на эти запросы, компании разработчики Web-браузеров, создали новые нестандартные HTML-дескрипторы, которые содержали в себе информацию о представлении, тем самым нарушив принцип изначально заложенный в SGML - раздельное рассмотрение структуры и отображения документа. К 1996 году многие Web-разработчики уже отмечали тот факт, что HTML-стандарты приобретали неуправляемый характер. Для решения этой стихийной проблемы, был сформирован консорциум производителей ПО для WWW, призванием которого была стабилизация хотя бы одного из стандартов. В результате появился стандарт консорциума HTML 3.2

До настоящего времени язык HTML существует в виде таких стандартов, включая последний HTML5 (который в данный момент еще в стадии рекомендации W3C):

HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
XHTML 1.0 (Frameset)
XHTML 1.0 (Transitional)
XHTML 1.0 (Strict)
XHTML 1.1 (Module-based)
XHTML Basic
XHTML Mobile Profile
XHTML 2
HTML 5

С появлением стандарта HTML 3.2 в котором были объеденены во едино в коде HTML как структура так и описание ее представления, появилась большая проблема - поддержка HTML кода и внесение изменеий в представление, что бы убедится в этом можете посмотреть на код примера HTML 3.2 :

 
  <li>
    <font size="+1" face="Arial, Helvetica" family="sans-serif" color="#000000">
      <p>
        <a name="do"></a>
        <b>What does <i>Stay In Touch</i> do?</b>
      </p>
    </font>
  </li>
  ...

А если учесть что на странице таких элементов сотни, и таких страниц несколько сотен, то верстальщику прийдется несладко для того что бы поменять шрифт какой-то ссылки или параграфа.

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

 
  <li>
    <p>
      <a name="do"></a>
      <b>What does <span>Stay In Touch</span> do?</b>
    </p>
  </li>
  ...

 
li p{
  font-family:Arial, Helvetica, sans-serif;
  color:#000000;
  font-size:14px;
}

Главная цель всего этого виделась очень четко: для того что бы HTML документ был валидным (соостветствовал стандарту), в нем не должно присутствовать кода представления.

Время не стояло на месте и требовало от Web-разработчиков все более сложных реализаций и структуры HTML документа. В связи с чем появился XHTML 1.0 (Extensible Hypertext Markup Language) расширяемый язык разметки гипертекста, является первой спецификацией гибрида, созданного на основе HTML и XML, Создатели HTML хотели видеть его языком разметки нового поколения, сочетающего в себе стандарт HTML и расширяемость XML. При создании этого языка предпологалось использовать его в XML-совместимых средах, а также со стандартными пользовательскими браузерами HTML 4.01. О нем и пойдет речь в этой статье, когда будет приводится пример создания валидной верстки XHTML Strict 1.0.

Из списка ветвей разрабатываемых и принятых стандартов XHTML документа, выделяется семь "подветвей" XHTML:

XHTML 1.0 (Frameset) - Фрэймовый используется, если необходимо разделить окно браузера на несколько фрэймов.
XHTML 1.0 (Transitional) - Переходный предназначен для лёгкой миграции из HTML 3.2 и для тех, кто использует инлайн-фрэймы.
XHTML 1.0 (Strict) - Строгий полностью отделяет содержание документа от оформления (которое теперь задаётся только через CSS), многие атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей.
XHTML 1.1 (Module-based) - Модульный авторы могут импортировать дополнительные свойства в их разметку.
XHTML Basic - Основной специальная облегчённая версия XHTML для устройств, которые не могут использовать полный набор элементов XHTML — в основном используется в миниатюрных устройствах, таких как мобильные телефоны. Подразумевается, что он заменит WML и C-HTML.
XHTML Mobile Profile - мобильного профиля основанный на XHTML Basic, добавляет специфические элементы для мобильных телефонов.
XHTML 2 - Разработка прекращена, команда разработчиков переведена на создание стандарта HTML5.

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

Вот наиболее распространённые типы DTD для XHTML:

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 1.0 Transitional

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Mobile

 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

XHTML 1.1

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

В данной статье будет рассмотрен пример валидной верстки XHTML шаблона, со строгой (Strict) структурой дескрипторов, то-есть в строгом соответствии с W3C стандартом. Для этого будем использовать вот этот DOCTYPE:

XHTML 1.0 Strict

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

И так что же такое строгое соответствие W3C стандартам? По сути это правила записи дескрипторов, которые изменены в Strict 1.0, и требуют строгого их соблюдения.

В данной таблице приводится список дескрипторов которые разрешены/не разрешены в XHTML 1.0, ознакомтесь с этой таблицей, что бы иметь об этом представление HTML 4.01 / XHTML 1.0 Справочник

Наиболее частыми ошибками в XHTML-разметке являются:

Незакрытые элементы (XHTML, в отличие от HTML, требует закрытия всех элементов, в том числе не имеющих закрывающего тега, как, например, <br />).
Отсутствие альтернативных текстов для изображений (достигающийся применением атрибута alt, который помогает сделать документы доступнее для устройств, которые не в состоянии отображать изображения, или предназначенных для слабовидящих людей).
Присутствие текста непосредственно в теге документа (должен быть объявлен блочный элемент, внутрь которого следует помещать содержимое) Вот так <p>Текст</;p>.
Вложение блочных элементов внутрь инлайновых (внутристрочных) (например, блочные элементы <div> или <p> не могут быть вложены внутрь инлайновых элементов <a>, <span>, <em> и так далее).
Пренебрежение заключением значений атрибутов в кавычки (<a href=http://example.com/> вместо <a href="http://example.com/">).
Неправильное вложение элементов (конструкции вида <strong> <em> </strong> </em>).
Неправильное использование ссылок-мнемоник (например, & вместо &)
Написание тегов и/или атрибутов прописными буквами (<DIV STYLE="…"> вместо <div style="...">).
Задание в теге <!DOCTYPE …> относительного пути к DTD-файлу, скопированного с сайта www.w3.org ("DTD/xhtml11.dtd" вместо "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd").

Это неполный список, но дающий общее представление о часто допускаемых ошибках при составлении XHTML-документов

И так приступаем к верстке валидного XHTML шаблона-примера. Это будет Шаблон с верхним меню, левой колонкой для текста, правой колонкой с изображением (баннером) и футером с копирайтом. Ниже приведена графическая схема-макет данного шаблона.

Посмотреть Demo

Для начала сформируем основную структуру HTML:

 
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta content="" name="author"/>
  <meta content="" name="title"/>
  <meta content="" name="keywords"/>
  <meta content="" name="description"/>
  <title></title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
// <![CDATA[
    //Some Javascript code
// ]]>
  </script>
</head>
 
  <body>
    <div class="wrapper">
      <div class="header"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="footer"></div>
    </div>
  </body>
 
</html>

Обратите внимание у тега <javascript> отсутствует атрибут language="javascript", так как он запрещен в XHTML Strict 1.0, также если вы пишете javascript сценарий в самом документе, а не подгружаете скрипт из файла:

 
<script type="text/javascript" src="./script.js"></script>

То следует обрамлять код сценария в // <![CDATA[ ... // ]]>, для того что бы код сценария javascript не учитывался при валидации документа. И еще одно - дескриптор <script> в XHTML не может быть самозакрывающимся, этот тег обязательно должен иметь загрывающий тег </script>.

UPD: W3C рекомендует указывать в документах XHTML Strict 1.0 версию XML перед DOCTYPE:

<?xml version="1.0" encoding="windows-1251"?>

Однако IE6 как известно не поддерживает веб стандарты, и поэтому обнаружив в документе этот дескриптор, отображает документ HTML как не валидный - в режиме обратной совместимости. Вообще указание версии XML в документе XHTML Strict 1.0 является не обязательным, поэтому если вы еще желаете обеспечивать поддержку вашей верстки IE6, следует отказатся от данной рекомендации W3C и пропустить этот дескриптор оставив лишь обьявление DOCTYPE. Иначе же первый глюк с которым вы столкнетесь при отображениии вашей верстки - это неправильный расчет ширины родительского блока с плавающими дочерними. Поэтому выбор за вами или стандарты или IE6, я выбираю стандарты!

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

body
.wrapper
.header
.left
.right
.footer

Это стили для основных блоков:

 
html, body {
  width:100%;
  padding:0;
  margin:0;
  font:12px Arial, Helvetica, sans-serif;
  color:#333;
  background:#f1f2e8;
  text-align:center;
  padding-bottom:15px;
}
.wrapper{
  width:950px;
  background:#fff;
  margin:30px auto 0 auto;
  padding:30px 0 30px 0;
  text-align:left;
}
.header, .footer{width:890px;}
.header{
  height:30px;
  border-bottom:1px solid #ccc;
  margin:0 30px;
}
.left{
  float:left;
  width:620px;
  padding:30px 0 30px 30px;
}
.right{
  float:right;
  width:240px;
  padding:30px 30px 30px 0;
}
.footer{clear:both; border-top:1px solid #ccc; margin:0 30px;}

Далее добавляем ссылки для верхнего меню (в контейнер с классом header), заголовок для текста (в блок с классом left) и под него сам текст, разбивая его на параграфы (дескриптор <p>). Так же встраиваем баннер в правый блок (в контейнер с классом right), и добавляем копирайт в футер (в контейнер с классом footer).

В итоге структура документа XHTML будет выглядет следующим образом:

 
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta content="" name="author"/>
  <meta content="" name="title"/>
  <meta content="" name="keywords"/>
  <meta content="" name="description"/>
  <title></title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
  // <![CDATA[
    //Some Javascript code
  // ]]>
  </script>
</head>
 
  <body>
    <div class="wrapper">
      <div class="header">
        <a href="#">Главная</a>
        <a href="#">О сайте</a>
        <a href="#">Карта сайта</a>
        <a href="#">Статьи</a>
        <a href="#">Разделы</a>
        <a href="#">Контакты</a>
      </div>
      <div class="left" id="wr">
        <h1>Валидная верстка XHTML Strict 1.0</h1>
        <p>Lorem ipsum dolor sit amet ...</p>
      </div>
      <div class="right">
<a target="_blank" href="http://www.changemoney.me/partner.asp?pid=4540" style="display: block; height: 400px; width: 240px; margin: 0 auto;">
  <img alt="" width="240" height="400" src="https://www.changemoney.me//images/banners/240%D1%85400_2.gif"/>
</a>
      </div>
      <div class="footer">
        <p>
        &copy;  
        <a target="_blank" title="www.cleverscript.ru" href="http://cleverscript.ru">www.cleverscript.ru</a>
        </p>
      </div>
    </div>
 
  </body>
 
</html>

Следующим шагом будет добавление CSS стилей для добавленных элементов, и выглядят они так:

 
/*** left ***/
.left h1{ padding:0 0 20px 0; font-size:24px;}
.left p{ padding:0 0 15px 0;}
 
/*** header links ***/
.header a{ padding: 0 30px 0 0;}
 
/*** footer ***/
.footer p{ padding-top:12px;}
.footer p a{text-decoration:underline;}

Еще при верстке я использую глобальный сброс стилей который добавляется в самый верх файла стилей CSS:

 
@charset "utf-8";
/******************************************************
  FRAMEWORK THE BASIC
******************************************************/
* {margin:0; padding:0; outline:0;}
em{font-style: italic;}
strong{font-weight: bold;}
table{border-collapse: collapse; border-spacing: 0px; width: 100%;}
td {vertical-align: top;}
ol li{list-style-position:inside; list-style-type:decimal;}
caption, th{text-align: left;}
q:before, q:after{content: '';}
abbr, acronym {font-variant: normal;}
sup {vertical-align: text-top; }
sub {vertical-align: text-bottom; }
label {cursor: pointer;}
input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit;}
legend {color: #000;}
label {margin:0 0 0 3px;}
img {border: 0px;}
li{list-style:none;}
/***  FOR ALL  ***/
a {text-decoration:none; color:#666666;}
a:hover {text-decoration:underline;}

На этом все, валидная верстка готова, проверить ее на валидность можно здесть Markup Validation Service, а посмотреть пример можно по этой ссылке Валидная верстка XHTML Strict 1.0.

Скачать пример : Валидная верстка XHTML Strict 1.0

Видео по теме Веб стандартов:

Ссылки по теме WEB стандартов:

Разработка с Веб-Стандартами
wikipedia - XHTML

PS. Читайте последние записи RSS Подписка на RSS

Метки:

Валидная верстка XHTML Strict 1.0

Похожие статьи:

Комментарии

Добавить комментарий