Основы верстки. Структура html-страницы

25 января 2016г.

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

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

Основы верстки html-страницы

Тип документа

Первая часть html-документа — тег, объявляющий браузеру тип получаемого документа. Так как браузеры могут работать с разными типами файлов и очень важно указать тип в самом начале, что этот файл именно html-документ. При этом перед указанием не должно быть ни пробелов, ни пустых строк.

Сейчас во всю используется HTML5, поэтому тип можно объявить вот так:

<!DOCTYPE html>

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

<html> — контейнер

Объявив тип документа можно приступать к построению самого html. Главным элементом является тег <html> — он служит контейнером для всего документа.

У этого тега есть один атрибут — lang=»ru». Он дает указание на каком языке содержимое страницы. На указанном примере это русский язык («ru»). К примеру, английский имел бы «en», японский «jp» и т.д.

Далее тег html разделяется на head — голова документа и body — тело страницы. Тут главная особенность: тег head всегда стоит первым, а body следующий.

head — голова документа

Этот тег можно условно назвать техническим, все что находится внутри него не выводится на экране. За исключением заголовка (тег title) и фавиконки.

Сам блок служит для подключения внешних файлов стилей и скриптов, для указания кодировки документа, а так же meta данных (keywords, description и т.д.).

Голова документа должна содержать два обязательных тега: указание кодировки и заголовка.

<meta charset="utf-8">
<title>Заголовок</title>

Остальные теги являются не обязательными.

body — тело страницы

Это, как по мне, самый главный тег. Благодаря ему мы видим содержимое страниц. Именно внутри этого тега находится вся выводимая в окне вашего браузера информация.

Общий вид

В этой статье я описал общий скелет любого html-документа. Вот его общий вид:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
</head>
<body>
...
</body>
</html>

Можете скопировать этот код и использовать как основу для ваших проектов.