Html атрибуты body: Что должно присутствовать в теге Body – Тег body и его атрибуты.

Содержание

HTML тег body | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 07.03.2009

Тег <body> (с англ. тело) — тег-контейнер, определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<body>...</body>

Атрибуты

Основные Вспомогательные События

alinkзадает цвет активной ссылки (в момент нажатия). Не рекомендуется в спецификации HTML 4.01!
backgroundзадает URL фонового рисунка. Не рекомендуется в спецификации HTML 4.01!
bgcolorзадает цвет фона страницы
bgpropertiesпри установке bgproperties=»fixed» фон фиксируется и не прокручивается вместе со страницей
Отсутствует в спецификации HTML 4.01!
bottommarginопределяет отступ от нижнего края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
classопределяет имя используемого класса
dirзадает направление
  • ltr — направление слева направо (по умолчанию)
  • rtl — направление справа налево
idуникальный индетификатор
langопределяет язык отображаемого документа
leftmarginопределяет отступ от левого края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
linkзадает цвет ссылок. Не рекомендуется в спецификации HTML 4.01!
marginheightзадает высоту вехнего и нижнего полей документа
Работает только в браузерах Netscape.
Отсутствует в спецификации HTML 4.01!
marginwidthзадает ширину левого и правого полей документа
Работает только в браузерах Netscape.
Отсутствует в спецификации HTML 4.01!
onblurпотеря фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onclickщелчек на элементе
ondblclickдвойной щелчек на элементе
onerrorошибка сценария на странице.
Отсутствует в спецификации HTML 4.01!
onfocusполучение фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onkeydownнажатие клавиши, когда элемент имеет фокус
onkeypressнажатие и освобождении клавиши, когда элемент имеет фокус
onkeyupосвобождение ранее нажатой клавиши, когда элемент имеет фокус
onloadокончание загрузки страницы
onmousedownнажатие кнопки мыши, когда элемент имеет фокус
onmousemoveдвижение указателя мыши, когда элемент имеет фокус
onmouseoutсмещение указателя мыши с элемента
onmouseoverпомещение указателя мыши на элемент
onmouseupосвобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onresizeизменение пользователем размера окна.
Отсутствует в спецификации HTML 4.01!
onunloadвыгрузка браузером текущего документа из окна или фрейма
rightmarginопределяет отступ от правого края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
scrollуправляет отображением полос прокрутки
  • yes — отображает полосы прокрутки (по умолчанию)
  • no — запрещает показ полос прокрутки
Работает только в IE!
Отсутствует в спецификации HTML 4.01!
styleзадает встроенную таблицу стилей
textзадает цвет текста. Значение по умолчанию #000000. Не рекомендуется в спецификации HTML 4.01!
titleдобавляет всплывающую подсказку
topmarginопределяет отступ от верхнего края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
vlinkзадает цвет посещенных ссылок. По умолчанию для IE и Opera #800080, для Firefox #551a8b. Не рекомендуется в спецификации HTML 4.01!
Пример

<html>
<head>
...
</head>
<body background="fon.jpg" bgcolor="#302020" text="#EEE" link="#44C1DC" vlink="#721CA4">
...
тело документа.
...
</body>
</html>

Рекомендации по использованию
  • по спецификациям XHTML открывающий (<body>) и закрывающий (</body>) тег обязателен
  • включает в себя всю содержательную часть веб-страницы
  • может содержать блочные элементы, теги <script>, <ins> и <del>
  • взаимоисключающий элемент с тегом <frameset>
  • обязательных атрибутов нет
  • большинство атрибутов данного тега отсутствует либо не рекомендуется в спецификации HTML 4.01. Настройки, которые задают эти атрибуты можно и нужно выполнять, используя таблицы стилей
  • некоторые браузеры по умолчанию отображают элемент с отступами

Согласно спецификации HTML4.01 открывающий и закрывающий теги не обязательны. Тем не менее, рекомендуется их использовать, для четкого структурирования текста страницы.

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

Твой код:
<html> <head> <title></title> </head> <body> …тело документа… </body> </html> Сделай код и жми тут

Результат:
большой полигон

HTML тег body | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 22.01.2011

Тег <body> (с англ. тело) — тег-контейнер, определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<body>...</body>

Атрибуты

Основные Вспомогательные События

alinkзадает цвет активной ссылки (в момент нажатия). Не рекомендуется в спецификации HTML 4.01!
backgroundзадает URL фонового рисунка. Не рекомендуется в спецификации HTML 4.01!
bgcolorзадает цвет фона страницы
bgpropertiesпри установке bgproperties=»fixed» фон фиксируется и не прокручивается вместе со страницей
Отсутствует в спецификации HTML 4.01!
bottommarginопределяет отступ от нижнего края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
classопределяет имя используемого класса
dirзадает направление
  • ltr — направление слева направо (по умолчанию)
  • rtl — направление справа налево
idуникальный идентификатор
langопределяет язык отображаемого документа
leftmarginопределяет отступ от левого края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
linkзадает цвет ссылок. Не рекомендуется в спецификации HTML 4.01!
marginheightзадает высоту вехнего и нижнего полей документа
Работает только в браузерах Netscape.
Отсутствует в спецификации HTML 4.01!
marginwidthзадает ширину левого и правого полей документа
Работает только в браузерах Netscape.
Отсутствует в спецификации HTML 4.01!
onblurпотеря фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onclickщелчок на элементе
ondblclickдвойной щелчок на элементе
onerrorошибка сценария на странице.
Отсутствует в спецификации HTML 4.01!
onfocusполучение фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onkeydownнажатие клавиши, когда элемент имеет фокус
onkeypressнажатие и освобождении клавиши, когда элемент имеет фокус
onkeyupосвобождение ранее нажатой клавиши, когда элемент имеет фокус
onloadокончание загрузки страницы
onmousedownнажатие кнопки мыши, когда элемент имеет фокус
onmousemoveдвижение указателя мыши, когда элемент имеет фокус
onmouseoutсмещение указателя мыши с элемента
onmouseoverпомещение указателя мыши на элемент
onmouseupосвобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onresizeизменение пользователем размера окна.
Отсутствует в спецификации HTML 4.01!
onunloadвыгрузка браузером текущего документа из окна или фрейма
rightmarginопределяет отступ от правого края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
scrollуправляет отображением полос прокрутки
  • yes — отображает полосы прокрутки (по умолчанию)
  • no — запрещает показ полос прокрутки
Работает только в IE!
Отсутствует в спецификации HTML 4.01!
styleзадает встроенную таблицу стилей
textзадает цвет текста. Значение по умолчанию #000000. Не рекомендуется в спецификации HTML 4.01!
titleдобавляет всплывающую подсказку
topmarginопределяет отступ от верхнего края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
vlinkзадает цвет посещенных ссылок. По умолчанию для IE и Opera #800080, для Firefox #551a8b. Не рекомендуется в спецификации HTML 4.01!

Пример

<html>
<head>
...
</head>
<body background="fon.jpg" bgcolor="#302020" text="#EEE" link="#44C1DC" vlink="#721CA4">

...
тело документа.
...
</body>
</html>

Рекомендации по использованию

  • по спецификациям XHTML открывающий (<body>) и закрывающий (</body>) тег обязателен
  • включает в себя всю содержательную часть веб-страницы
  • может содержать блочные элементы, теги <script>, <ins> и <del>
  • взаимоисключающий элемент с тегом <frameset>
  • обязательных атрибутов нет
  • большинство атрибутов данного тега отсутствует либо не рекомендуется в спецификации HTML 4.01. Настройки, которые задают эти атрибуты можно и нужно выполнять, используя таблицы стилей
  • некоторые браузеры по умолчанию отображают элемент с отступами

Согласно спецификации HTML4.01 открывающий и закрывающий теги не обязательны. Тем не менее, рекомендуется их использовать, для четкого структурирования текста страницы.

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

Твой код:
<html> <head> <title></title> </head> <body> …тело документа… </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Урок 4: «Тело» сайта, тег «body»

HTML - Урок 4: "Тело" сайта, тег "body"
Давно я не писал уроков HTML, но сегодня решил это исправить — нужно продолжать изучать HTML язык. Итак, сегодня я расскажу про то, что такое «тело» сайта и немного про атрибуты данного тега.

«Тело» сайта — разговорный термин среди программистов и HTML верстальщиков. Под выражением «тело» сайта подразумевают теги

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

Тегу «body» можно задать атрибуты, например фон страницы или цвет текста. Фон HTML страницы задает атрибут bgcolor:

<BODY bgcolor="#00ff00"></BODY> 

Цвет страницы можно задать как шестнадцатизначным номером цвета, так и его названием из стандартной палитры цветов:
<BODY bgcolor="Green"></BODY>

Чтобы задать цвет текста, используется атрибут text. Оформляется он почти так же, как и атрибут bgcolor:

<BODY text="Red"></BODY>
либо
<BODY text="#FF0000"></BODY>

Атрибуты «bgcolor» и «text» можно использовать и одновременно:

<BODY bgcolor="Green" text="Red"></BODY>

Вместо bgcolor можно использовать другой атрибут — background. Этот атрибут позволяет назначить в качестве фона HTML страницы — картинку.

Оформляется этот атрибут следующим способом:

<BODY background="http://site.site/kartinka.jpg">

где site.site — адрес вашего сайта, а kartinka.jpg — изображение, которое будет фоном вашей HTML страницы.

Пример элементарного шаблона сайта с использованием атрибутов тега «body»:

<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="ключевые, слова" />
<meta name="description" content="описание сайта" />
<title>Наш сайт!</title>
</HEAD>
<BODY bgcolor="Green" text="Red">
Атрибуты тега "Body"!!! 
</BODY></HTML>

Скачать пример HTML шаблона: stranichkahtml.zip

Пример получился, конечно, не ахти, поэтому впереди Вас ждет ещё много уроков HTML!

Бюро Погодаева — продвижение сайта цены
Почта: [email protected]
Телефон: +7(495)966-28-77

При верстке шаблонов и дизайнов верстальщики редко используют атрибуты тега «body», обычно эти параметры задаются в CSS. Как подключить css-стили к шаблону можно прочитать в Уроке №3: Как подключить CSS стили оформления в шаблоне?. О том, как правильно оформить «тело» сайта, я расскажу в следующем уроке №5. И помните, что создание HTML сайта не так сложно, как это кажется в начале!

HTML против Body в CSS

HTML против Body в CSS

От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html.

Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.

Как элементы HTML и body связаны друг с другом

Давайте рассмотрим стандартную структуру базового HTML документа:

<!DOCTYPE html> <html lang=»en»> <head> <!— Мета-данные и т.д. —> </head> <body> <!— Здесь начинается контент —> <body> </html>

<!DOCTYPE html>

<html lang=»en»>

 

  <head>

    <!— Мета-данные и т.д. —>

  </head>

 

  <body>

    <!— Здесь начинается контент —>

  <body>

 

</html>

HTML против Body в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне.
Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор :root. Следующие два селектора являются равнозначными:

За исключением того, что селектор :root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1).

Поэтому нам следует всегда задавать глобальные стили для html, правильно?

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

Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:

background

bgcolor

marginbottom

marginleft

marginright

margintop

text

В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):

background — background

HTML против Body в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

bgcolor — background, background-color

marginbottom — margin-bottom

marginleft — margin-left

marginright — margin-right

margintop — margin-top

text — font

Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html.

Поэтому нам следует всегда задавать глобальные стили для body, правильно?

Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.

Работа с единицами измерения rem

Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого:

.module { width: 40rem; }

.module {

  width: 40rem;

}

Единица измерения rem, в данном случае, будет относительной по отношению к значению свойства font-size у элемента html, который и является корнем документа. Таким образом, элемент с классом .module будет масштабироваться в зависимости от того, какое значение задано у пользователя по умолчанию для корня документа.

У Джонатана Снука (Jonathan Snook) есть классическая статья, которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem.

Причудливое свойство background-color

Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html.

Если нужно, чтобы фоновый цвет заливал всю область просмотра, то лучше всего сразу задать его для элемента html.

Заключение

Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body.

Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS.
Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях!

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

HTML против Body в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее HTML против Body в CSS

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

| HTML | WebReference

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

Допускается применять несколько элементов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.

Синтаксис

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

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

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

Атрибуты

align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера <tbody>.
valign
Выравнивание содержимого ячеек по вертикали.

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TBODY</title>
 </head>
 <body>
  <table border="1">
   <tbody align="right">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td> 
    </tr> 
   </tbody>
  </table> 
 </body>
 </html>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

HTML теги

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

Следующие HTML теги используются для разделения таблицы на части:

  • Тег <thead> используется для содержания заголовка группы в таблице («шапка таблицы», не путайте с заголовками).
  • Тег <tfoot> используется для содержания «подвала» таблицы (футер).
  • Тег <tbody> используется для содержания «тела» таблицы (боди).


Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).


Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.

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

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
justify
char
Не поддерживается в HTML5.
Выравнивает содержимое внутри элемента.
charcharacterНе поддерживается в HTML5.
Выравнивает содержимое в элементе по заданному символу. Атрибут char может быть использован только если атрибут align = «char».
charoffnumberНе поддерживается в HTML5.
Атрибут, который позволяет произвести выравнивание в элементе с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char».
valigntop
bottom
baseline
middle
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого внутри элемента.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <tbody></title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>Услуга</th><th>Стоимость</th>
				</tr>
			</thead>
			<tfoot> <!-- Тег <tfoot> применяется для создания подвала таблицы. Его принято писать после тега<thead>, но отображается он в самом низу таблицы. -->
				<tr>
					<td>Сумма</td><td>3 000</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>Чтение в слух</td><td>1 000</td>
				</tr>
				<tr>
					<td>Игра на перфораторе</td><td>2 000</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Результат нашего примера:

Пример использования тегов <thead>, <tbody> и <tfoot>.

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

В HTML 5 были удалены все атрибуты тега.

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

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}

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

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

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

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

HTML теги

HTML vs Body в CSS

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

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

Как связаны html и body

Рассмотрим стандартную структуру для базового HTML документа:


<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata and such -->
    </head>

    <body>
        <!-- Where the content begins -->
    <body>
</html>

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

Непосредственно в <html> находятся только два элемента: <head> и <body>. На самом деле, спецификация определяет <body> прямо противоположно <head>, поскольку это два элемента, которые необходимо различать.

Итак, суть в том, что <html> является корневым элементом документа, а <body> является потомком, содержащимся в нем. Cелектор :root в CSS и html определяют одно и то же:


:root {

}
html {

}

Единственное отличие в том, что :root имеет большую специфичность: (0, 0, 1, 0) против (0, 0, 0, 1).

Таким образом, мы всегда должны применять глобальные стили к <html>, не так ли?

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

Но это не совсем так. На самом деле, ряд атрибутов в спецификации изначально был связан с элементом <body>:

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

Поскольку эти атрибуты в настоящее время считаются устаревшими, рекомендуется вместо них использовать соответствующие CSS свойства:

АтрибутCSS свойство
backgroundbackground
bgcolorbackground
background-color
marginbottommargin-bottom
marginleftmargin-left
marginrightmargin-right
margintopmargin-top
textfont

Учитывая, что эти свойства CSS возникли из встроенных атрибутов, которые были связаны с <body>, представляется целесообразным применять их непосредственно к <body> в CSS, а не к элементу <html>.

Таким образом, мы всегда должны применять глобальные стили к <body>, не так ли?

Ну, не совсем. Все-таки есть ситуации, где имеет смысл применить стили к <html>. Давайте рассмотрим пару таких сценариев.

Работа с единицами измерения rem

Единица измерения rem связана с корнем документа. Например, если написать что-то вроде этого:


.module {
    width: 40rem;
}

Единица измерения rem рассчитывается относительно font-size элемента <html>, который является корнем документа. Таким образом, класс .module будет масштабироваться относительно корневого уровня.

Классический пост Джонатана Снука прекрасно иллюстрирует, как задать font-size элемента <html> в процентах для работы с rem.

Хитрый background-color

Существует одна странная вещь в CSS, если задать background-color элементу <body>, он заливает весь вьюпорт, даже если элемент не занимает все пространство. Если при этом задать background-color для <html>, этого не происходит.

Подводя итог

Надеюсь, эта статья проливает некоторый свет на ключевые различия между использованием <html> и <body> в CSS. Есть также различия в JavaScript. Например, получить элемент <html> можно с помощью document.rootElement, а <body> с помощью document.body.

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

Есть ли у вас другие примеры, где это имеет смысл задавать стили именно для <html> или для <body>?

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

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