Теги html head – Тег head, служебная информация о странице — Структура HTML-документа — HTML Academy — Вебджем.рф

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

Данный элемент может содержать в себе следующие элементы:

<title> — обеспечивает название для документа. Является обязательным элементом.
<style> — сообщает браузеру, что внутри него содержится код CSS.
<base> — определяет базовый абсолютный URL для всех относительных URL-адресовa.
<link> — определяет связь между документом и внешним ресурсом, используется для ссылки на внешние таблицы стилей.
<meta> — обеспечивает метаданные о HTML документе.
<script> — элемент содержит скрипт (как правило на языке JavaScript), либо он указывает на внешний файл со скриптом.
<noscript> — определяет альтернативный контент для пользователей, которые по тем или иным причинам отключили в своем браузере скрипты или их браузер не поддерживает скрипты.

Поддержка браузерами

Атрибуты

Атрибут	Значение	Описание
profile	URL	Не поддерживается в HTML5. Указывает URL к документу, который содержит набор правил. Правила могут быть считаны в браузерах, чтобы коректно понимать информацию в атрибуте содержимого <meta> тега.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <head></title>
	</head>
	<body> 
		Видимое содержимое страницы.
	</body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент является обязательным, а в HTML5 может быть опущен.

Значение CSS по умолчанию

head {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

| Справочник HTML

Элемент <head> (от англ. «head» ‒ «голова, заголовок») является контейнером для всех головных элементов документа. В головной части HTML документа располагаются элементы технической информации (ссылки, стили, сценарии), а так же метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое <head> не отображается напрямую на веб-странице, за исключением элемента <title>, он задаёт заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Примечание: Элемент <head> может использоваться только один раз на странице. Появляться он должен сразу же после открывающего тега <html> и заканчивается непосредственно перед открывающим тегом <body>.

Синтаксис

<head>...</head>

Закрывающий тег

Не обязателен.

Атрибуты

profileУстарел в HTML5: Указывает адрес профиля метаданных.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <head> со следующими значениями CSS по умолчанию:

head { 
    display: none;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент является обязательным, а в HTML5 может быть опущен.

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

Элемент <body>

Пример HTML:

Попробуй сам
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wm-school.ru - онлайн учебники по HTML, CSS, JavaScript.</title> </head> <body> Основной контент... </body> </html>
Спецификации
Поддержка браузерами

Элемент
<head> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<head> 1+ 1+ 6+ 1+
Попробуйте сами — Примеры
Как использовать тег <base>, чтобы указать URL по умолчанию и целевое окно по умолчанию для всех ссылок на странице:
Использование тега <base> в <head>
Как добавить информацию о стиле в разделе <head>:
Использование тега <style> в <head>

Как использовать тег <link> для ссылки на внешнюю таблицу стилей:
Использование тега <link> в <head>
Учебник HTML
HTML уроки: HTML Раздел Head

Тег head: создание, настройка и назначение
Каждый HTML-документ в Интернете состоит из различных элементов. Многие из них достаточно распространены и встречаются почти на каждом сайте. Например, контент страницы обычно поделен на параграфы, в нем присутствуют заголовки, изображения и ссылки. Но, несмотря на то что эти элементы являются общими, их присутствие в коде необязательно. Нет технической необходимости в них на веб-странице. Тем не менее редко можно встретить сайт без этих тегов.
Назначение тега <head>
Существуют элементы, которые обязательно должны присутствовать в коде. Технически есть только один тег, который должен присутствовать в верхней части всех документов, написанных на языке HTML — <html>-тег. Он позволяет браузеру понять, где начинается и заканчивается страница. Между открывающим и закрывающим тегом <html> помещается все содержимое HTML-страницы. Перед ним располагается только doctype. Большинство других технически важных элементов — внутри тега <head>, который располагается внутри <html> и находится в самом начале кода. Он и тег <body> являются его потомками.

Что содержится в <head>
Элемент <head> является контейнером для других элементов. В нем содержатся общие сведения (метаданные) о документе, включая его название, ссылки на скрипты и таблицы стилей. Метаданные предоставляют техническую информацию о документе, такую как название, описание, ключевые слова. Там же, где тег <head>, располагается <body>, где помещается контент сайта. Метаданные скрыты от посетителей, но используются оптимизаторами для раскрутки страницы. Они и теги heading (<h2>-<h6>) очень полезны, поскольку передают информацию веб-браузеру, а также поисковым системам об этой странице.

Порядок большинства элементов в <head> не имеет особого значения. Это вопрос предпочтения, поэтому они могут записываться так, как удобно верстальщику. Метаданные необходимы для поисковой оптимизации, так как облегчают ботам, индексирующим сайты, возможность находить их и выводить на странице поиска в определенном порядке. Порядок отображения зависит от алгоритмов их работы, которые включают в себя в том числе корректную техническую информацию о странице.
Какие элементы могут присутствовать в <head>
Следующие элементы могут находиться внутри этого тега: <title> (этот элемент является обязательным для документ HTML), <style>, <base>, <link>, <meta> <script>, <noscript>.
В теге <head> можно:
Подключать внешние файлы, такие как CSS, JavaScript и т.д.
Вставлять ссылки на плагины carousel, pickdate и т.д.

Добавлять ссылки на библиотеки, такие как jquery, Angularjs, vuejs и т.д.
Подключать фреймворки, например, bootstrap.
Вставлять мета-теги, которые описывают, как будет выглядеть сайт в браузере.
Здесь размещается обязательный тег <title>, который содержит заголовок страницы.
Большинство метаданных не отображаются в браузере. Только <title> обычно появляется в строке заголовка браузера. Это может быть полезно для функциональности страницы, а информацию легко проверить через «Инспектор».
Синтаксис и атрибуты
Тег <head> — парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как <head></head>. Что должны иметь большинство HTML-документов? Это <title> тег в <head>. Единственное исключение: если документ — это <iframe> srcdoc, или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня. Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег <head> принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.

Тег <title> и его особенности
Элемент <title> или заголовок страницы — один из важнейших мета-тегов в <head>. Он всегда должен присутствовать на веб-странице, иначе поисковые роботы не смогут быстро найти ее и корректно отобразить в выдаче. Помимо этого, существует еще ряд причин, почему его использование обязательно:
Он отображает название сайта.
Используется как основное средство для каталогизации. Если веб-страница не имеет названия, где описывается ее содержимое, поисковые системы дают ей более низкий рейтинг.

Также содержимое <title> отображается как текстовая ссылка на странице выдачи, известной как SERP.
Он отображается в верхней части окна браузера. Или на вкладке, описывающей страницу в браузере.
Информация из заголовка страницы записывается, когда кто-то добавляет сайт в закладки. Поэтому его содержимое должно быть запоминающимся, чтобы пользователь мог легко запомнить и найти его среди других веб-страниц.
Если этот тег не используется, то на сайте будет отображаться «Untitled Document». Он является заголовком страницы по умолчанию. Такой заголовок используется на многих программных платформах веб-разработки.
Поскольку тег <title> предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице. Считается, что оптимальное содержание этого тега не должно превышать 60 символов. Можно добавить больше, но поисковые системы будут отсекать содержимое, если оно превышает это число.

Метаданные в <head>
Тег <head> определяет раздел, в котором находится техническая информация HTML-документа. Метаданные содержат дополнительную информацию о веб-странице в браузере. В них можно включать информацию, такую как имя автора, программа, которая была использована для создания страницы, и ключевые слова. Наиболее важный мета-тег, который должен быть в коде страницы, — это кодировка. Мета-теги очень важны для получения хорошего рейтинга в поисковых системах. Поэтому важно создавать качественные заголовки и описания страниц.

Другие важные теги
В теге <head> могут присутствовать и другие элементы. Например, <style> используется для добавления внутренних стилей и изменения оформления документа. Однако рекомендуется в <head> подключать внешние стили — это гораздо лучше, чтобы отделить контент от его оформления. Сделать это можно при помощи тега <link>. Добавить внешнюю таблицу стилей можно при помощи следующего кода: <link href=»main.css» rel=»stylesheet»>. Для этого тега обязателен атрибут href, в котором указывается ссылка на файл со стилями CSS, а также rel, где прописывается, что это именно стили. Существуют и другие варианты использования тега <link>, например, для создания фавикона — значка для веб-страницы, который отображается в поисковой выдаче. Атрибут rel также используется по-разному и часто применяется при создании мобильных приложений.

Если добавить несколько элементов <style> и <link> в документ, они будут применяться в порядке следования. Потому важно убедиться, что они следуют друг за другом в правильном порядке, чтобы избежать неожиданностей. В языке HTML <link>-элемент используется для добавления в текущий документ внешнего ресурса и наиболее часто применяется для ссылки на стили. В теге <head> также могут подключаться скрипты. Тег <script> позволяет добавить JavaScript на сайт, но вставлять его рекомендуется незадолго до закрытия <body>. Тогда сначала будет загружаться все содержимое, а затем обрабатываться JavaScript. Это поможет увеличить скорость загрузки страницы и исключит возможность просмотра пользователем пустого экрана, пока подключается скрипт.
| HTML | WebReference
Элемент <head> (от англ. head — голова) предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое <head> не отображается напрямую на веб-странице, за исключением элемента <title>, он задаёт заголовок окна веб-страницы.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
Закрывающий тег
Не обязателен.
Атрибуты
profile
Указывает адрес профиля метаданных.
Пример
<!DOCTYPE HTML> <html> <head>  </head> <body>  </body> </html>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Работа с тегом head. Создание первой html-страницы.

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.
Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.
Итак, для начала обзаведемся всем нужным. Что нам сегодня понадобится? Для начала необходимо подготовить папку, то есть создать ее в любом месте на компьютере. И назвать ее так, чтобы нам было понятно, что содержит данная папка. Я, например, назову папку html-site и расположу ее на рабочем столе. Чтобы не потерять.
И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.
Теперь, перейдем к ответам на обозначенные вопросы в начале статьи.
Что нужно писать между тегами head и зачем?
Открываем папку, которую только что создали. И в ней создаем новый текстовый документ. Назвать его можно, как угодно. Только использовать в названии лучше латиницу, а не кириллицу. Назовем его, например, main. Что будет означать, что это у нас главная страница.
Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.
Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> </head> <body> </body> </html>
У вас DOCTYPE может быть другим, в зависимости от выбранного.
Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.
Да, при этом текстовый документ в папке может остаться. Его можно удалить, так как он нам больше не нужен.
Итак, обратим внимание на теги head. На данном этапе, между тегами указан только заголовок страницы и ничего более. Но, что же нужно написать еще между данными тегами. И самое главное зачем? Давайте разбираться.
Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».
Теперь, чтобы ускорить процесс, я выложу готовый код. А затем расскажу что для чего нужно.
<!DOCTYPE html> <html> <head> <title>Главная страница HTML-сайта</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Описание" /> <meta name="keywords" content="Ключевые слова" /> <meta name = "robots" content = "index,follow" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> </body> </html>
Итак, теперь по порядку:
Тег title — уже знаем, что это и зачем.
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — Это мета тег, который определяет тип документа и его кодировку, для браузера. В данной строке указано, что используется тип документа — HTML. И его кодировка — UTF-8, что означает, что браузер должен распознать символы, как 8-битный Юникод. Также, кодировка может быть другой — windows-1251. Данные кодировки используются для вывода знаков в виде кириллицы. Если данная строка не указана, то браузер попытается сам определить кодировку, что иногда может привести к неправильному отображению символов, например, в виде различных непонятных знаков (кракозябр). В данном случае выбрана кодировка Юникод, так как она более универсальна и удобна.
description — Мета тег description, предназначен, для описания страниц. Данное описание также не присутствует в видимой части страницы и необходимо, для поисковых систем. Которые в свою очередь могут его использовать, для формирования сниппета поисковой выдачи. Также, актуален в сфере SEO. Данный тег необязателен и используется по желанию.
keywords — Также предназначен, для поисковых систем. Используется, для указания ключевых слов на странице. И конечно же, используется SEO-мастерами, в продвижении сайта. Тег, как и предыдущий необязателен. Но использования данных двух тегов, может напрямую повлиять на занимаемые позиции в поисковой выдаче сайтом.
robots — Еще один мета тег, с которым стоит познакомиться, но использовать также необязательно. Данный тег предназначен, для поисковых роботов. Указывает, какие страницы индексировать, а какие нет. Кроме того, указывает, как относиться к ссылкам расположенным на странице. Данный тег имеет четыре значения:
index,follow — означает, что страница должна быть проиндексирована, а также следует перейти по всем ссылкам на странице.
noindex,follow — указывает поисковому роботу, что страницу не нужно индексировать, но при этом следует перейти по всем ссылкам.
index,nofollow — индексировать страницу, но по ссылкам не переходить.
noindex,nofollow — не индексировать страницу и не переходить по ссылкам.
<link rel=»stylesheet» href=»style.css» type=»text/css» media=»screen» /> — Данная строка говорит браузеру о том, что есть документ описания стилей CSS, адрес которого указан в атрибуте href. Кроме того, указан атрибут, определяющий, на каком устройстве должны быть применены стили данного файла. В данном случае указано, что документ предназначен, для отображения на мониторах компьютеров. Если не указан, принимается по умолчанию. Для использования одинаковых стилей на всех устройствах, можно указать вместо media=»screen» — media=»all».
Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?
Создание первой html-страницы.
Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:
<h2>Какой-то текст</h2>
После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8». После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.
Что еще мы можем сделать? Чтобы наша первая страничка стала немного красивее. Мы можем, например, залить цветом фон страницы и покрасить заголовок в какой-нибудь цвет. И для этого, мы будем использовать каскадную таблицу стилей. Между тегами head, чуть раньше мы уже подключили файл со стилями, но его еще нет. Значит, его необходимо создать.
Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.
Получается примерно такой код. Цвета могут быть другими, для того, чтобы подобрать необходимый цвет зайдите на эту страницу:
body{ background: #5b84ee; } h2{ color: #ffffff; text-align: center; }
Да, кстати, рекомендую все предлагаемые коды не копировать и вставлять, а прописывать самостоятельно. Так будет намного полезней, нежели просто копировать.
Итак, что мы имеем? А имеем мы заполненную техническую часть документа, что находится между тегами head. А также первую html-страницу, созданную самостоятельно. Да, в ней нет ничего особенного, но первый шаг к созданию HTML-сайта сделан. А в следующий раз мы продолжим, и приступим к созданию главной страницы сайта. Подписывайтесь, чтобы не пропустить.
У меня на этом все. Надеюсь, данная маленькая статья, поможет вам разобраться, что писать между тегами head, а что нет. И конечно же, надеюсь, что у вас получилось создать первую html-страницу. Если же нет, попробуйте еще раз и все получится.
Удачи!
Тег | HTML справочник
HTML теги
Значение и применение
Тег <header> (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header> в одном документе.
<header> <img src = "logo.png" alt = "logo">  <h2>Заголовок первого уровня</h2>  </header>
Пример размещения тега <header> на странице.
Обращаю Ваше внимание, что запрещается помещать элемент <header> внутрь таких элементов, как <footer> (нижний колонтитул), <address> (определяет контактную информацию) или внутрь другого элемента <header>.
Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.
Рис. 43 Человек, который использует только тег <div>.
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».
Поддержка браузерами
Пример использования
Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.
<!DOCTYPE html> <html> <head> <title>Разметка страницы</title> </head> <body> <header style = "background-color:khaki; height:100px"> <p>Верхний колонтитул (тег <header>)</p> </header> <nav style = "background-color:coral; height:75px"> <a href = "#">Ссылка 1</a> | <a href = "#">Ссылка 2</a> | <a href = "#">Ссылка 3</a> | <p>Панель навигации (тег <nav>)</p> </nav> <aside style = "float:right; width:200px; height:250px; background-color:tan"> <p>Справа мы разместили тег <aside></p> </aside> <main style = "height:250px"> <h2>Главный заголовок сайта</h2> <p>Основное содержимое (тег <main>)</p> <section style = "background-color:grey; height:75px"> <h3>Заголовок второго уровня</h3> <p>Раздел 1 (тег <section>)</p> </section> <section style = "background-color:grey; height:75px"> <h3>Заголовок второго уровня</h3> <p>Раздел 2 (тег <section>)</p> </section> </main> <footer style = "background-color:khaki; height:80px"> <p>Нижний колонтитул (подвал) тег <footer></p> <address>Пример с сайта basicweb.ru</address> </footer> </body> </html>
Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.
И так по порядку, что мы сделали в этом документе:
Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.
Результат нашего примера:
Разметка страницы на HTML 5.
Значение CSS по умолчанию
header { display: block; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги
Теги заголовка документа | htmlbook.ru
К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который определяет название веб-страницы.
<title>
Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
<meta>
Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <meta> всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.
Так, для краткого описания содержимого веб-страницы используется значение description атрибута name, как показано в примере 5.2.
Пример 5.2. Использование description
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML</title> <meta name="description" content="Сайт об HTML и создании сайтов"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <p>...</p> </body> </html>
Описание сайта, заданное с помощью тега <meta> и значения description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах, в нем перечисляются ключевые слова, встречаемые на веб-странице (пример 5.3).
Пример 5.3. Использование keywords
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML</title> <meta name="keywords" content="HTML, META, метатег, тег, поисковая система"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <p>...</p> </body> </html>
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.