HTML Основы


HTML Расширенный


HTML Примеры


HTML Справка



HTML-верстка: инструменты и приемы профессиональной front-end разработки

Раздел head html-страницы


назад вперед

Примеры

Заголовок документа
Информация в разделе head html-страницы не отображается в окне браузера.

Место открытия всех ссылок
Этот пример демонстрирует использование тега base для того, чтобы открывать все ссылки в новом окне браузера.


Элемент head

В разделе head html-страницы содержится общая информация о странице, называемая также мета-информацией. Термин «мета» расшифровывается как «информация об информации» или можно сказать, что это информация о данных.


Информация в разделе head

Элементы в разделе head не отображаются в окне браузера (я не беру в учет тег <title>, который отображается в заголовке браузера). В соответствии со стандартами HTML только несколько тегов могут быть помещены в раздел head. Это следующие теги: <base>, <link>, <meta>, <title>, <style> и <script>.

Посмотрите на следующую неправильную конструкцию:

<head>

<p>Это параграф</p>

</head>


Типичный раздел head

Что содержится в типичном разделе head? Давайте для примера рассмотрим раздел head текущей страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Зачем нужен раздел head в html // Вебшкола онлайн</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../style/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../style/ie.css">
<![endif]--><?php include '../google.txt' ?>
</head>

В самом начале html страницы идёт тег doctype. Этот тег указывает, какому стандарту соответствует код страницы. Говоря простым языком, существуют различные версии html (кода тегов или разметки), как разные языки, у каждого из которых свои правила, орфография и тд. Для того, чтобы браузер правильно отображал вашу страницу, нужно добавлять соответствующий doctype. Подробнее о версиях html и соответственно о различных doctype можно почитать здесь.

Затем начинается сама страница, она открывается тегом <html>. Структура простейшей страницы выглядит так:

doctype

<html>

<head>

стили, название страницы и тд

</head>

<body>

явно видимый текст страницы, фото, видео и тд

</body>

</html>

Главным тегом страницы является <html>, в него вложены <head>...</head> и <body>...</body>.

Давайте изучим подробнее раздел <head>...</head>. Тег <title>...</title> отвечает за текст, который будет отображаться во вкладке. Для браузера Гугл хром, если вы посмотрите на вкладку, там идёт название страницы, например, для текущей страницы это текст "Зачем нужен раздел head в html // Вебшкола онлайн". Для чего нужен этот текст и соответственно раздел? Текст из title отображается как название страницы в поисковике. От того, насколько "вкусным" вы составите описание страницы, зависит, как много людей клюнет на этот заголовок.

Раздел meta http-equiv указывает, в какой кодировке написана страница. Кодировки бывают разные, это тоже вроде различных языков, но в этот раз это касается самого текста. Я рекомендую использовать кодировку utf 8, т.е. можно скопировать кодировку из моего примера. Подробнее прочитать здесь.

<link rel="stylesheet" указывает на внешние файлы стилей. Подробнее об этом можно почитать в разделе css.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../style/ie.css">
<![endif]-->

Представленная выше конструкция добавляет стили только для определённого браузера, в данном случае для Internet Explorer. Дело в том, что разные браузеры обрабатывают код html по-разному. В некоторых случаях для отдельных браузеров приходится прописывать свои стили.

<?php include '../google.txt' ?>

Этот раздел, строго говоря, к html никакого отношения не имеет. Это уже язык программирования php. Он позволяет легко и просто вставлять отдельные куски текста на страницу. В данном случае, через этот код я вставляю на страницу файл google.txt, в котором у меня прописан счётчик посещений гугл. Прелесть php в том, что однажды вставив код вставки этого файла на все страницы сайта, в будущем мне достаточно будет изменить этот код (при его изменении) только в одном файле.


Теги раздела head

Тег Описание
<head> информация о документе
<title> заголовок документа
<base> указывает способ открывания всех ссылок в документе
<link> ссылка на ресурс
<meta> мета информация о html-документе
Тег Описание
<!DOCTYPE> Тип документа. Это тег должен идти раньше тега <html>

Интересное

Как вставить стили в раздел head

Использование мета-тегов в html

Использование скриптов в html



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА




ССЫЛКИ


Подпишись на новости сайта