Основы HTML. Секция head

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

html_head

  • <html> – корень любого HTML документа, в котором располагаются все остальные секции (данный тег должен быть в единственном экземпляре, и должен присутствовать на каждой странице).
  • <head> – заголовок в котором прописывается служебная информация и инструкции браузеру, по отображению контента.
  • <body> – основная секция в которой находится контент, то есть вся полезная информация (текст, картинки, видео). Помимо контента, в этой секции расположена сетка сайта, либо его макет – описано местоположения основных разделов сайта, таких как: шапка, подвал, главное меню, боковые колонки, и т.д.

Тег <html> ничем особым не отличается, кроме того, что это есть корневой элемент – контейнер для всех остальных блоков. Поэтому приступим к более детальному рассмотрению секции <head>.

Элементы данной секции напрямую не показываются на веб странице. Единственный тег из данной секции, который будет отображать информацию – это тег <title>. В теге <title>, секции <head>, прописывается заголовок веб-страницы этот текст будет выведен в строке заголовка окна браузера.

<html>
  <head>
    <title>Заголовок, будет выведен в строке заголовка браузера</title>
  </head>
  <body>
    <!—Тут будет размещен контент—>
  </body>
</html>

Данный тег является единым обязательном тегом в секции <head>.

title-in-head

Кроме тега <title>, в этой секции можно размещать следующие теги: <link>, <meta>, <script>, <style>.

Тег <link>

Этот тег указывает браузеру где находятся некие внешние ресурсы, например, внешние стили (CSS). Также при помощи тега <link> и указания соответствующего атрибута rel, можно указать адрес канала RSS, фавиконку для сайта, и другие внешние ресурсы.

<head>
  <link rel="stylesheet" type="text/css" href="theme.css" />
  <link rel="alternate" type="application/rss+xml"
        title="Генеральский чай" href="http://generaltea.ru/feed/">
  <link rel="shortcut icon" href="http://generaltea.ru/favicon.ico">
</head>

Тег <meta>

Это универсальный тег, который описывает данные. Тег <meta> предоставляет метаданные о документе HTML браузеру. Метаданные, не отображаются, а только используются для служебных целей, либо движком браузера, либо поисковыми пауками. Мета элементы, как правило, используется для описания страницы (description), указания ключевых слов (keywords), указание автора документа (author), указания типа контента и его кодировки, и другие метаданные.

<head>
  <meta name="description" content="Описание отсюда, выводится поисковиками" />
  <meta name="keywords" content="HTML,CSS,верстка" />
  <meta name="author" content="Sergii Mykhailov" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

Тег <script>

С помощью данного тега, можно указать браузеру, где он должен искать внешние скрипты:

<head>
  <script type="text/javascript"
          src="http://generaltea.ru/wp-includes/js/jquery/jquery-v1.4.2.js">
  </script>
</head>

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

<head>
  <script type="text/javascript">
    document.write("Hello World!")
  </script>
</head>

Тег <style>

Данный тег можно использовать, для того, чтобы задать стили, необходимые, только для этой странички, а также, если нету необходимости подключать внешний файл стилей, при помощи тега <link>. Можно задавать более чем один тег <style>

<head>
  <style type="text/css">
    h1 {color: red}
    p  {color: blue}
  </style>
</head>

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

Категории: Верстка, HTML, CSS  Теги: , ,
  1. Трэкбеков пока нет.
  1. Комментариев пока нет.
:D :) ^_^ :( :o 8) ;-( :lol: xD :wink: :evil: :p :whistle: :woot: :sleep: =] :sick: :straight: :ninja: :love: :kiss: :angel: :bandit: :alien: