Краткий курс HTML 5

3. HTML-документ

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

<!DOCTYPE html>
<html>
<head>
   <title>Заголовок документа</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
Мой первый HTML-документ
</body>
</html>

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

Определение типа документа

Первая строчка сообщает браузеру, что наш документ составлен в формате HTML 5. Это так называемое DTD, и оно всегда расположено в самом начале. В других версиях HTML/XHTML эта строчка имеет более сложный вид и здесь рассматриваться не будет. Не забывайте указывать DTD, чтобы браузер знал, с чем имеет дело, и верно отображал документ.

Структура документа

Ниже находится корневой элемент <html>, охватывающий весь документ от DTD до самого конца. Внутри него один за другим расположены <head> и <body>. Как и следует из названия, <head> — это «голова» документа, в которой размещается заголовок <title> (его содержимое отображается в заголовке браузера) и прочая служебная информация (сейчас это единственный элемент <meta />). <body> — это «тело» документа, в котором и находится основной текст.

Элементы <html>, <head> и <title>, наряду с DTD являются обязательными и должны быть размещены в описанном выше порядке. В противном случае документ не будет соответствовать стандартам W3C (проверьте одним из способов, описанных во введении). Это еще не значит, что он не будет отображаться в каких-либо браузерах, но нет гарантий, что отображение будет верным.

Кодировка документа

Элемент <meta /> предназначен для передачи служебной информации браузеру. Атрибут http-equiv определяет «о чем сообщить», а content — «что сообщить».

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

В этой строчке браузеру сообщается, что содержимое документа (content-type) соответствует MIME-типу text/html в кодировке UTF-8. Более подробно возможности этого элемента будут рассмотрены позже. Тег <meta /> непарный, поэтому завершается косой чертой «/».

Если нет причин использовать другую кодировку, то сохраняйте HTML-документы в UTF-8 (в большинстве редакторов есть соответствующая опция). К ее недостаткам можно отнести, пожалуй, лишь больший размер файлов. Это связано с тем, что символы, не входящие в ASCII (латиница, цифры, знаки препинания и др.), занимают два байта, вместо одного. Преимущество же в том, что она позволяет использовать любые символы Unicode (включая большинство алфавитов мира). UTF-8 — рекомендуемая кодировка для HTML-документов, и давно является стандартом «де-факто» в интернете.

6 комментариев

Судя по этому вопросу http://doctype.com/doesnt-html-5-meta-charset-tag-work существует короткий вариант задания кодировки: <meta charset="utf-8" /> Меня интересует вот какой вопрос: какая кодировка является кодировкой по умолчанию для документов HTML пятой версии? Т.е. непосредственно что написано в рекомендации консорциума: как юзерагент должен интерпретировать страницу с неуказанной кодировкой?

inst @ 12 августа 2011

Спасибо за вопрос!

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

По поводу кодировки по умолчанию: в стандарте HTML5 ее как таковой нету, есть только рекомендуемая — UTF-8. Определено также три способа указать реальную кодировку (в порядке их приоритетности):
  1. В HTTP-заголовке Content-Type (этим заведует сервер);
  2. С помощью метки порядка байтов Unicode (BOM);
  3. И в элементе <meta />.
Если ни одним из способов кодировка не установлена, то в ход идет довольно сложный двухпроходной алгоритм определения кодировки, подробно описанный здесь.

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

Алексей @ 12 августа 2011

Хорошее понятное изложение

Татьяна @ 23 сентября 2011

А разве кодировку не нужно указывать до title?

Квадрат @ 25 января 2012

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

Алексей @ 25 января 2012

спасибо) все предельно ясно)))

олеся @ 29 ноября 2012