The difference between html tags and body tags in CSS.

title: The Difference Between html and body Tags in CSS
date: '2022-11-20'
tags: ['html', 'blog translation']
draft: false
summary: ''

Original Article: HTML vs Body in CSS

The difference between the <html> and <body> tags is often overlooked. It seems like a small matter. I must admit, I have a bad habit of applying all global styles to the <body> tag, and when the effect is not ideal, I move them to the <html> tag without thinking.

However, there are differences, and whether we are CSS veterans or beginners, we should be aware of them. We will discuss these in this article and consider some practical applications where their differences may be meaningful.

Consider the standard structure of a basic HTML document:

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

  <head>
    <!-- Metadata and such -->
  </head>

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

</html>

The specification defines the <html> tag as the root element of the document. In the example above, we can clearly see that the <html> element is the top-level element of all others. Its responsibility ends there, as there are no other levels beyond the level where styles can be inherited.

From there, the <head> and <body> tags make up the two elements directly nested within the <html> tag. In fact, the specification directly contrasts the <body> tag with the <head> tag, as these are the only two elements that need to be distinguished.

Therefore, the bottom line here is that <html> is the root element of the document, while <body> is a child element contained within it. In fact, in CSS, there is a :root selector. Their targets are exactly the same:

:root {
}
html {
}

Note: The root has higher specificity: (0,0,1,0) vs (0,0,0,1).

Should we always put global styles on `<html>`?#

It is easy to think that any styles we want to inherit throughout the document should be directly applied to <html>, as it is the root element of the document. <html> encompasses the scope of responsibilities of <body>.

But that is not the case. In fact, the inline attributes in the following code were initially assigned to the <body> tag in the specification:

background
bgcolor
marginbottom
marginleft
marginright
margintop
text

Although these attributes are now considered deprecated, it is recommended to use the corresponding CSS properties instead of them:

Inline Attribute	CSS Property
background	background
bgcolor	background / background-color
marginbottom	margin-bottom
margintop	margin-top
marginleft	margin-left
marginright	margin-right
text	font

Considering that these CSS properties originated from inline attributes written for the <body> tag, they should also be directly applied to the <body> in CSS, rather than pushing them into the <html> element, which seems appropriate.

Should we always put global styles on `<body>`?#

Well, not entirely. There may be cases where applying styles to <html> makes more sense. Let's consider a few scenarios.

Using rem units#

The rem unit is relative to the document root. For example, when writing something like this:

.module {
  width: 40rem;
}

The rem unit is relative to the font size of the <html> element, which is the document root. Therefore, setting the font size of <html> to a user default value is a good practice for scaling the value of the .module class.

Jonathan Snook has a classic article that explains well how to set the font size of <html> as a percentage, which can be used as a reset when using rem units.

Quirky background colors#

In CSS, there is a quirk where the background color on the <body> tag floods the entire viewport, even if the measurements of the element itself do not cover the entire area. This does not happen unless a background color is set on the html element.

If you don't want the entire viewport to be the target, it might be wise to set it on the HTML element instead.

Summary#

I hope this helps everyone understand the key differences between using <html> and <body> in CSS. JavaScript also has differences. For example, you don't need to query, html is the document.rootElement, and body is document.body.

We could certainly draw out more technical differences between the two, but the focus here is to improve our understanding in order to make better decisions when writing CSS.

Do you have other examples where styling one makes more sense than the other? Or perhaps you have a different set of standards for when to design one? Let us know in the comments.