Структура HTML

Так, блог ведь о дизайне, вёрстке и фотографии. О фотографии есть, о дизайне совсем мало, о вёрстке вообще ничего. :) Исправляемся!

Структура HTML

За всё время моей «карьеры верстальщика» у меня накопилось огромное количество велосипедов сниппетов, хаков и всяческих идей. Решил посвятить им несколько «статей». Вообще, в интернетах по данной тематике можно найти очень много информации. Но большинство того, что выдают поисковики устарело.

Начинаю я обычно с написания HTML-кода, и только потом приступаю к написанию CSS-стилей.

Заголовок HTML

Где-то эдак с 2005-го года я в доктайпе начал указывать XHTML 1.0 Strict вместо HTML 4.0 Transitional и писать код, соответствующий правилам разметки для этого доктайпа:

<!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>Заголовок</title>
		<link href="style.css" rel="stylesheet" media="all" />
		<script type="text/javascript" src="/jquery.min.js"></script>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	</head>
	<body>
	</body>
</html>

Тег <html> 03 должен содержать атрибут xmlns с указанием URI адреса описания пространства имён XHTML. Также этот элемент может иметь атрибуты xml:lang и lang с указанием языка содержимого документа.

Кодировка 05 объявляется до тега <title> 06, по причине того, что многие браузеры отображают содержимое тега в заголовке окна, не успев определить кодировку.

Также и CSS-стили 07 объявляются раньше JavaScript-кода <title> 08, так как старые браузеры, IE и Opera блокируют все последующие запросы, пока не загрузятся и не распарсятся все скрипты.

jQuery 08 присутствует почти на всех сайтах, которыми я сейчас занимаюсь.

Иконка 09 является обязательным атрибутом современного сайта.

Многие задают вопросы, зачем писать эти xmlns, xml:lang (да и ещё дублировать его lang-ом), и подобные «ненужные» атрибуты, ведь без них всё так же работает, только место занимают. В принципе, действительно, можно не писать. Начинать привыкать к новой спецификации HTML5, по которой минимальный валидный документ может выглядеть так:

<!DOCTYPE html><title></title>

Для сравнения, минимальный XHTML-документ должен выглядеть так:

<!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>
		<title></title>
	</head>
	<body>
	</body>
</html>

Однако. Ощутимая разница. :D

Но стандарт есть стандарт, написали в доктайпе Strict, значит «строго» следуйте стандарту! :)

Содержимое <body>

Названия элементов, которые я использую, почти полностью совпадают с названиями тегов в спецификациии стандарта HTML5, очень активно в последнее время обсуждаемую. Многие энтузиасты уже перевели свои сайты и блоги на HTML5. Я пока на пятый «переходить» не планирую и никому не рекомендую, хотя ознакомиться стоит.

Типичное содержимое тега <body>, подходящее для большинства сайтов с шапкой, меню и боковой панелькой (схематически):

div#wrap
div#wrap-inner
div#header
div#logo
div#nav
div#content
div.entry
div#aside
div.widget
div#extra
div#footer
div.copyright

Ещё часто бывает так (кстати, в этом блоге примерно такая структура):

div#header
div#header-inner
div#logo
div#nav
div#wrap
div#wrap-inner
div#content
div#.entry
div#aside
div#.widget
div#extra
div#foter
div#footer-inner
div.copyright

После закрывающего тега длинного блока часто ставлю комментарий <!-- /#wrap --> («#» после слеша если дальше идёт ID и «.» — если class).

Именование элементов, приведённое в статье имеет непосредственное отношение к семантике, о которой следующая статья.

UPD. В моей вики появилась страница с описанием моего Code Style в HTML.