HTML Body Tag: Master The Most Important HTML Element Now

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Document Structure Before And After HTML5 – Here’s What Changed
What does HTML Body Tag: Master The Most Important HTML Element Now do?
The <body> element contains the entire content of a webpage. It must be the second element inside of the parent <html> element, following only the <head> element.
Display
block
Usage
structural

Code Example

<!DOCTYPE html> <html>  <head>  .  .  .  </head>  <body>   <!-- Page content goes here -->  </body> </html> 

The most important… and the simplest

The <body> element may be the most important HTML element there is. The contents of the <body> element are what actually get displayed to the user visiting your web page or viewing your document. And yet, it is very simple. The <body> must be a direct child of <html>, it must come after <head> (if <head> is present, which it doesn’t have to be), there can be only one of it, and … that’s it.

Styling the <body>

In previous versions of HTML (and in some proprietary browser markup schemes) there were a number of styling attributes available for the <body>. All of these have been deprecated in HTML5. Any styling you want to do on the <body> should be put into your CSS. And, in fact, <body> is a great place to put all the CSS that should affect the document display as a whole: things like fonts and typography, text and background colors, and other other “default” styling.

body {  font-family: "Adobe Garamond Premier Pro", Garamond, "Linux Libertine", Baskerville, Georgia, serif;  font-weight: normal:  font-size: 18px;  color: #111111;  background-color: #fefefe;  padding: 1em;  width: 95vw;  max-width: 950px;  margin: 0 auto; } 

Targeting the <body>

In content management systems, it is a common practice to place a list of content-specific CSS classes into the <body> element. This allows designers and JavaScript developers to target pages based on specific content attributes, such as category, tags, or content type.

<body class="post post-single post-template-default tag-html tag-element tag-document category-markup category-html post-123 with-comments social-sharing-on logged-in"> 

These classes are added programmatically by different components and plugins, and provide an easy way for developers to target styling or functionality at highly specific sets of pages (and if they never get used, they aren’t causing any problems).

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for body

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll