Валидная верстка 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 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:

 

 

Для того что бы использовать определенный стандарт, и дкумент был валидным по отношению к этому стандарту, следует указывать тип документа 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-документов

 

И так приступаем к верстке валидного 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, я выбираю стандарты!

 

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

 

 

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

 

 
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

 

Метки:

Комментарии 

 
anonim Вторник, 25 Январь 2011

Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work!

 

 
 
anonim Вторник, 25 Январь 2011

I am glad that this benefit!

 

 
 
anonim Вторник, 24 Май 2011

Спасибо большое, ваша статья мне очень помогла. Вы даже не представляете как она меня выручила!!!

 

 
 
anonim Четверг, 26 Май 2011

>>> Oleg
Рад за вас, интересно было бы узнать чем именно и как использовали.

 

 
 
anonim Среда, 08 Июнь 2011

Здравствуйте! а повлияет ли на отображение страницы отсутствие html xmlns="http://www.w3.org/1999/xhtml" ?
На сайтах Яндекса, и многих других новых сайтов не встречаю этого...

 

 
 
anonim Понедельник, 20 Июнь 2011

А пробовали сначало проверить валидность Яндекса? Повлияет если будет не по стандарту

 

 
 
anonim Четверг, 07 Июль 2011

Тема Сontent-type не раскрыта. А без нее непонятно, зачем морочиться с XML-веллформностью и ронять IE6 в квирксмод -прологом, если страница будет скорее всего парситься как text/html, а значит, никаких преимуществ XML (интеграции с другими неймспейсами, XPath-выборки и т.п.) мы не получим. Если не видно разницы, зачем лишние телодвижения? А строгая валидность по DTD (все указанные пункты, кроме регистра и бесполезных в text/html многострадальны х слешей) и в HTML 4.01 Strict еcть...

 

 
 
meirzhan Воскресенье, 22 Январь 2017

Здравствуйте! а повлияет ли на отображение страницы отсутствие html xmlns="http://www.w3.org/1999/xhtml" ?
На сайтах Яндекса, и многих других новых сайтов не встречаю этого...

 

 
 
cleverscript Среда, 31 Май 2017

meirzhan, используйте уже HTML5 для верстки своих проектов.

 

 

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