<HTML> и <BODY>

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

Тем не менее необходимо понимать разницу между этими элементами.

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

Стандартная структура для веб-документа выглядит примерно так:


<!DOCTYPE html>
<html lang="en">
    <head>

    </head>

    <body>

    <body>
</html>

Данная структура определяет тег <html> как корневой элемент документа, и здесь ясно видно, что стили унаследовать не от кого

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

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

Единственное отличие в том, что :root имеет большую специфичность: (0, 0, 1, 0) против (0, 0, 0, 1). Исходя из этого, мы просто обязаны применять все глобальные стили к <html>, не так ли? Элемент <html> идет выше <body> в иерархии, поэтому должен содержать все глобальные стили. На самом деле, это не совсем так. Имеется несколько атрибутов, которые в спецификации изначально связаны с элементом <body>

background, background-color, margin-bottom, margin-left, margin-right, margin-top, font

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

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


.module {
    width: 40rem;
}

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

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

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

Если углубиться в познания CSS и JavaScript можно найти еще немало различий между этими элементами.

Поделитесь статьей со своими друзьями