Head body html – HTML теги html, head, body — теги, которые есть на любой страничке интернета

Leave a Comment / Html / By /

HTML теги html, head, body — теги, которые есть на любой страничке интернета

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов… И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке — <html>, <head> и <body>. Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — тег-декларация <!DOCTYPE>, поэтому затрагивать его мы не будем.

HTML теги html, head, bodyВ прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про теги форматирования документа (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги <html>, <head> и <body> ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

Добавляем теги

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега <html>


Итак, тег является контейнерным (понятие и виды тегов). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.

Теоретически, он и сам может понять что и как. Ведь что такое браузер? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

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

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. Атрибут title — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

Атрибут Title

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Результат атрибута

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

Функция тега <head>


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

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

Title в теге head

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Это мета-тег отвечающий за

тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content=»text/html; charset=UTF-8″). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка

		<link href="http://monetavinternete.ru/.../style.css" rel="stylesheet" media="screen" type="text/css" />

указывает на то, что подключен (rel=»stylesheet») файл с каскадными таблицами стилей (type=»text/css»), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей.

Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с блогом на WordPress) — наличие тегов описания, ключевых слов и canonical. Я использую

плагин All in One SEO Pack, поэтому они и присутствуют в пределах <head>.

Все три являются частью внутренней оптимизации сайта. Тег описания может выступать в роли сниппета в поисковой выдаче (вопрос довольно спорный, но все-таки следует заполнить данный тег). С ключевыми словами, думаю, итак все понятно. А вот тег canonical указывает поисковой системе дублированные страницы (страницы, на которых имеется схожий контент) для того, чтобы не попасть под фильтр за неуникальность контента.

Функции тега <body>


Вот он — основной тег интернет-страницы. Все, что вы видите в окне своего браузера — содержимое тега <body>. Здесь находится все: и текст, и html-код, и изображения, и скрипты. Так что много рассказывать про данный тег не буду. Из атрибутов могу отметить несколько:
  1. Background — устанавливает определенный фон на всю веб-страницу. Источник вы указываете сами
  2. text — устанавливает цвет текста. Цвет, обычно, указывают в html-коде. Например, #8958FC
  3. bgcolor — устанавливает цвет фона, если не задано фоновое изображение с помощью первого атрибута
  4. bgproperties — параметр динамичности фона — прокручивать его вместе со всей страницей, или же оставить на месте.

Атрибутов много, плюс подходят почти все универсальные, поэтому расписывать все нет смысла.

Один интересный факт. Все вы знаете, что браузеры появлялись версия за версией и каждый мог разбирать определенное количество тегов. Возьмем один из первых браузеров — Интернет Эксплорер. Факт заключается в том, что в 1-ой версии поддерживался лишь <body>, во 2-ой — <html>, и, наконец, в 3-ей — <head>. Версии реализовывались довольно быстро, откуда можно сделать вывод о значимости тегов и скорости развития технологий.

Напоследок скажу, что не забывайте прописывать данные теги. Хотя сейчас каждая CMS — система управления контентом — делает это сама. До скорых встреч на страницах блога MonetaVInternete.ru!

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

Элемент <body> (от англ. «body» ‒ «тело») предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.).

Примечание: Открывающий тег элемента <body> может быть опущен, если первым элементом в нём не являются символ пробела, комментарий, элементы <script> или <style>. Закрывающий тег может быть опущен, если элемент body имеет содержимое или начальный тег, и за ним непосредственно не следует комментарий.

Синтаксис

<body>...</body>

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

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

Атрибуты

alinkУстарел в HTML5
Устанавливает цвет активной ссылки. Используйте вместо него свойство CSS color в сочетании с псевдоклассом :active.
backgroundУстарел в HTML5
Задает фоновый рисунок на веб-странице. Используйте вместо него свойство CSS background.
bgcolorУстарел в HTML5
Цвет фона веб-страницы. Используйте вместо него свойство CSS background-color.
bgpropertiesУстарел в HTML5
Определяет, прокручивать фон совместно с текстом или нет. Используйте вместо него свойство CSS background-attachment.
bottommarginУстарел в HTML5
Отступ от нижнего края окна браузера до контента. Используйте вместо него свойство CSS margin-bottom.
leftmarginУстарел в HTML5
Отступ по горизонтали от левого края окна браузера до контента. Используйте вместо него свойство CSS margin-left.
linkУстарел в HTML5
Цвет ссылок на веб-странице.
rightmarginУстарел в HTML5
Отступ от правого края окна браузера до контента.
Используйте вместо него свойство CSS margin-right.
scrollУстарел в HTML5
Устанавливает, отображать полосы прокрутки или нет. Используйте вместо него свойство CSS overflow.
textУстарел в HTML5
Цвет текста в документе. Используйте вместо него свойство CSS color.
topmarginУстарел в HTML5
Отступ от верхнего края окна браузера до контента. Используйте вместо него свойство CSS margin-top.
vlinkУстарел в HTML5
Цвет посещённых ссылок. Используйте вместо него свойство CSS color в сочетании с псевдоклассом :visited.

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

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

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

body { 
    display: block;
    margin: 8px;
}

body:focus { 
    outline: none;
}

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

Все используемые ранее атрибуты, были удалены из HTML5.

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

Элемент <body>

Пример HTML:

Попробуй сам
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Содержимое документа...
</body>
</html>

Спецификации

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

Элемент
<body> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<body> 1+ 1+ 6+ 1+

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Синтаксис 

<body>
  ...
</body>

Атрибуты

alink
Устанавливает цвет активной ссылки.
background
Задает фоновый рисунок на веб-странице.
bgcolor
Цвет фона веб-страницы.
bgproperties
Определяет, прокручивать фон совместно с текстом или нет.
bottommargin
Отступ от нижнего края окна браузера до контента.
leftmargin
Отступ по горизонтали от левого края окна браузера до контента.
link
Цвет ссылок на веб-странице.
rightmargin
Отступ от правого края окна браузера до контента.
scroll
Устанавливает, отображать полосы прокрутки или нет.
text
Цвет текста в документе.
topmargin
Отступ от верхнего края окна браузера до контента.
vlink
Цвет посещенных ссылок.

Также для этого тега доступны универсальные атрибуты и события.

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

Открывающий и закрывающий теги не обязательны.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег BODY</title>
  <meta charset="utf-8">
 </head>
 <body onload="alert('Документ загружен')">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат текущего примера показан на рис. 1. При использовании события onload тега <body> выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе

Тег HTML область контента. Атрибуты, параметры, закрывающий тег

Тег body определяет область контента страницы. Является обверткой для содержимого, отображаемого в основном окне браузера.

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

Синтаксис

<body>контент веб страницы</body>

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

По условиям спецификации HTML5 использовать закрывающий тег body не обязательно. Браузеры при этом ставят </body> тег автоматически, просчитывая его место в коде. Однако, во избежания внештатных ситуаций мы рекомендуем все-таки ставить закрывающий тег body вручную в документе.

Перед закрывающим тегом <body> часто ставят подключение скриптов JavaScript. Например, системные скрипты для работы сайта, скрипты визуальных элементов (галерей, слайдеров, эффектов плавности и т.п.), скрипты счетчиков посещаемости Google Analytics и Яндекс Метрика (рекомендации по месту установки счетчиков могут меняться, смотрите инструкции от Google и Яндекс на момент установки).

Пример использования <body> в HTML коде

<html>
<head>
<!-- содержимое head области -->
</head>
<body>
<!-- начало контента страницы -->
<p>Какой-то абзац</p>
<div>Какой-то блок</div>
<!-- конец контента страницы -->
</body>
</html>

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

Устаревшие атрибуты тега body

В HTML5 тег <body> не имеет параметров или атрибутов. Ниже в таблице приведены устаревшие атрибуты тега body. Используйте стилизацию с помощью CSS вместо них.

Атрибут Описание
alink Цвет активной ссылки (цвет ссылки при клике на нее)
background Фоновая картинка страницы
bgcolor Фоновый цвет страницы
link Цвет непосещенных ссылок
text Цвет текста на странице
vlink Цвет ссылок по которым был переход (посещенных данным пользователем)

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

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

Описание

HTML тег <body> определяет содержимое (контент) HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.). Он должен быть единственным в документе и всегда должен располагаться внутри элемента <html>, сразу после элемента <head>.

Тег <body> часто используется для размещения обработчиков событий, например onload, который позволяет выполнить скрипт после того, как содержимое документа будет загружено.

Примечание: все атрибуты (vlink, text, link, bgcolor, background, alink), ранее используемые с элементом <body>, считаются устаревшими и запрещены к использованию в HTML5, поэтому для определения цвета заднего фона, цвета текста или ссылок, а так же для добавления фонового изображения и т.д. используйте CSS.

Элемент <body> является блочным и по умолчанию имеет небольшой внешний отступ со всех сторон, его высота определяется его содержимым. Чтобы растянуть его на всю высоту окна браузера, нужно указать высоту для него и для элемента <html> равную 100%:

html, body { height: 100%; }

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

Атрибуты

Тег <body> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


body {
    display: block;
    margin: 8px;
}

body:focus {
    outline: none;
}

Пример


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>

  <body>
    Содержимое страницы
  </body>

</html>

Результат данного примера в окне браузера:

Пример использования тега <body>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *