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

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

Основные теги

Главные составляющие любого сайта это теги <html>, <head> и <body>.

<html> — самый главный тег любого веб-элемента. Он содержит в себе все остальные теги, включает тег <body> и <head>.

<head> — голова, которая содержит основные данные о нашей странице. Внутри него указывается название вкладки сайта, а также мета теги. Они служат для указания ключевых слов, авторской информации и так далее. О мета тегах и их атрибутах вы узнаете в другой статье.

<body> — тело элемента. Именно в нем содержится вся видимая для пользователя информация — текст, картинки, ссылки, кнопки, формы и т.д.

Ещё один важный элемент — !doctype HTML. Его нужно вводить обязательно, в самой первой строке. Это сокращенная запись от !document type.

<title> — ещё один тег, который нужно обязательно вводить. Именно он отвечает за главный заголовок (название вкладки сайта). О тегах <meta>, <p> и <h1> поговорим в другой раз.

В примерах ниже использована программа для вёрстки "Brackets", но может подойти любой другой редактор кода, например Notepad ++. Они оба бесплатны и очень удобны в использовании.

Внутренние структурные теги

Сейчас мы поговорим о тегах, которые используются для разметки страницы и создания основной структуры HTML сайта

<Div>

Это самый основной тег разметки, который использовался на каждой странице. Это тег-контейнер, который используется для создания одного смыслового блока с информацией. До выхода версии HTML 5, для создания блоков использовался тег <div>. В основном, этот тег используется для блочной верстки.

Пример:

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

Пока что не обращайте внимание на внутренние теги, мы поговорим о них чуть позже.

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

<Header>

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

<Section>

Один из главных блоков, который можно встретить на многих сайтах. Его главной функцией является то, что он позволяет разделять всю информацию на странице на смысловые блоки. Например, на странице есть 3 блока — Описание компании, услуги, цены. Все они должны быть внутри контейнера section. Чаще всего используется при создании landing-page

<Article>

Может использоваться для создания новостей. Довольно популярен при создании форумов. Очень популярен при создании блогов, вмещает в себя статьи и другие записи

<Nav>

<Nav> — navigation, название говорит само за себя. Этот тег используется для создания навигационных панелей. В нем находятся основные внутренние ссылки страницы.

<Footer>

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

Пример использования:

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

Этот случай визуально не отличается от первого, однако такая разметка считается правильной.

Заключение

Теперь вы знаете что лежит в основе всех сайтов, а самое главное можете сами сделать такую основу.

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

Лучше заходите на те сайты, которые находятся в топе списка. Они, как правило, сделаны по новым стандартам. Глядя на них вы сможете понять как правильно располагать теги-контейнеры внутри своих проектов. Удачи вам!



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *