Основная структура HTML-страницы

Здравствуйте, уважаемые коллеги и гости WordPress-book.ru. Если вы начинающий владелец своего собственного сайта и не знаете структуры его HTML-страниц, то далеко тут не уедете. В коде придется копаться намного чаще чем вы об этом могли подумать. Согласны? Тогда продолжим.

Корректная HTML-страница должна соответствовать стандарту, установленному консорциумом W3C. Язык HTML развивается на протяжении многих лет, обновления закрепляются новыми стандартами. С 2014 года существует стандарт HTML5, согласно которому начальный код должен выглядеть примерно так:

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

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

Корневым тегом любой страницы является тег html. А теги head и body являются его дочерними. Все, что пользователь видит на странице через браузер, пишется внутри body, это тело документа. Все, что помещено между head, не видно пользователю и служит определенным целям. Например, тег meta с атрибутом charset указывает браузеру в какой кодировке открывать веб-страницу. Или по заголовку, что внутри тега title, поисковые системы судят о содержании страницы. Подробнее об этом очень важном для внутренней SEO оптимизации сайта теге прочтите в статье «Оптимизации тэга Title — практические советы«.

Несколько слов о head

Чтобы страница отвечала современным стандартам, одних тегов недостаточно, нужны еще стили и функционал. Это достигается при помощи CSS (Каскадные Таблицы Стилей) и Java Script. То и другое содержится в текстовых файлах с расширениями css и js соответственно и подключается к HTML-странице.

Путь к файлу с описанием стилей задает тег link с атрибутом href, а тег script — путь к файлу с программным кодом Java Script. Обратите внимание, если подключаемый файл находится в корневой директории сайта, то путь к нему будет содержать лишь имя этого файла с расширением (например — styles.css). Но, если исполняемый файл находится в дочернем каталоге, то путь к нему прописывается через косую черту (например – js/script.js).

Таким образом, head может содержать неограниченное количество ссылок на файлы стилей и скриптов с дополнительными инструкциями. Более того, в head могут записываться параметры стилей и JS-код непосредственно, без ссылок (не рекомендуется по причине излишней нагрузки на страницу).

Теперь о body

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

Условно все теги можно разделить на блочные и строчные. Браузер выводит все элементы документа в простом потоке, то есть отображает их в той последовательности, в которой они прописаны в коде. Когда выводится строчный элемент, то следующий за ним строчный элемент ставится справа от предыдущего. Для перемещения каждого нового элемента на новую строку эти элементы часто объединяют в блоки при помощи тега div. Для определенных целей, задаваемых стилями, сами блоки могут быть объединены в контейнеры.

Теги могут содержать атрибуты. К примеру, атрибут class тега div содержит имя класса, заданное разработчиком. К этому имени обращаются CSS-правила или код JS для изменения стиля или поведения.

На примере видно, что два одинаковых по смыслу блока div помещены в один общий контейнер. Если к этому коду не подключать никаких стилей, то браузер просто выведет содержимое как есть и смысла создавать этот контейнер не будет. Но при помощи стилей мы можем сделать так, чтобы этот контейнер с классом container имел ограниченную ширину. Два блока внутри него выведем не друг под другом, а в одной плоскости, слева и справа. Этого можно добиться присвоением тегу div каждого блока атрибута class со значениями left и right.

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

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

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

Думаю, данной информации для общего представления основной структуры HTML-страницы более чем достаточно. Если же я что-то упустил, пишите в комментариях.