The Document Body

After the closing </head> tag, an HTML document can contain only one main element: the <body>.

Code Block Loading...

Just like the <head>, the <body> is a required part of the HTML page structure. It must appear exactly once inside the <html> element.

The <body> contains all the visible content of the page—text, images, links, buttons, and more. Technically, the opening and closing <body> tags are optional in modern browsers, but it's considered good practice to include them for clarity and consistency.

In the upcoming chapters, we’ll explore the wide range of tags you can use inside the body to build your page content. But first, it's important to understand the difference between block-level and inline elements.

Block Elements vs Inline Elements

Visual elements within the <body> of an HTML page are generally categorized into two types:

  • Block elements: Examples include <p>, <div>, headings (<h1> to <h6>), <ul>, <ol>, and <li>.
  • Inline elements: Examples include <a>, <span>, <img>, <strong>, and <em>.

Key Differences

  • Layout behavior:
    • Block elements occupy the full width available and start on a new line.
    • Inline elements flow within the line and can sit side-by-side with other inline elements.
  • CSS styling:
    • Block elements support properties like width, height, margin, padding, and border.
    • Inline elements do not respond to width and height unless their display type is changed.
  • Customizing display:
    • You can override the default behavior using CSS. For example:

Code Block Loading...

Nesting rules:

  • Inline elements can be placed inside block elements.
  • Block elements generally cannot be placed inside inline elements.
  • Some block elements can contain other block elements, but not all. For instance, a <p> tag cannot contain another block element like <div>.