Web Development / Frontend / HTML

Body Element in HTML

The <body> element contains all visible content on a web page — text, images, links, forms, and everything else the user sees and interacts with. There can be only one <body> per HTML document, and it follows the <head> element.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Visible Heading</h1>
<p>Visible paragraph.</p>
</body>
</html>

Live Output Window

Elements inside the <body> are categorised into two display types: block and inline.

Block Elements

Block elements start on a new line and take up the full width available (by default). They create a “block” in the page layout.

HTML

<h1>Heading 1</h1>
<p>This paragraph is a block element.</p>
<div>A generic block container.</div>
<ul>
<li>List item</li>
</ul>

Live Output Window

Common block elements:

Element	Purpose
`<h1>`–`<h6>`	Headings
`<p>`	Paragraph
`<div>`	Generic container
`<section>`	Thematic section
`<article>`	Self-contained content
`<header>`	Introductory content
`<footer>`	Footer of a section
`<nav>`	Navigation links
`<main>`	Main content
`<aside>`	Sidebar content
`<ul>`, `<ol>`, `<li>`	Lists
`<table>`	Table
`<form>`	Form
`<blockquote>`	Long quotation
`<pre>`	Preformatted text
`<hr>`	Horizontal rule

Characteristics:

Starts on a new line
Stretches to fill its parent’s width
Can contain other block elements and inline elements
Respects width, height, margin, and padding CSS properties

Inline Elements

Inline elements do not start on a new line. They sit beside each other on the same line, wrapping only when needed. They take up only as much width as their content.

HTML

<p>This is <strong>important</strong> text with an <a href="#">inline link</a>.
<span>A span is inline</span> and an <img src="icon.png" alt="icon"> is too.</p>

Live Output Window

Common inline elements:

Element	Purpose
`<span>`	Generic inline container
`<a>`	Hyperlink
`<strong>`	Strong importance (bold)
`<em>`	Emphasis (italic)
`<img>`	Image
`<br>`	Line break
`<code>`	Code snippet
`<input>`	Form input
`<label>`	Form label
`<button>`	Clickable button
`<abbr>`	Abbreviation
`<sub>`, `<sup>`	Subscript / Superscript
`<small>`	Small print

Characteristics:

Stays on the same line as adjacent content
Only takes the width of its content
Cannot contain block elements (except <a> in HTML5)
width and height CSS properties have no effect
Top/bottom margin and padding do not push adjacent content away

Block vs Inline Elements

Feature	Block	Inline
Line break before/after	Yes	No
Default width	100% of parent	Content width
Can contain block elements	Yes	No (generally)
Can contain inline elements	Yes	Yes
`width` / `height`	Works	No effect
`margin` top/bottom	Works	No effect
`padding` top/bottom	Works	Visually works but doesn’t affect flow

Visual example:

HTML

<!-- Block elements stack vertically -->
<div>Block 1</div>
<div>Block 2</div>

<!-- Inline elements sit side by side -->
<span>Inline 1</span>
<span>Inline 2</span>

Live Output Window

Rendered:

’ /> Block 1 Block 2

Inline 1 Inline 2 ’ />

Inline-block hybrid

CSS display: inline-block combines features of both:

HTML

<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>

Live Output Window

These boxes sit on the same line (like inline) but respect width/height (like block).