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

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

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

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

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

<body>
Наконец мы подошли к тегу , это тело страницы, в нем расположено все содержимое документа. В нем мы и будем размещать нашу верстку.

Основные теги HTML страницы

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

<header>
Тег в основном используется для вёрстки верхней части сайта, шапки. В нем размещается логотип, меню, форма поиска, телефон. Так мы браузеру говорим, что это шапка, чувак.

<section>

Тег используется для логического разбиения страницы на разделы. Объясню сразу на примере. Есть лендинг, у него несколько блоков, экранов. Каждый экран можно смело обернуть в наш тег. Мы покажем браузеру что это отдельные, никак не связанные блоки, в которых уже лежит контент.

<article>

Этим тегом оборачиваем независимую контентную часть страницы. Обычно ею является статья на сайте, пост в блоге и тд. Так мы браузеру показываем, что тут есть контент, а не просто элементы сайта.

<aside>

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

<footer>

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

<div>

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

Рубрика: HTML

Начните вводить, то что вы ищите выше и нажмите кнопку Enter для поиска. Нажмите кнопку ESC для отмены.

Вернуться наверх