Краткий курс 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 комментариев
<meta charset="utf-8" />
Меня интересует вот какой вопрос: какая кодировка является кодировкой по умолчанию для документов HTML пятой версии? Т.е. непосредственно что написано в рекомендации консорциума: как юзерагент должен интерпретировать страницу с неуказанной кодировкой?inst @ 12 августа 2011
Действительно, короткий вариант существует и в последние месяцы получил поддержку браузеров. Однако в ближайшее время использовать его следует с осторожностью, если вы расчитываете на пользователей, редко обновляющих ПО.
По поводу кодировки по умолчанию: в стандарте HTML5 ее как таковой нету, есть только рекомендуемая — UTF-8. Определено также три способа указать реальную кодировку (в порядке их приоритетности):
<meta />
.На практике не все браузеры строго ему следуют, поэтому рассчитывать на него особо не приходится.
Алексей @ 12 августа 2011
Татьяна @ 23 сентября 2011
Квадрат @ 25 января 2012
Фактически, это подстраховка на случай, если загрузка страницы по какой-либо причине прервется после
<title>
и до<meta />
с кодировкой, и прочими способами она не определена. В этом случае есть некоторая вероятность, что алгоритм определения кодировки ошибется и в заголовке браузера будут кракозябли. Как только<meta />
будет загружен, все придет в норму.Алексей @ 25 января 2012
олеся @ 29 ноября 2012