Block and Inline Elements in HTML: What You Need to Know

Block and Inline Elements in HTML is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

Each element in HTML has a default display value, depending on which element it is. The default display value of most elements is block or inline.

Block elements

Block elements typically start at the beginning of the line and take up the full width possible (from left to right)

address	dt	hr
article	fieldset	li
aside	figcaption	main
blockquote	figure	nav
canvas	footer	noscript
dd	form	ol
div	h1-h6	output
dl	header	p
pre	table	ul
section	tfoot	video

Inline element

The inline element does not start a new line and takes only the required width.

Inline Elements in HTML

a	cite	label
abbr	code	map
acronym	dfn	object
b	em	q
bdo	i	samp
big	img	script
br	input	select
button	kbd	small
span	strong	sub
sup	textarea	time
tt	var

div element

The div element is typically used to contain other HTML elements, it has no required attributes but style, class and id are common attributes. When used with CSS, the div element can help style the content block.

span element

The span element is typically used to contain text elements in HTML, it has no required attributes but style, class and id are common attributes. When used with CSS, the span element can help style the content block.