В этом уроке вы узнаете, что такое Doctype html и зачем он нужен на странице.
Разберем причину его появления, все примеры шаблонов, а также рекомендации консорциума W3C по использованию.
А в конце дам описание всех атрибутов этой декларации и покажу, какую версию сейчас лучше использовать.
Как вы знаете, документ html состоит из символов.
Некоторые из них составляют текстовое содержимое. А другие символы складываются в определенные конструкции (разметку).
Все это справедливо для всего документа, кроме самой верхней строки — объявления доктайп.
Элемент doctype html — что это такое и для чего нужен
DOCTYPE (Document Type Declaration или DTD) — это инструкция, которая говорит браузеру, какой тип текущего документа используется и на каком языке разметки он сверстан.
Само слово переводится на русский, как объявление типа документа.
За всю историю развития HTML было разработано большое количество стандартов. Они говорят браузеру, как обрабатывать код и выводить страницу на монитор.
Поэтому важно правильно задать стандарт сайта, а именно для HTML 5.
<!DOCTYPE html>Тут не имеет значения, в каком регистре вы написали объявление. Главное, чтобы оно шло самым первым на странице.
Правильный вариант записи Doctype для html 5 на странице
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="utf-8" />
</head>
<body>
<p>Основной контент страницы</p>
</body>
</html>Несмотря на угловые скобки, данное объявление ни к тексту, ни к элементу разметки не относится.
Как только браузер открывает страницу и видит это объявление, он понимает, что страница разработана на HTML 5 и ее нужно обрабатывать в соответствии с этим стандартом.
Ниже мы еще рассмотрим другие стандарты.
Они имеют довольно длинные надписи, которые тяжело запомнить.
Вот этим и отличается HTML 5 от других версий.
В нем все оптимизированно. И вместо длинных надписей и ссылок на стандарты, мы просто вводим такую короткую запись.
Причины появления декларации Доктайп в HTML
В те времена, когда html был единственным языком, мы не прописывали никакие инструкции. Тогда просто в качестве объявления вставляли тег html, чтобы браузер определил, что это такое.
А дальше между этими элементами писали другие теги html для страницы.
История объявления doctype уходит в начало 90-х. Тогда к выходу готовилась новая версия браузера Internet Explorer 6 версии.
На то время со стандартами языка все было плохо.
Разработчики браузеров их не соблюдали. А создатели сайтов отвечали им взаимностью.
Каждый браузер работал по своим собственным, ни с чем не совместимыми стандартами.
Консорциум что-то выпускал, но к нему никто не прислушивался.
Разработчики IE поняли, что так дальше продолжаться не может. И имеет смысл сделать так, чтобы новая версия браузера по возможности соответствовала всем стандартам.
Однако выяснилось, что выпустить новую версию, соответствующую стандартам, так просто не получится.
Дело в том, что на многих сайтах того времени структура html документа не соответствовала стандартам. Такие страницы просто не стали бы правильно отображаться в новом браузере.
Перед разработчиками Internet Explorer стала такая проблема, как несовместимость нового браузера и старых веб-страниц.
Они долго бились над этой проблемой до тех пор, пока один специалист по имени Тантек Челик не предложил следующее.
Tantek Çelik Турецко-американский ученый-компьютерщик
А давайте наш браузер будет иметь два режима — соответствие и несоответствие стандартам. И отображать страницу либо в одном, либо в другом режиме.
Но как же браузер догадается, в каком режиме ему отображать страницу?
В таком случае, он будет смотреть на объявление <!Doctype>.
Если в начале документа он его находит, значит, что разработчик был грамотный, и документ отображается по стандартам.
И наоборот.
Если доктайпа нет, то документ будет отображаться, как и раньше.
Благодаря всему этому был создан так называемый переключатель режимов. На данный момент так ведут себя все современные браузеры.
Браузер переключается в режим стандартов если видит строку doctype. В другом же случае он переключается в режим обратной совместимости со старыми версиями языка.
Нам же нужно, чтобы документ отображался в режиме стандартов. Потому что в режиме обратной совместимости может слетать часть страницы в html и css.
Шаблоны Doctype — все виды с правильными примерами
За прошедшее время вышло несколько версий языка html. На данный момент консорциум рекомендует использовать HTML 5. Однако есть и другие типы. И ниже мы их все рассмотрим.
Направления
Некоторые версии языков HTML и XHTML имеют разные направления:
- Strict (строгое) — все нежелательные элементы и атрибуты запрещены. Здесь нельзя допускать ошибки. Например, незакрытый тег, пропущенный слэш и так далее. В итоге, если будут ошибки, то страница будет отображаться неправильно.
- Transitional (переходное) — многие ошибки разрешены. Оно предназначено для тех, кто не хочет заморачиваться со всей этой валидацией. Здесь можно допускать какие-то ошибки, потому что они никак не повлияют на страницу.
- Frameset (вставка фрэймов) — позволяет вставлять на страницу фрэймы. Сейчас это практически не используется. Однако раньше мы могли в одну страницу вложить дополнительно еще несколько страниц. Например, разделить экран на две части и показывать сразу две страницы.
Объявления типа документа (X)HTML
| Вид | Пример |
|---|---|
| HTML 5 и выше | <!DOCTYPE html> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| 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.1 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> |
| XHTML Basic 1.1 | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.1//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd»> |
Инструкции типа документа MathML
| Вид | Примеры |
|---|---|
| MathML 2.0 — DTD | <!DOCTYPE math PUBLIC «-//W3C//DTD MathML 2.0//EN» «http://www.w3.org/Math/DTD/mathml2/mathml2.dtd»> |
| MathML 1.01 — DTD | <!DOCTYPE math SYSTEM «http://www.w3.org/Math/DTD/mathml1/mathml.dtd»> |
Для составных документов
| Вид | Примеры |
|---|---|
| XHTML + MathML + SVG — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
| XHTML + MathML + SVG профиль (XHTML в качестве основного языка) — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
| XHTML + MathML + SVG профиль (с использованием SVG в качестве хоста) — DTD | <!DOCTYPE svg:svg PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
Doctype SVG Public
Помимо специфики обработки (X)HTML, объявления доктайп в языках XML полезны только для инструкции именованных сущностей и облегчения проверки документов на основе DTD.
Поэтому во многих языках XML такие инструкции не обязательны.
Приведенный ниже список можно использовать только в том случае, если вам действительно нужно сделать объявление для таких типов документов.
| Тип | Пример |
|---|---|
| SVG 1.1 Full — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd»> |
| SVG 1.0 — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.0//EN» «http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd»> |
| SVG 1.1 Basic — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Basic//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd»> |
| SVG 1.1 Tiny — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Tiny//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd»> |
Устаревшие объявления
Эти инструкции только для общего понимания. Вместо них лучше использовать более новые версии.
| Вид | Пример |
|---|---|
| HTML 2.0 — DTD | <!DOCTYPE html PUBLIC «-//IETF//DTD HTML 2.0//EN»> |
| HTML 3.2 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»> |
| XHTML Basic 1.0 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.0//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd»> |
Структура Doctype html — все параметры с описанием
Ниже более подробно рассмотрим структуру самого объявления. Ведь как вы уже заметили, в более поздних версиях объявлений идут многочисленные атрибуты.
Синтаксис
<!DOCTYPE [Тип корневого элемента] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">Атрибуты с пояснениями
Объявление начинается с восклицательного знака и слова doctype. Далее идут следующие компоненты.
Тип корневого элемента — в языке HTML им является сам тег html.
Публичность — объект является открытым или закрытым.
Ставим PUBLIC если формальные правила являются общедоступными. Если объект является системным ресурсом (например, локальный файл), то ставим значение SYSTEM.
Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO).
Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован.
Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD.
Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта.
Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD. Содержит формальное описание правил языка.
Например:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Кстати, давайте наберем его в браузере и посмотрим, что же он из себя представляет.
Как видим, в нем довольно сложно разобраться. Но нам это и не нужно.
Файл .dtd предназначен прежде всего для того, чтобы его читал и обрабатывал браузер.
Этот файл содержит в частности следующую информацию.
Объявление типов элементов — это перечень допустимых типов элементов, которые применяются в данной версии языка.
Также присутствует модель содержания каждого из элементов. То есть, перечисление элементов, которые могут быть вложены в другие элементы.
Например, в элемент html могут быть вложены элементы head и body.
Объявление атрибутов — это перечень допустимых атрибутов, их значений и типы элементов.
Какую версию Доктайп лучше использовать сейчас?
В общем, версий объявлений много. Однако многие страницы используют именно такую версию на HTML 5.
<!DOCTYPE html>Почему именно ее?
При запуске html документа, браузер в первую очередь считывает описание dtd с сайта консорциума W3C. Затем он отображает документ в соответствии с правилами указанного файла dtd.
Однако так думали только разработчики стандарта W3C.
Браузеры в свою очередь делать этого не стали и никогда не будут. Единственное, на что они смотрят, так это на наличие или отсутствие объявления doctype.
В html 5 такая форма инструкции введена, как стандарт. Вот ее рекомендуется использовать.
Частые вопросы
Что будет если не указать DOCTYPE?
На странице без такого объявления половина оформления просто исчезнет. Причем это произойдет во многих браузерах. Например, не будет отображаться меню или другие элементы. Поэтому всегда нужно прописывать такую инструкцию.
Для какого тега элемент DOCTYPE выступает родителем?
Ни для какого. У него нет дочерних элементов, поскольку это всего лишь инструкция для браузера, которая не является разметкой страницы.
У меня возникает синтаксическая ошибка в DOCTYPE html
Посмотрите, чтобы объявление стояло на самой первой строчке и перед ним ничего не было. Сверьте со стандартом правильное написание. Также возможно, что html страницу вы выводите на Python. Но напрямую ее нельзя вывести. Поэтому используйте библиотеку шаблонов.
I get the following syntax error in Firebug and I don’t get what’s it:
> syntax error [Break on this error]
> <!DOCTYPE html PUBLIC "-//W3C//DTDXHT...org/TR/xhtml1/DTD/xhtml1-strict.dtd">n
Is it because of the final «n» at the end ?
thanks
ps. I’ve just realized if I remove all scripts, I don’t get that error. For example, if I remove these lines, I don’t get it. If I add another script I get it again, so it doesn’t depend on the script itself.
<script type="text/JavaScript" src="<?php echo $base_url; ?>sites/all/themes/bluemarine/js/main.js"></script>
CODE:
<?php
// $Id: page.tpl.php,v 1.28.2.1 2009/04/30 00:13:31 goba Exp $
?>
<!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" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/JavaScript" src="<?php echo $base_url; ?>sites/all/themes/bluemarine/js/main.js"></script>
<!--<script type="text/JavaScript" src="<?php echo $base_url; ?>sites/all/themes/bluemarine/js/griddy-min.js"></script>
-->
</head>
<body>...
|
Floody 0 / 0 / 0 Регистрация: 27.04.2010 Сообщений: 9 |
||||
|
1 |
||||
|
30.04.2010, 00:34. Показов 10928. Ответов 3 Метки нет (Все метки)
Вот код (вернее его начало):
…..и т.п. Валидатор на w3c возмущается про ошибку: Validation Output: 1 Error 1. Error Line 1, Column 1: end of document in prolog <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» Что происходит? Еще вчера все это не вызывало у него же нареканий
__________________
0 |
|
Programming Эксперт 94731 / 64177 / 26122 Регистрация: 12.04.2006 Сообщений: 116,782 |
30.04.2010, 00:34 |
|
Ответы с готовыми решениями: !DOCTYPE
DOCTYPE html Doctype и таблицы 3 |
<!DOCTYPE html>|
lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522 |
||||
|
30.04.2010, 02:02 |
2 |
|||
|
используй этот
Добавлено через 47 секунд
0 |
|
cooperOk 60 / 60 / 6 Регистрация: 12.11.2009 Сообщений: 169 |
||||
|
30.04.2010, 11:17 |
3 |
|||
|
Ну вообще доктайп нормальный… Единственное что у вас может вызвать ошибку это не закрытые теги meta. По стандарту xhtml все теги должны быть закрыты, даже одинарные. В вашем случае должно быть такая запись
0 |
|
Floody 0 / 0 / 0 Регистрация: 27.04.2010 Сообщений: 9 |
||||||||
|
30.04.2010, 12:27 [ТС] |
4 |
|||||||
|
cooperOk, спасибо, что указали на ошибку — я просто вчера после часа борьбы и напившись от огорчения водкой скопировала все немного не оттуда. На самом деле код у файла, который вчера лежал на сервере и проверялся по линку, вот такой:
Он и вчера был такой и сегодня остался… так вот сегодня после проверки я получаю сообщение «This document was successfully checked as XHTML 1.0 Transitional!» Ничего не поняла, но проблема исчезла, поэтому всем спасибо за ответы Добавлено через 1 минуту
используй этот
Добавлено через 47 секунд В след.раз в случае возникновения проблемы попробую и такой поюзать, thx
0 |
|
IT_Exp Эксперт 87844 / 49110 / 22898 Регистрация: 17.06.2006 Сообщений: 92,604 |
30.04.2010, 12:27 |
|
Помогаю со студенческими работами здесь Выбор doctype !DOCTYPE html DOCTYPE и CSS Mozilla & DOCTYPE Искать еще темы с ответами Или воспользуйтесь поиском по форуму: 4 |
Большинство ошибок, возникающих при валидации кода можно свести к набору типовых вариантов, зная которые легко понять, на что «намекает» валидатор. В качестве образца возьмем расширение HTML Validator для браузера Firefox, предназначенное для проверки кода и рассмотрим список ошибок и замечаний по коду.
Посмотреть все возможные сообщения валидатора можно по адресу http://www.htmlpedia.org/wiki/HTML_Tidy, далее приведены основные ошибки с их описанием и решением. Зеленым цветом выделен корректный вариант, другой цвет используется для обозначения ошибки.
Notice: entity «…» doesn’t end in «;»
Это замечание возникает при использовании спецсимволов вроде < при отсутствии на конце точки с запятой.
 
Решение
Добавьте в конце спецсимвола точку с запятой.
Notice: numeric character reference «…» doesn’t end in ‘;’
Возникает при использовании числовых спецсимволов вроде — когда в конце забыли добавить точку с запятой.
™
™
Решение
Добавьте в конце спецсимвола точку с запятой.
unescaped & or unknown entity «&…»
Символ амперсанда (&) часто применяется в адресах ссылок (атрибут href тега <a>), поскольку он разделяет несколько параметров. Однако амперсанд зарезервирован для спецсимволов вроде поэтому в ссылках необходимо указывать & вместо &.
<a href=»http://www.htmlbook.ru/content/?id=30&text=1″>Ссылка</a>
<a href=»http://www.htmlbook.ru/content/?id=30&text=1″>Ссылка</a>
Решение
Замените & на &.
missing </…>
Отсутствует обязательный закрывающий тег.
<head><title>Заголовок</title></head>
<head><title>Заголовок</head>
Решение
Добавьте закрывающий тег.
missing </aaa> before <bbb>
Ошибка возникает при нарушении порядка тегов, когда блочный тег располагается внутри встроенного. В данном случае блочный тег <bbb> находится внутри встроенного тега <aaa>.
<p><span>Текст</span></p>
<span><p>Текст</p></span>
Решение
Поменяйте расположение тегов — перенесите встроенный тег внутрь блочного.
discarding unexpected <…>
Обнаружен открывающий или закрывающий тег, у которого нет пары. Подобная ошибка возникает в двух случаях: есть открывающий тег, но нет закрывающего; имеется закрывающий тег, которому не соответствует открывающий.
<div><div>Текст</div></div>
<div>Текст</div></div>
<div><div>Текст</div>
Решение
В зависимости от ситуации добавьте или удалите открывающий или закрывающий тег.
Notice: nested emphasis …
Контейнер содержит аналогичный тег физического форматирования, который не должен повторяться.
<p><b>Текст</b></p>
<p><b><b>Текст</b></b></p>
Решение
Удалите один из тегов.
replacing unexpected … by </…>
Закрывающий тег не соответствует открывающему тегу.
<p><b>Текст</b></p>
<p><b>Текст</span></p>
Решение
Замените открывающий или закрывающий тег на парный.
… isn’t allowed in <…> elements
Обнаружены теги, которые запрещено размещать внутри указанных элементов.
<head><title>Заголовок</title></head>
<head><body>Текст</body></head>
Решение
Переместите HTML-элемент в правильный раздел.
missing <…>
Нет обязательного тега в структуре элементов. Ошибка, к примеру, может возникнуть при формировании таблицы, когда пропущен тег <tr> и сразу же после <table> следует <td>.
<ol><li>Список</li></ol>
<ol>Список</ol>
Решение
Проверить правильность вложения тегов в текущем элементе и наличие обязательных элементов.
Notice: inserting implicit <…>
Сообщение возникает из-за предыдущей ошибки на странице.
Решение
Исправьте предыдущие ошибки.
Insert missing <title> element
В коде не вставлен тег <title>.
<head><title>Заголовок</title></head>
<head></head>
Решение
Добавьте контейнер <title>.
Multiple <frameset> elements
Тег <frameset> используется в документе более одного раза без вложения. Допускается вставлять несколько элементов <frameset>, но вложенных один в другой.
<frameset …><frame …>
<frameset …><frame …></frameset>
</frameset>
<frameset …><frame …></frameset>
<frameset …><frame …></frameset>
Решение
Используйте вложенные теги <frameset>.
<…> is not approved by W3C
Указанный тег не входит в спецификацию HTML.
<span style=»white-space: nowrap;»>текст без переносов</span>
<nobr>текст без переносов</nobr>
Решение
Удалите тег или замените его подходящим эквивалентом.
Error: <…> is not recognized!
Тег не распознан и не входит в спецификацию HTML.
Правильно: <p>Текст</p>
Неверно: <p><adres>Текст</adres></p>
Решение
Удалите неизвестный тег.
Trimming Empty Tag
Контейнер пустой или содержит только пробел.
<p>Текст</p>
<p> </p>
<p></p>
Решение
Удалите тег или добавьте внутрь контейнера текст.
<a> is probably intended as </a>
В закрывающем теге <a> отсутствует слэш.
<a href=»http://htmlbook.ru»>Ссылка на сайт</a>
<a href=»http://htmlbook.ru»>Ссылка на сайт<a>
Решение
Добавьте слэш к закрывающему тегу.
… shouldn’t be nested
Некоторые теги вроде <form> не могут содержать сами себя. Это сообщение также возникает из-за предыдущей ошибки.
<form action=»gb.php» name=»guestbook»></form>
<form action=»gb2.php» name=»guestbook2″></form>
<form action=»gb.php» name=»guestbook»>
<form action=»gb2.php» name=»guestbook2″></form>
</form>
Решение
Удалите вложенные теги или исправьте предыдущую ошибку.
Text found after closing </body>-tag
Теги или текст добавляется после закрывающего тега </body>.
<html>
<head><title>Заголовок</title></head>
<body><p>Основной текст</p></body>
</html>
<html>
<head><title>Заголовок</title></head>
<body><p>Основной текст</p></body>
<b>Привет!</b>
</html>
Решение
Удалите текст после тега </body> или перенесите этот тег в конец текста.
Adjacent hyphens within comment
Комментарии в коде HTML определяются конструкцией вида <!— комментарий —>. Если в тексте комментария подряд идет два и более дефиса, возникает ошибка.
<!— Комментарий — заголовок —>
<!— комментарий —>
<!— Комментарий — тело документа —>
Решение
Удалите лишние дефисы.
SYSTEM, PUBLIC, W3C, DTD, EN must be upper case
Элемент <!DOCTYPE> указан неверно, в частности следующие атрибуты необходимо писать в верхнем регистре: SYSTEM, PUBLIC, W3C, DTD, EN.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<!doctype html public «-//w3c//dtd html 4.01 Transitional//en» «http://www.w3.org/TR/html4/loose.dtd»>
Решение
Пишите <!DOCTYPE> корректно.
Warning: missing <!DOCTYPE> declaration
Не указан элемент <!DOCTYPE>.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<p>Основной текст</p>
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Решение
Поместите элемент <!DOCTYPE> в самую первую строку кода документа.
Too much <…>-elements
Повторяется тег, который в коде должен быть только один. К таким тегам относится <html>, <head>, <title> и <body>.
<head>
<title>Заголовок</title>
</head>
<head>
<title>Заголовок</title>
<title>Название статьи</title>
</head>
Решение
Удалите повторяющийся тег.
<…> inserting «…» attribute
Не указан обязательный атрибут для данного тега.
<style type=»text/css»>
<style>
Решение
Проверьте тег и добавьте недостающие атрибуты.
… attribute … lacks value
Атрибут тега не содержит обязательное значение или оно написано с синтаксической ошибкой.
<a href=»link.html»>Ссылка</a>
<a href>Ссылка</a>
Решение
Проверьте атрибуты тега и добавьте недостающие значения.
… attribute «…» has invalid value «…»
Атрибут содержит некорректное значение. Ошибка проявляется в тех случаях, когда в значении вместо текста пишется число и наоборот. Так, атрибуты id и name должны начинаться с символа ([A-Za-z]) и могут содержать цифры ([0-9]), дефис (-), подчеркивание (_), двоеточие (:) и точку (.). Значение ширины и высоты в атрибутах тегов не должно содержать ничего, кроме цифр ([0-9]) и процентов (%).
<div id=»layer1″>Слой 1</div>
<img src=»images/pic.gif» width=»200″ height=»120″>
<div id=»2layer»>Слой 2</div>
<img src=»images/pic.gif» width=»200px» height=»120px»>
Решение
Проверьте атрибут тега и измените его значение.
<…> missing > for end of tag
Ошибка может возникать в двух случаях: некорректно написан тег, что происходит, когда забыли добавить закрывающую скобку и применение > вместо использования спецсимвола.
<p>Пример текста</p>
<p>Для случая 0<p рассмотрим следующий пример.</p>
<p Пример текста</p>
<p>Для случая 0<p рассмотрим следующий пример.</p>
Решение
Вставьте отсутствующую закрывающую скобку.
Замените < на <.
<…> proprietary attribute «…»
Тег содержит атрибут, специфичный только для браузера Internet Explorer или другого и не входящий в спецификацию. Примером является атрибут height тега <table>.
Список всех атрибутов, входящих в спецификацию HTML приведен по адресу http://www.w3.org/TR/html4/index/attributes.html
<table style=»height: 100%»>
<table height=»100%»>
Решение
Список наиболее характерных атрибутов тегов приведен в табл. 14.1.
| Тег | Устаревший атрибут | Стандартный атрибут |
|---|---|---|
| <body> | marginwidth=0, marginheight=0, leftmargin=0, topmargin=0 | style=»margin: 0″ |
| <table> | height=100% | style=»height: 100%» |
| <table> | nowrap | style=»white-space: nowrap» или <td nowrap> |
| <td> | background=»abc.gif» | style=»background-image:url(abc.gif)» |
… proprietary attribute value «…»
Значение атрибута не входит в спецификацию HTML и является специфичным для браузера Internet Explorer или другого. Например, значение align=»absmiddle» тега <img> недопустимо.
<p><img src=»hello.gif» alt=»Привет» align=»middle»></p>
<p><img src=»hello.gif» alt=»Привет» style=»vertical-align: middle»></p>
<p><img src=»hello.gif» alt=»Привет» align=»absmiddle»></p>
Решение
Используйте стандартные значения атрибутов тегов или используйте стилевой эквивалент.
… dropping value «…» for repeated attribute «…»
Атрибут применяется в теге больше одного раза.
<img src=»image.jpg»>
<img src=»image.jpg» src=»image.jpg»>
Решение
Удалите повторяющийся атрибут.
… unexpected or duplicate quote mark
Отсутствует открывающая или закрывающая кавычка в атрибуте тега.
<img src=»image.jpg»>
<img src=image.jpg»>
Решение
Добавьте парную кавычку к значению атрибута.
… attribute with missing trailing quote mark
Тег содержит атрибут, в котором задано неверное количество кавычек.
<p id=»my_id»>
<p id=»my_id»»>
Решение
Добавьте или удалите одну из кавычек.
… id and name attribute value mismatch
Ошибка возникает, когда значения атрибутов id и name не совпадают между собой, что приводит к конфликту при обращении к свойствам элемента через скрипты.
<a name=»elm» id=»elm»>
<a id=»elm»>
<a name=»abcdef» id=»db1″>
Решение
Удалите один из атрибутов или сделайте значения атрибутов name и id одинаковыми.
Notice: replacing <…> by <…>
Ошибка возникает в следующих случаях:
- неверный порядок тегов;
- добавлен лишний закрывающий тег;
- имеется открывающий тег без наличия обязательного закрывающего.
<p>Текст</p><br>
<p>Текст</p></p>
<p>abc<br><table>…</table></p>
Решение
Измените порядок тегов или удалите один из открывающих или закрывающих тегов.
… anchor «…» already defined
Значения атрибута name у различных тегов совпадает между собой. Значение name должно быть уникальным.
<form name=»my_form1″ action=»test1.php»></form>
<form name=»my_form2″ action=»test2.php»></form>
<form name=»my_form» action=»test1.php»></form>
<form name=»my_form» action=»test2.php»></form>
Решение
Выберите другое имя или измените предыдущие имена таким образом, чтобы они не совпадали.
<…> is probably intended as </…>
Тег повторяется дважды в коде HTML, тогда как подобный тег не должен содержать сам себя.
<em>Привет, мир!</em>
<em>Привет<em>, мир!</em></em>
Решение
Удалите один из тегов.
<…> lacks «…» attribute
Требуется обязательный атрибут тега, который, тем не менее, отсутствует.
<form action=»my_action.php»>
<form>
Решение
Добавьте недостающий атрибут к тегу.
Тег DOCTYPE означает «объявление типа документа». Он сообщает веб-браузерам, какую версию HTML использует ваша страница. Прописывать DOCTYPE необходимо для переключения браузера в режим соответствия стандартам данной версии. DOCTYPE всегда должен быть самой первой строкой HTML-кода страницы.
Хотя современные браузеры не принимают во внимание незначительные ошибки в коде HTML, неправильный DOCTYPE является серьезной проблемой, которая может существенно повлиять на доступность вашего веб-контента. Отчет Labrika «Неверный HTML DOCTYPE» позволяет установить наличие таких ошибок.
Содержание отчета
Отчет показывает список URL-адресов страниц, в HTML-коде которых DOCTYPE прописан неверно.
Использование отчета
Найдите страницы с некорректным DOCTYPE и пропишите его правильно.
Синтаксис:
<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
Параметры:
- Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег
<html>. - Публичность — указывает, является объект публичным (значение PUBLIC) или системным (значение SYSTEM) ресурсом, например, таким как локальный файл. Для HTML/XHTML выбирается значение PUBLIC.
- Регистрация — сообщает, зарегистрирован ли разработчик DTD (document type definition, описания типа документа) в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO или минус (-) — разработчик не зарегистрирован. Для W3C указывается значение «-».
- Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C (англ. World Wide Web Consortium — Консорциум Всемирной паутины). Нназвание этой организации и пишется в теге DOCTYPE.
- Тип описываемого документа. Для HTML/XHTML указывается значение DTD.
- Имя — уникальное имя документа для описания DTD.
- Язык — указывается язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML нужно прописывать английский язык (EN).
- URL — адрес документа с DTD.
Существует несколько видов DOCTYPE — они различаются в зависимости от используемой на странице версии языка разметки гипертекста.
Пример для версии HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Спецификация HTML5 предлагает следующий вариант написания DOCTYPE для всех документов:
<!DOCTYPE html>.
Здравствуйте, дорогие читатели. Сожалею, что так долго не писал, решил немного заняться новым проектом и на 2 месяца забросил этот сайт 
. Исправляюсь, по вашим многочисленным просьбам пишу статью про валидность сайта валидность HTML кода и как проверить сайт на валидность и исправить ошибки.
Проверить сайт на валидность важно по нескольким причинам:
- выявить ошибки и устранить их
- для каждого пользователя ( зависит от его браузера и версии ) страница может отображаться по-разному. Браузеры смогут отобразить страницу с небольшими огрехами, но каждый отобразит по-своему.
- если браузеры могут автоматически исправить маленькие недочеты, то поисковые системы замечают любую погрешность. К примеру на западе поисковики серьезно относятся к валидности сайтов, у нас уже тоже не исключение.
Всему этому необходимо следовать. А задает эти нормы W3C Консорциум Всемирной паутины ( World Wide Web Consortium ).
Проверка HTML кода на валидность
W3C предоставляет для всех вебмастеров валидатор html кода, чтобы проверить валидность сайта.
Validate by URI — проверка по URL
Validate by File Upload — проверить загружаемый файл
Validate by Direct Input — вставка и проверка участка кода
Нажимаем кнопку Check и появятся результаты. По умолчанию настройки определяются автоматически, но если вы подгоняете под другой тип, то используйте свои.
Подмечу, что часто достаточно исправить 1 или пару ошибок, чтобы сайт полностью соответствовал правилам. ( Например, в этом случае достаточно было сделать 1 исправление в 1 файле, чтобы пропало 5 ошибок ).
Далее будет выведен список ошибок и их решение.
Все на английском, правда в валидаторе есть полезная опция «Clean up Markup with HTML-Tidy», ниже расскажу о ней.
Также можно будет выбрать дополнительные опции при проверке на валидность:
- Show Source – отобразить исходный код вашей страницы
- Show Outline – показать строку, где есть ошибки
- Validate error pages – проверить страницы ошибок, например 404 — страницы не существует
- List Messages Sequentially – показать ошибки и предупреждения списком, последовательно
- Group Error Messages by Type – группировать ошибки с общими признаками
- Clean up Markup with HTML Tidy — программа HTML Tidy выводит исправленный код, не входит в состав W3C validator, поэтому не гарантируется полная корректность
Исправление ошибок валидности
Теперь попытаемся разобраться как исправлять ошибки.
1. Копируем строчку с ошибкой ( … не копируем, это продолжение кода )
2. Определяем в каком файле она находится. Открываем сайт, CTRL + U просматриваем исходный код страницы и ищем ошибку CTRL + F. Часто ошибка не связана с файлами шаблона, она может находиться в файлах плагинов, либо в подпапках вашего шаблона, поэтому нужны некоторые знания
3. Далее открываем файл и при помощи записи под ошибкой, либо при помощи программы HTML Tidy ( включаем опцию вверху страницы валидатора), в таком случае ищем уже исправленный код ( просто копируйте код на 2-3 символа до красного выделения ). И исправляем.
Часто встречаемые ошибки валидации
Тег noindex
Пример:
<noindex> <a rel=»nofollow» href=»…» >…</a></noindex>
Ошибка валидатора: You have used the element named above in your document, but the document type you are using does not define an element of that name
Пояснение: noindex — не входит официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML. Также полезно знать, что ЯНДЕКС учитывает, как и Google, Yahoo и Bing, rel=»nofollow»
Правильно:
<a rel=»nofollow» href=»…» >…</a>
Пример:
<a href="index.php?pid=1&id=2">...</a>
Ошибка валидатора: Unknown entity…
Пояснение: использовать & вместо &
Правильно:
<a href="index.php?pid=1&id=2">...</a>
Неверная вложенность
Пример:
<strong><li>...</strong></li>
Ошибка валидатора: Missing </ tagli>
Пояснение: элементы должны быть закрыты в обратном порядке их открытию
Правильно:
<strong><lili
Чувствительность DOCTYPE к регистру
Пример:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Ошибка валидатора: Missing DOCTYPE
Пояснение: DOCTYPE зависим к регистру
Правильно:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="<a>http://www.w3.org/1999/xhtml</a>" >
Не прописан закрывающий «/»
Пример:
…style.css" type="text/css" media="screen">
Пояснение: «пустые элементы», как img или br, должны заканчиваться»/» c пробелом перед этим
Правильно:
…style.css» type=»text/css» media=»screen» />
Тэги прописаны в верхнем регистре
Пример:
<STRONG><LI>...</LI></STRONG>
Ошибка валидатора: There is no such element…
Пояснение: в XHTML документах все элементы и атрибуты должны быть в нижнем регистре, т.к. этот язык регистрозависим и для него <li> и < разные тэгиLI>
Правильно:
<strong><li>...</li></strong>
Значения атрибутов прописаны без кавычек
Пример:
<style type=text/css>...</style>
Ошибка валидатора: Missing » »
Пояснение: значения атрибутов пишутся вместе с кавычками
Правильно:
<style type="text/css">...</style>
У img отсутствует атрибут alt
Пример:
<img src="/image/1.png" height="10" width="10" alt="" title="">
Ошибка валидатора: required attribute «alt» not specified
Пояснение: у тега img атрибут alt должен быть всегда, значение можно оставить пустым, если картинка используется для оформления
Правильно:
<img src="/image/1.png" height="10" width="10" alt="" title="">
В итоге вы сможете исправить ошибки сайта и сделать сайт валидным.