About the HTML and the BODY tag

The <html> and <body> tags both come with some non-default behavior that you know from other tags.
Do not try to style html or body for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.

Generally speaking:

  • Use the html tag to define your page's default background color (because on short pages or large screens, your body may not be as tall as the browser window).
  • Use the html tag to define a base font-size so you can use rem units Show archive.org snapshot in CSS.
  • Use either html or body tag to define font-family and color
  • Use a div inside the body for anything else (width, positioning, you name it).

Some extra information:

  • The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
  • In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.
  • Events triggered on an element bubble up to body, then html, then the document. The document has no visual representation on the page.

Further reading

Dominik Schöler Almost 8 years ago