В секции head указываются служебные тэги.

Секция head

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

В секции head могут располагаться скрипты, инструкции об оформлении страницы и различная мета информация о данном HTML документе.

Следующие элементы должны обязательно располагаться в секции head: <link>, <title>, <base>,<style>, <script> и <meta>.

Элемент title

С помощью элемента <title> Вы можете задать заголовок HTML документа. Элемент title обязательно должен присутствовать во всех HTML документах.

Элемент title:

Определяет заголовок окна браузера;
Используется как заголовок страницы в результатах выдачи поисковых систем;
Используется как заголовок страницы при добавлении сайта в избранное.

<head>
<title> Wisdomweb.ru - онлайн учебники по HTML, CSS, JavaScript, jQuery, HDOM, AJAX.</title>
</head>

Элемент meta

Метаданные - это информация о данных находящихся в HTML документе. Пример метаданных: кодировка страницы, краткое описание содержимого, ключевые слова, имя автора, дата последней модификации.

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

В HTML метаданные HTML документов определяются с помощью тэга <meta>. Тэг <meta> всегда должен располагаться в секции head.

О кодировке

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

<!-- Укажем браузеру, что текст данного HTML документа набран в типичной 
для windows кирилической кодировке windows-1251 --> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- Укажем браузеру, что текст данного HTML документа набран во всемирной кодировке UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Обратите внимание: если явно не указать кодировку как в примере выше браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно пользователь увидит страницу содержащую бессмысленные символы, поэтому кодировка обязательно должна указываться к каждому HTML документу.

Обратите внимание: в HTML5 кодировка может быть задана с помощью нового атрибута charset, например так <meta charset="UTF-8">.

Метаэлементы и поисковые системы

Некоторые поисковые системы во время индексации страницы обращаются к мета элементам.

Например мета элемент ниже определяет описание для HTML документа (данное описание может использоваться поисковыми системами при отображении документа в поисковой выдаче):

<meta name="description" content="Бесплатные онлайн учебники по HTML, CSS, JavaScript, jQuery, HDOM и AJAX" />

Следующий мета элемент задает ключевые слова для документа:

<meta name="keywords" content="HTML, XHTML, CSS, JavaScript, jQuery, HDOM, AJAX" />

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

Элемент link

С помощью тэга <link> Вы можете связать HTML документ с внешним CSS файлом.

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Элемент base

С помощью тэга <base> Вы можете задать корневой адрес (адрес, который будет подставляться к относительным ссылкам) и способ открытия ссылок по умолчанию.

Атрибут href используется для задания корневого адреса по умолчанию. По умолчанию корневой адрес равен доменному имени сайта.

Пример

<html>
<head>
<base href="/link/" />
</head>
<body>
<p>После щелчка на ссылку ниже Вы будете перемещены на документ находящийся
 по адресу "https://www.wisdomweb.ru/link/example.html"</p>
<p>Если бы тэг base не был определен мы бы были перемещены на документ 
"https://www.wisdomweb.ru/example.html".</p>
<a href="example.html">Ссылка на example.html</a>
</body>
</html>

Попробовать в редакторе

Быстрый просмотр

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

Пример

<html>
<head>
<base target="_blank" />
</head> 
<body>
<p>Ссылка ниже откроется в новом окне.</p>
<a href="/">wisdomweb.ru</a>
</body>
</html>

Попробовать в редакторе

Быстрый просмотр

Элемент style

Элемент <style> используется для оформления HTML документов.

Пример

<html>
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<body>
<p> Это абзац. </p>
</body>
</html>

Попробовать в редакторе

Обратите внимание: в HTML5 атрибут type тэга style стал необязательным.

Обратите внимание: узнать об определении стилей больше Вы можете в нашем CSS учебнике.

« Предыдущая глава Следующая глава »