Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Раздел: 

Не зависимо от того, какой Вы html документ откроете основные структурные элементы в нем всегда будут оставаться одинаковыми.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Заглавие страницы html</title>
	</head>
	<body>
		Содержимое отображаемое на экране браузера
	</body>
</html>

В данном обзоре мы разберем основные обязательные теги используемые для создания html страниц.

!DOCTYPE

!DOCTYPE передает информацию браузеру о том, какая версия html используется далее в документе.

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

В нашем примере формулировкой «HTML» мы говорим о том, что в документе используется стандарт html 5. В последнее время я перешел на использование 5-го хтмл, поскольку он позволяет значительно удобнее своих предшественников структурировать документы, что делает страницы написанные на этом языке более интересными для поисковых роботов, да и все современные браузеры уже в достаточной степени адаптировались к использованию нового формата, что дает возможность не переживать по поводу того, что у вас что-то где-то будет криво отображаться в дальнейшем.

Если же говорить о том, какие еще используются стандарты для создания документов, то я бы выделил следующие:

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Говорит о использовании в документе строгого синтаксиса html стандарта 4.01. Чтобы Вы сразу понимали уточню, что существует строгий и переходной типы синтаксиса. Разница между ними лишь в том, что в переходном синтаксисе многие вещи не будут считаться ошибками, в то время как они будут считаться ошибками в строгом синтаксисе, который требует «идеального» соблюдения спецификаций языка без права на ошибки. Он создавался для упрощения перехода с одной версии хтмл на другую.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Использует все тот же хтмл 4.01, только на этот рас с переходным синтаксисом.
  • <!DOCTYPE html>
    Уступающий по популярности двум предыдущим и одновременно самый молодой из существующих стандартов разметки гипертекста стандарт html 5.
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    в документе будет использоваться XHTML 1.1.

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

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

html, head, body, title

Тег html указывает на начало и конец хтмл-документа. В нем содержатся все остальные теги документа, в том числе и head с body.Помимо обозначения границ документа особых функций этот тег на себе не несет.

Head или же «голова» содержит в себе теги, которые предназначены в первую очередь не для пользователей сайта, а для браузера, который нашу страницу загрузит, если будет понятнее, то это тег, содержащий в себе техническую информацию сайта. При использовании строгих форматов html и xhtml внутри этого тега обязательно должен содержаться title.

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

Body или же «тело» документа. Умещает в себе все остальное содержимое страницы. Именно в теле содержится весь код отвечающий за отображение того, что мы видим на экране нашего браузера будь то текст, картинки, ссылки.