Read more

About the HTML and the BODY tag

Dominik Schöler
July 20, 2016Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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

Posted by Dominik Schöler to makandra dev (2016-07-20 12:35)