HTML Body Tag: Master The Most Important HTML Element Now
- 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
Contents
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).
Browser Support for body
All | All | All | All | All | All |