Стандарты html: Стандарты HTML – Руководство по оформлению HTML/CSS кода от Google / Habr

Стандарты HTML

Когда впервые появились Интернет и веб-сайты, разработчики столкнулись с технической проблемой – как организовать и структурировать информацию текстовых и графических документов для удобства представления в браузерах?

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

Версии и стандарты HTML и XHTML

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

Стандарт HTML 2.0

Первым признанным стандартным языком разметки гипертекста стал HTML 2.0. До этого разработчик никак не могли договориться между собой. Сайты на этом языке создавались самые простые и имели множество ограничений. И вскоре Консорциум Всемирной Паутины предложил следующую версию.

HTML 3.2

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

Стандарт HTML 4.0

Четвертая версия HTML уже позволяла качественное создание сайта. Были устранены многие ненужные теги. Чтобы облегчить веб-страницы, произведено разделение текстовой информации и ее форматирование путем введения такого элемента, как каскадные таблицы стилей.

Именно это и позволило добиться по-настоящему стандартного отображения сайтов в браузерах от разных производителей.

К концу 20 века четвертый HTML практически исчерпал свои возможности развития, и консорциум C3W предложил новую, расширенную версию под названием XHTML.

Стандарт XHTML 2.0

После некоторых экспериментов устоялась вторая версия расширенного языка разметки гипертекста. Собственно расширение состояло в применении формата XML для более строгой и систематизированной организации самого HTML. По сути, XHTML представляет собой все те же теги, но передаваемые в виде документа XML.

Такой процесс требует определенного ужесточения требований к HTML:

1. Допустимы только строчные символы.
2. Все теги должны быть закрытыми: <> .
3. Форматирование текста внутри тела документа недопустимо.
4. Обязательно использование каскадных таблиц стилей CSS.

Таким образом, новая версия стала “более строгой и стандартной”. Для того чтобы полностью реализовать все новые возможности, потребовались и новые версии браузеров. В то же время, старые браузеры могут воспроизводить XHTML-сайты.

Совершенство достигнуто?

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

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

Была попытка усилить статические сайты за счет включения программных элементов (скриптов) и реорганизации структуры веб-страницы в формате объектной модели документа. Сайты стали более быстрыми и интерактивными. Но, слишком сложными для верстки, отладки и настройки.

Знаете, что такое DHTML?

И наконец — стандарт HTML 5

Все проблемы должен решить находящийся в разработке стандарт HTML5. Все лишнее будет выброшено. Вот так выглядит директива документа:

Будет единый тип сайтов для всех браузеров, для любых операционных систем и для всех видов компьютеров.

Поделитесь пожалуйста, если понравилось:

Возможно вам будет интересно еще узнать:

Версии и стандарты HTML и XHTM.

Существует множество разных версий языка HTML. Когда-то была широко распространена версия HTML 2.0, затем ее надолго сменил язык HTML 3.2. Сейчас чаще всего применяется HTML 4.0 или его ближайшая разновидность – HTML 4.01.

Многие версии HTML дополнительно делятся на типы. Например, существует три типа HTML 4.0 и HTML 4.01: Strict, Transitional и Frameset.

1. Transitional (переходный) – это особенно распространенный тип, на нем написано большинство существующих страниц и именно ему посвящена основная масса учебников и справочников по HTML;

2. Strict (строгий) отличается от переходного тем, что в нем недопустимы тэги и элементы, отвечающие за внешний вид, представление документа. Например, в строгом типе нет тэгов FONT и U, атрибутов bgcolor и alink;

3. Frameset (фреймовый), наоборот, еще либеральнее переходного, так как допускает всё то же, что и переходный, а также поддерживает фреймы.

Наиболее предпочтительной является версия XHTML 1.0 Strict. Главное достоинство XHTML – в том, что он совместим с более общим языком XML (Extensible Markup Language, «расширяемый язык разметки»).

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

В XHTML 1.0 Strict нет тэгов и атрибутов, отвечающих за оформление текста – Например, тэгов <center>…</center> и <font>…</font>, атрибутов alink, bgcolor, color и многих других, к которым привыкли некоторые разработчики. Все, что касается внешнего вида документа, должно быть закодировано не в HTML, а в Cascading Style Sheets (CSS).

Приведем версии и стандарты HTML.

– RFC 1866 – HTML 2.0, одобренный как стандарт 22 сентября 1995 года;

– HTML 3.2 – 14 января 1997 года;

– HTML 4.0 – 18 декабря 1997 года;

– HTML 4.01 – (изменения, причём более значительные, чем кажется на первый взгляд) – 24 декабря 1999 года;

– ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) – 15 мая 2000 года;

– HTML 5 – В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сай

Стандарты языка HTML

Эта глава предназначена для тех, кто знаком с языком HTML, но не подозревает о существовании вполне определенных стандартов и о философии, стоящей за принципами разделения содержимого и представления.

Разделение содержимого и представления

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

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

Такая философия, прежде всего, подразумевает, что в коде HTML не должно быть ничего, определяющего стиль документа. Теги вроде <font> и атрибуты вроде bgcolor должны быть исключены. Даже атрибут border в теге вставки изображения <img> по стандартам XHTML 1.1 считается неприемлемым. Это вовсе не проблема, — нет такого стиля, который можно было бы сделать средствами HTML, и который нельзя было бы сделать, и сделать лучше, средствами CSS.

Речь идет не только о том, чтобы увести визуальное представление из сферы ответственности HTML, «приложение содержимого» означает, что все теги HTML должны использоваться для тех целей, для которых они и предназначались. Например, теги <h2>, <h3> и т.п. должны использоваться для создания заголовков, не следует одними только средствами CSS увеличивать размер шрифтов.

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

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

Теги

В XHTML все теги следует писать в нижнем регистре, и все они должны быть закрыты. Те теги, у которых нет парного закрывающего тега (таких как тег <br> и тег <img>), должны закрывать сами себя при помощи символа «/», размещенного в конце тега (например,

<br />). Обратите внимание, что перед символом слеша должен быть пробел.

Разметка должна быть хорошо сформированной, и все элементы должны быть вложены на соответствующих уровнях (например, <strong><em>так</em></strong>, но не <strong><em>так</strong></em>).

Во всех документах должны присутствовать элементы <html>, <head>, <title> и <body>. Также веб-страница должна начинаться с декларации типа документа.

Тело документа (элемент <body>) должен начинаться с тега <p>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, тега <div>, тега <pre>, тега <address>, тега <ins> или тега <del>.

Атрибуты

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

Усеченные атрибуты (такие как <input type=»checkbox» checked />) запрещены. Усеченным атрибутам нужно присваивать то же значение, что и имя усеченного атрибута (например, <input type=»checkbox» checked=»checked» />).

Атрибут name теперь вне закона (за исключением элементов форм) и должен быть заменен атрибутом id.

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

Атрибут alt в теге <img> теперь обязателен.

Доступность

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

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

Стандарты HTML-документов

Версия HTML указывается в теге !DOCTYPE, значения могут быть следующими:

1

HTML 4.01

Спецификация HTML 4.01, рекомендации W3C от 24 декабря 1999 года.

<!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-документе применяются фреймы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">    
	<title>HTML 4.01</title>
	<meta name="description" content="HTML 4.01">  
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/css/style.css" type="text/css">
	<script type="text/javascript" src="/js/scripts.js"></script>  
</head>
<body>
	<p>Контент</p>
</body> 
</html> 

2

XHTML 1.0

Спецификация XHTML 1.0 одобрена в качестве рекомендации 26 января 2000 года.

Возможны три типа документов (по аналогии с HTML4):

<!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 и содержит фреймы

<?xml version="1.0" encoding="UTF-8"?>
<!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="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />    
	<title>XHTML 1.0</title>
	<meta name="description" content="XHTML 1.0" />  
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="/css/style.css" type="text/css" />
	<script type="text/javascript" src="/js/scripts.js"></script>  
</head>
<body>
	<p>Контент</p>
</body>
</html>

3

XHTML 1.1

Модульный язык XHTML, принят 5 января 2000 г.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
	 xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />    
	<title>XHTML 1.1</title>
	<meta name="description" content="XHTML 1.1" />  
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="/css/style.css" type="text/css" />
	<script type="text/javascript" src="/js/scripts.js"></script>  
</head>
<body>
	<p>Контент</p>
</body>
</html>

4

HTML 5

HTML 5 был принят в 2014 году, в нём реализованы мультимедийные элементы – <video>, <audio>, <canvas> и структурные – <header>, <menu>, <footer> и т.д.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta name="viewport" content="width=1000">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">    
	<title>HTML 5</title>
	<meta name="description" content="HTML 5">  
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/css/style.css" type="text/css">
	<script src="/js/scripts.js"></script>  
</head>
<body>
	<header>
		Header
	</header>
	<main>
		<p>Контент</p>
	</main>
	<footer>
		Footer
	</footer>
</body>
</html>

Что такое !DOCTYPE — подробно о HTML-стандартах

Сегодня, уважаемый читатель, мы поговорим о такой загадочной вещи, как объявление стандарта, в соответствии с которым написан HTML-документ. Выполнять поставленную задачу призвана первая HTML-директива в коде веб-страницы, под названием !DOCTYPE.

Вот пример этой строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Если вы не знаете, зачем нужна такая абракадабра и какой DOCTYPE выбрать в вашем случае, то в данной статье вы найдете ответы на эти вопросы, я, по крайней мере, постарался осветить проблему подробно 🙂

Первое, что может сделать добросовестный начинающий веб-мастер, пытающийся разобраться в назначении директивы DOCTYPE, это сходить на сайт htmlbook.ru и прочитать соответствующую статью, из которой станет ясно, что доктайпов существует несколько (строгие и не очень, для HTML и XHTML). Ясно, что данная директива необходима для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ, а вот какой стандарт выбрать и на что это влияет – большой вопрос.

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

История стандартов HTML

Давным-давно, когда интернет только зарождался, обозначилась проблема каким образом превращать набор букв, передаваемый по сети, в заголовки, абзацы, ссылки. Ответ нашел физик Тим Бернерс-Ли придумав язык гипертекстовой разметки HTML (обратите внимания, товарищи блондинки, HTML – это не язык программирования). Документацию к языку HTML опубликовали в 1991 году.

HTML прижился на столько, что стал стандартом разметки документов в интернете, и был одобрен международной организацией по стандартам W3C, которая была основана и возглавляется, как не странно, все тем же создателем HTML сером Тимом Бернерсом-Ли.

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

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

Популярные в то время браузеры (конечно IE и, тогда еще живой, Netscape) начали придумывать свои собственные теги, которые позволяли задавать индивидуальные свойства дизайна веб-документу. Да, уважаемый читатель, никакой кроссбраузерности в то время не было. Я еще помню те времена, когда по сайтам можно было лазить только с помощью IE, все остальные браузеры показывали страшные вещи. Но сейчас не об этом.

W3C принимает новый стандарт HTML, в который уже входят средства визуального представления.

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

Начинающий веб-мастер спросит зачем отделять визуальную часть от структуры, и мы ему ответим:

• В простеньком сайте необходимость этого не очевидна, но если проект крупный, то разделением удастся избежать путаницы и каши в HTML-коде.
• Не нужно повторять один и тот же код на разных страницах, если визуальное представление блоков одинаково. Достаточно воспользоваться CSS-файлом, где один раз указать стиль отображения для данного семейства блоков.
• Отделив инструкции, касающиеся внешнего вида, в кешируемый файл, можно избежать бессмысленных нагрузок на мировую паутину (хе-хе, какое нам дело до мировой паутины, свой сервак не перегружать бы; CSS спасает сервера высоконагрузочных проектов).
• Теперь уже мощность CSS неоспоримо больше, в плане работы с логикой представления, чем у искусственно впертвых в HTML инструментов изменения внешнего вида страницы.

Так, о CSS достаточно, вернемся к HTML.

Актуальный, на данный момент, стандарт HTML 4.01 запрещает использовать HTML для манипуляций с отображением элементов. Попрощайтесь с HTML-директивами align, font; внешний вид нужно задавать при помощи CSS-стилей. Все возвращается на круги своя.

Но, интернет продолжает свое развитие и вместе с ним развиваются и перерождаются стандарты.

Организация W3C решила, что наиболее удовлетворяющим современным веяниям будет новый расширяемый стандарт XHTML. Данная штуковина – это некий симбиоз HTML с принципами XML.

XML – это способ хранения структурированных данных в текстовом файле. Придуманные теги, определенным образом, в соответствии стандартам XML, формируют структуру данных:

<kontakty>
    <zapis nomer="1">
        <familiya>Морковин</familiya>
        <imya>Андрей</imya>
        <site>sdelaysite.com</site>
    </zapis>
    <zapis nomer="2">
        <familiya>Волож</familiya>
        <imya>Аркадий</imya>
        <site>yandex.ru</site>
    </zapis>
</kontakty>

При помощи простенькой программы, легко можно разделить данные, структурированные средствами XML. При этом данные могут быть проанализированы в любой операционной системе, на любом устройстве (ведь это всего-на-всего текстовый файл, структурированный соответствующими разделителями-тегами, согласно известному стандарту).

Организация W3C посчитала вышеописанную особенность очень крутой и раздумья о тупике в развитии HTML, привели к рождению XHTML. Это будет такой язык разметки, который безболезненно должен расширяться новыми тегами и сможет обрабатываться любым устройством (мобильник, компьютер, телевизор), ведь в основе лежит XML, который это пропагандирует (думали наивные сотрудники организации W3C).

Сказано, сделано – в мае 2001 года появился новый стандарт расширяемой гипертекстовой разметки XHTML 1.0. Он впитал в себя строгости XML, теперь HTML-код должен соответствовать следующим требованиям:

• Все теги, должны быть закрыты. Если тег одиночный, например <img>, то он должен выглядеть вот таким образом: <img src=”…” />.
• Должна строго выполняться иерархия. Вот так нельзя: <div><span>…</div></span>. Можно только так: <div><span>…</span></div>. Нельзя забывать про теги <html>, <body> – все должно быть аккуратно.
• Атрибуты тегов нужно обязательно заключать в кавычки. Так нельзя: <a href=http://sdelaysite.com>. Можно только так: <a href=”http://sdelaysite.com”>.
• Теги и CSS-свойства можно писать только маленькими буквами.
• В случае присутствия ссылки, содержащей знак &, его нужно преобразовать в &amp.
• У изображений, формируемых тегом <img>, обязательно нужно указать свойство alt.

И, также как в HTML 4.01, никаких воспоминаний о внешнем виде в XHTML-коде быть не должно.

Конечно, это не полная спецификация языка XHTML, в нем есть ряд ограничения, связанный со скриптами и еще Бог знает с чем. С полной спецификацией можно ознакомится в соответствующем разделе сайта W3C (хоть там все и на английском, но с красочными примерами правильного и ошибочного синтаксиса, так что желающий понять – поймет).

Как я говорил ранее XHTML – это расширяемый язык гипертекстовой разметки. Однако, вся эта расширяемость плохо воспринимается поисковиками, некорректно работает в IE6 и IE7, возникает необходимость настраивать заголовки, передаваемые сервером и выполнять строгие правила формата XML, чтобы все достоинства XTML работали в полную силу.

Достоинства языка XHTML – это вовсе не строгость синтаксиса, а возможность использовать хитрые теги разметки, например, принадлежащие пространству имен MathML (пример, который нужно запускать только в нормальных браузерах; IE6, вместо интерпретации XHTML кода, поднимет диалог сохранения файла) или придумывать теги самостоятельно в своем собственном пространстве имен (этот процесс детально описан на сайте W3C, анг. язык).

Дальнейшее развитие революционной ветки XHTML – это выход стандарта XTML 2.0, значительно отличающегося от привычного HTML и несовместимого с XHTML 1.0. Окончание работ над XHTML 2.0 планировалось на 2009 год.

Однако, никакой революции не произошло. Еще в июне 2004 года группа разработчиков, именующих себя WHATWG (в которую входят разработчики известных браузеров), посчитав концепцию XHTML неверной, начала работу над стандартом HTML 5, который, благодаря наличию семантических тегов (section article footer audio video progress nav meter time aside ) и другим нововведениям, серьезно изменит современную веб-разработку в лучшую сторону. Подробнее о HTML 5 можно почитать на википедии (англ.).

Стандарт XHTML 2.0 был заброшен и организация W3C переключил на разработку HTML 5.

Утвердить стандарт HTML 5 планируется не ранее 2020 года.

Какой DOCTYPE выбрать

Теперь, вооружившись знаниями истории стандартов, снова вернемся к статье на htmlbook.ru про DOCTYPE.

Мы знаем, что такое HTML 4.01 и XHTML 1.0. Остаются открытыми три вопроса:

• Что такое строгий и переходный синтаксис?
• Какой стандарт выбрать?
• Как научится верстать в соответствии с выбранным стандартом?

Теперь я последовательно отвечу на все поставленные вопросы.

Что такое строгий и переходный синтаксис

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

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

Теперь поэкспериментируем.

Сначала я выберу строгий синтаксис формата HTML 4.01 и укажу соответствующую директиву DOCTYPE:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры «-//W3C//DTD HTML 4.01//EN»). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: «http://www.w3.org/TR/html4/strict.dtd» и браузер может прогуляться по этому адресу для уточнения.

Экспериментировать будем с вот таким HTML-кодом:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Проверочка</title>
</head>
<body>
     <p align="center"><font>Немного текста</font></p>
</body>
</html>

Основное внимание нужно обратить на присутствие в коде запрещенных элементов: align=»center» и тега <font>.

Теперь проверим этот код на соответствие стандартам. Как я неоднократно говорил ранее, есть замечательное расширение для FireFox под названием HTML Validator. Програмулина показывает две ошибки в HTML-коде:

Все оказалось предсказуемо. Валидатор ругается на атрибут align и тег <font>, такие вещи запрещены в стандарте HTML 4.01, который мы декларируем первой строчкой HTML-кода.

Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Теперь абракадабра сообщает браузеру, что HTML документ написан в соответствии с переходным синтаксисом стандрата HTML 4.01, потому что автору документа, периодически, непреодолимо хочется использовать запрещенные стандартом директивы. Поставив этот DOCTYPE в код, приведенный выше, повторим валидацию.

Вуаля, уважаемый читатель, тех двух ошибок как не бывало:

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

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

Какой стандарт выбрать

Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?

Так что, никаких переходных синтаксисов, только строгое соответствие стандартам.

За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о вертикальном выравнивании в div. Оказывается, IE8, все-таки, прекрасно понимает назначение CSS-свойства display: table-cell, правда в случае, если объявлен строгий синтаксис стандарта HTML 4.01. В переходном синтаксисе IE8 отказывается работать с данным CSS-свойством.

Теперь определимся с выбором между актуальными стандартами: HTML 4.01 и XHTML 1.0.

Вы собираетесь расширять язык HTML? Если нет, то и не нужно использовать гнилую ветку XHTML, которая так и не переродилась в версию 2.0.

Если вы хотите защитить свой продукт на будущее, чтобы в дальнейшем не возникло проблем при расширении функционала, из-за несоответствия HTML-кода стандартам XML, то помучайте себя слешами в одиночных тегах и обязательными alt-параметрами картинок. Но не делайте это напрасно, просто так использовать XHTML-стандарт не вижу никакой необходимости.

Есть еще DOCTYPE директивы, предназначенные для HTML-документов, использующих фреймы. Что-то я сомневаюсь, чтобы вы использовали древнюю технологию фреймирования 🙂

Для тех, кто не в теме:

Фреймы – это независимые браузерные окна, отображаемые на одной Web-странице. Каждое окно связано с независимым файлом HTML.

Теперь ясно, какой !DOCTYPE оказывается максимально подходящим:

Строгий синтаксис формата HTML 4.01

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Как научится верстать в соответствии с выбранным стандартом

Оказывается, очень просто. Нужно установиться рекомендованное мной расширение для FireFox HTML Validator, которое популярным образом, с примерами, объяснит причину ошибки в HTML и покажет как ее устранить. Вот вам и валидный код.

Веселое видео в тему

P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в контакты.

В продолжении к вышесказанному размещаю постовой.

Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.

С уважением, Андрей Морковин.

| HTML | WebReference

<!DOCTYPE> (от англ. document type — тип документа) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.

Табл. 1. Допустимые DTD

DOCTYPE	Описание
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-документе применяются фреймы.
HTML 5
<!DOCTYPE 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 и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>	Разработчики XHTML 1.1 предполагали, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется чётким правилам.

Синтаксис

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Закрывающий тег

Атрибуты

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для 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.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <p>Разум — это Будда, а прекращение умозрительного мышления — это путь. 
  Перестав мыслить понятиями и размышлять о путях существования и небытия, 
  о душе и плоти, о пассивном и активном и о других подобных вещах, 
  начинаешь осознавать, что разум — это Будда, 
  что Будда — это сущность разума, 
  и что разум подобен бесконечности.</p>
 </body> 
</html>

<!DOCTYPE html>
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
 </head>
 <body>
  <p>Разум — это Будда, а прекращение умозрительного мышления — это путь. 
  Перестав мыслить понятиями и размышлять о путях существования и небытия, 
  о душе и плоти, о пассивном и активном и о других подобных вещах, 
  начинаешь осознавать, что разум — это Будда, 
  что Будда — это сущность разума, 
  и что разум подобен бесконечности.</p>
 </body> 
</html>

Примечание

Internet Explorer до версии 6.0 требует, чтобы <!DOCTYPE> стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).

Хотя значение URL является не обязательным, некоторые браузеры при его отсутствии могут перейти в режим совместимости, поэтому для HTML4 указывайте полный путь к DTD-файлу, как показано в табл. 1.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Стандарты написания HTML и определение типа документа DOCTYPE. Урок 5.

Спецификации HTML и их объявления с помощью DOCTYPE

Я часто в своих уроках делал такие утверждения, как – «один тэг должен располагаться внутри другого», «у тэга img должен быть атрибут src», «сначала идёт тэг head, а потом body» и так далее. Но я ведь не придумывал всё это на лету, — а руководствовался неким регламентом, автором которого является организация, которая собственно придумывает и утверждает все стандарты, — называется она W3C (Консорциум Всемирной Паутины). Раньше я об этом не упоминал, но стандартов написания HTML существует несколько. И у каждого из них есть свои особенности и правила написания. Связано это с тем, что HTML не стоит на месте, а постоянно развивается.

И если в ранних версиях стандарта, когда не было технологии CSS, с помощью языка разметки можно было создавать как структуру, так и дизайн, то сейчас тенденция намечается совершенно иная, — HTML стал больше ассоциироваться со структурой (фундаментом и кирпичиками), на которых и держится дизайн. CSS здесь — это нечто вроде декоративного элемента, задающего оформительский вид – аналог плитки и обоев, если рассматривать создание сайта как строительство дома. В связи с этим, в новых стандартах HTML, некоторые тэги и атрибуты, отвечающие за дизайн, — объявлены нежелательными (deprecated). То есть, текущая спецификация стандарта их поддерживает, но уже в следующей поддержка будет прекращена.

Есть ещё более строгий стандарт, который называется XHTML, — он так вообще не терпит вольностей с кодом и не прощает грубые ошибки. Самый новый на данный момент – это HTML 5, за ним будущее, поэтому в дальнейшем мы и будем на него равняться.

С этим вроде бы всё должно быть понятно, — есть несколько стандартов и замечательно. Но вместе с тем, есть браузеры, в задачу которых входит обработка HTML кода, и браузер не всегда может понять, в соответствии с каким стандартом мы пишем и что конкретно имел ввиду пользователь и соответственно как этот код нужно отображать. То ли мы используем переходный HTML (Transitional), и браузер прощает нам многие ошибки, используя «щадящий режим», то ли мы используем режим строгой совместимости XHTML и ошибки нужно обрабатывать со всей строгостью. Иными словами, перед браузером стоит сложная задача.

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

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

В коде объявление типа задаётся вот так:

<!DOCTYPE html>

 

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

На многих сайтах ещё можно встретить такую строчку: 

<!DOCTYPE html PUBLIC "- //WЗC//DTD НТМL 4.01 Transitional//EN" "http: ./www.w3.org/TR/html4/loose.dtd">

 

Данная строка означает, что используется стандарт HTML 4.01. Но мы не будем его использовать, поскольку он устаревший. Но тем не менее, он тоже нередко встречается и знать о нём стоит.

Теперь объясню, зачем всё это нужно. Данной строкой мы задали некий стандарт, в соответствии с которым браузер должен выводить наш документ в окно браузера. На практике это означает, что наш HTML код будет более-менее одинаково отображаться во всех браузерах. Всего этого было бы невозможно достичь, если бы мы работали в режиме обратной совместимости (quirksmode), который включается если объявление типа документа пропускать. В моей практике, связанной с вёрсткой страниц, это было действительно важно. Потому что, объявление DOCTYPE, в итоге решило проблему одинакового отображения страницы во всех браузерах.

Валидация документа.

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

Для этого достаточно перейти по ссылке – http://validator.w3.org

На этой страничке мы сможем найти несколько способов проверки:

1. Указать реально существующий сайт.
2. Загрузить файл с вашего компьютера.
3. Вставить непосредственно сам код, который вы хотите проверить, в соответствующее поле. 

В нашем случае, скорее всего подойдёт второй или третий вариант.

Я лично использовал третий способ. Мой документ валидацию прошёл успешно, о чём и отрапортовала программа строкой This document was successfully checked as HTML5! на зелёном фоне.

При другом исходе, – надпись будет отображена на красном фоне. Это будет означать, что где-то мы допустили ошибку. Собственно, сама программа укажет где и на какой строке мы ошиблись и в чём именно, правда на английском языке.

Но в моём случае, программа, помимо того, что объявила о том, что валидация прошла успешно, также выдала мне три предупреждения:

1. Using experimental feature: HTML5 Conformance Checker

Дело в том, что стандарт HTML 5 формально ещё не окончательно утверждён консорциумом, который продолжает в него внедрять новые полезные фишки. Но на практике – всё большее и большее количество разработчиков начинают его использовать уже сейчас, чтобы быть готовым к завтрашнему дню.

2. No Character encoding declared at document level

В документе не сказано ни слова о том, какая кодировка используется. Действительно, ведь мы её не указали явно, а значит не факт, что вместо того, чтобы отобразить русские буквы, — браузер отобразит какие-то китайские иероглифы. Происходит так потому, что браузер при отображении документа руководствуется какой-то кодовой таблицей (то есть кодировкой), где каждой букве назначается соответствующий ей кодовый символ. Но то, что в одной кодировке одно число означает одну букву, то в другой – может означать какой-то японский иероглиф. Следовательно, браузеру нужно сообщить, какую кодировку использовать. Если этого не сделать, то браузер всё равно попробует её угадать сам. Но гарантий того, что он сделает это правильно, — совершенно нет.

3. Using Direct Input mode: UTF-8 character encoding assumed

Программа предупреждает, что она по умолчанию использует utf-8. 

Что же, тогда не остаётся ничего, кроме как объявить используемую нами кодировку. Делается это вот таким образом:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Сама строка должна быть вложена в элемент head.

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

http-equiv– это атрибут, в значении которого мы указываем название заголовка.

content– атрибут, в качестве значения которого мы указываем значение заголовка, в данном случае значение заголовка Content-type.

Давайте теперь рассмотрим значения атрибутов, которые только что указали:

Content-Type– говорим браузеру о том, что будем сообщать о том, какой тип у нашего документа. А также, какая кодировка в нём используется.

text/html; charset=utf-8 – документ типа text/html, который использует кодировку utf-8.

Попробуйте провести валидацию страницы ещё раз. Предупреждающих сообщений теперь быть не должно. Но они могут всё равно остаться, но уже по другой причине. К примеру:

1. Вы используете в своём документе изображения, и у вас в тэге img не задан атрибут alt.

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

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