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 <html> and <body> tags is easily overlooked. It may seem 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 <html> 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.
How HTML and body are related#
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 <html> as the root element of the document. In the example above, we can clearly see that the <html> element is the top-level element for all other elements. Its responsibility ends there, as there are no other levels beyond the level where styles can be inherited.
From there, <head> and <body> are the two elements directly nested within <html>. In fact, the specification directly contrasts <body> with <head> as the only two elements that need to be distinguished.
Therefore, the bottom line here is that <html> is the root element of the document, and <body> is a child element contained within it. In fact, in CSS, there is a :root selector. They target the same thing:
: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 entire page should be directly applied to <html> since 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 <body> 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:
| 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 <body>, they should also be directly applied to <body> in CSS instead of 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 values within the .module class.
Jonathan Snook has a classic article that nicely explains how setting the font size of <html> as a percentage can be used as a reset when using rem units.
Quirky background colors#
In CSS, there is a quirk where the background color on <body> floods the entire viewport, even if the element itself does 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, then setting it on the HTML element may be wise.
Summary#
Hopefully, 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 so that we can 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.