• доступно о веб-разработке
17.10.2012 HTML, Технологии

Структура страницы сайта

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

Кто еще не читал урок «Гранит HTML», самое время это сделать.

Если вы откроете код любой страницы (Ctrl+U или F12 — в Google Chrome), то всегда увидите одну и ту же структуру.

Любой веб-разработчик должен знать её, как «Отче наш».

Выглядит она следующим образом:

<!DOCTYPE html>
<html>
<head>
<!-- Здесь мета-информация -->
</head>
<body>
<!-- Здесь содержимое страницы -->
</body>
</html>

Первой строчкой всегда должен идти DOCTYPE. Он несет в себе информацию о том, какую версию HTML нужно обрабатывать браузеру.

С повсеместно внедряемым сегодня HTML5 все просто — пишите

<!DOCTYPE html>

и все становится ясно.

С 4-ой версией HTML все более сложно, потому что он бывает разных типов.

Подробнее об этом рекомендую прочесть здесь:

http://htmlbook.ru/html/!doctype

Внутри <head></head> всегда содержится мета-информация:

  • Название страницы
  • Кодировка
  • Мета-теги (для поисковых систем)
  • Скрипты и стили. Могут здесь, а могут и в <body>. Только <head> загружается раньше <body>.
  • Ссылки на RSS-потоки для Google Reader и других программ.
  • OG-теги, определяющие условный вид страницы при репосте в соц.сети
  • Многое другое

Конечно, не обязательно, что у вас все из вышеперечисленного определено в <head>, но хотя бы заголовок должен быть точно.

В <body> выводится содержимое страницы — то что вы непосредственно видите при посещении сайта.

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

Задание следующее. Пройтись по пяти-десяти наиболее посещаемых вами сайтам и посмотреть их код, чтобы усвоить тему структуры страницы.

 

Поделиться

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