The Body Element
The <body> element contains all the visible content of your webpage - everything users see and interact with.
The Body Element
Loading HTML Playground...
The <body> element:
- Contains all visible page content
- Should only appear once per document
- Comes after the closing
</head>tag - Is closed just before
</html>
Content Types in Body
The body can contain many types of content:
Loading HTML Playground...
Common body content:
- Headings (
<h1>-<h6>) - Paragraphs (
<p>) - Lists (
<ul>,<ol>,<li>) - Links (
<a>) - Images (
<img>) - Divisions (
<div>) - Semantic elements (
<header>,<main>,<footer>)
Block vs Inline Elements
Elements in the body are either block-level or inline:
Loading HTML Playground...
Block elements:
- Start on a new line
- Take up full width available
- Examples:
<div>,<p>,<h1>,<ul>,<section>
Inline elements:
- Stay on the same line
- Only take up as much width as needed
- Examples:
<span>,<a>,<strong>,<em>,<img>
Basic Page Layout
A typical page structure in the body:
Loading HTML Playground...
Exercise: Create Page Content
Create a complete body with a heading, two paragraphs, and a link:
Loading HTML Exercise...
The body is where all the magic happens - it's the canvas for your web content!