Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

!DOCTYPE. Стандарты HTML. Валидная верстка

<!DOCTYPE> указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.


DOCTYPEОписание
HTML5
<!DOCTYPE html> Для всех документов.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.

Стандарты HTML и XHTML

HTML - стандартный язык разметки Web-документов.

В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.

Например, тег <font> и атрибут align объявлены устаревшими.

XHTML - расширяемый язык разметки Web-документов, созданный на базе XML. Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.


Требования XHTMLНельзяНужно
Все теги должны быть закрыты.<br><br />
Все теги, атрибуты и CSS-свойства должны быть набраны в нижнем регистре.<IMG SRC="" ALT="" /><img src="" alt="" />
Все значения атрибутов тегов должны быть заключены в кавычки.<a href=https://htmlweb.ru><a href="https://htmlweb.ru">
Должна строго выполняться иерархия: первый тег закрывается последним.<em><u>...</em></u><em><u>...</u></em>
Блочный тег не может быть вложен в строчный. (После блочного элемента дальнейший вывод на странице осуществляется с новой строки. Строчный элемент перевода строки не делает.)<span><div>...</div></span><div><span>...</span></div>
Булевы атрибуты записываются в развёрнутой форме.<option selected><option selected="selected">
У изображений обязательно должно быть указано описание<img src="Ba.gif" /><img src="Ba.gif" alt="Бах" />

Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.

Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. В 2014 году стандарт HTML5 был завершён.

Кому интересно, могут ознакомиться с первоисточником:

Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/

Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.

На !DOCTYPE, предназначенных для документов, использующих фреймы, останавливаться не будем: позавчерашний день.

Следующий вопрос: какой выбрать синтаксис - строгий или переходный?

Строгий и переходный синтаксис HTML 4.01

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

Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.

Строгий синтаксис

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Проверка на валидность</title>
</head>
<body bgcolor="green">
<H1 align="center">Проверка на валидность</H1>
<p>Часть текста понадобилось выделить <font color="red">красным</font> цветом.</p>
</body>
</html>

Соответствие HTML-кода объявленному стандарту называют валидностью, а проверку на это соответствие - валидацией.

Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator.

Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:

Двойной щелчок на знаке валидатора даст развернутый список ошибок:

Поменяем !DOCTYPE на переходный синтаксис:

Переходный синтаксис

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Проверка на валидность</title>
</head>
<body bgcolor="green">
<H1 align="center">Проверка на валидность</H1>
<p>Часть текста понадобилось выделить <font color="red">красным</font> цветом.</p>
</body>
</html>

Запускаем FireFox. Ошибок нет:

Вроде все прекрасно. Может, на этом и остановиться?

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

Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!

Зачем нужна валидная верстка

Казалось бы, зачем мучиться? Ведь маленькие недочеты верстки браузеры часто исправляют автоматически, и сайт работает абсолютно нормально. Но эти мелкие, практические незаметные ошибки тем не менее замечают поисковые системы. Даже один отсутствующий тег </p> - это минус на оценке качества сайта.

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


Читать дальше: Мета теги


.