(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');


  • 1 Code Example
  • 2 The most important… and the simplest
  • 2.1 Styling the <body>
  • 2.2 Targeting the <body>
  • 3 Browser Support for body
  • 4 Attributes of body
  • 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 Wood
    Adam is a technical writer who specializes in developer documentation and tutorials.

    Browser Support for body