Block & Inline

Cada elemento HTML tem um display-value padrão.
Existem dois tipos de display-value: block e inline.
Um elemento block pode conter um elemento inline, porém um elemento inline não pode conter um elemento block.

Block

Um elemento block sempre começa em uma nova linha.
O browser automaticamente adiciona um espaço (margem) antes e depois do elemento.
O elemento block ocupa toda a largura da página (se "estica" para a esquerda e direita da página o máximo possível).
Um elemento block pode conter um elemento inline.
Dois elementos block comuns são as tags p (novo parágrafo) e div (nova divisória).

Os elementos HTML block são os seguintes:

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

Div

A tag div é um elemento block.
Essa tag geralmente é usada para criar um "container" dentro da página.
Utilizando propriedades CSS dentro da tag div, você consegue isolar a formatação dentro dessa divisória.

Por exemplo, esse pedaço da página possui uma formatação diferente pois foi isolada usando a tag div.
Essa tag div foi formatada com CSS.

Inline

Um elemento inline não começa em uma nova linha.
Ele ocupa apenas o mínimo espaço necessário.
Um elemento inline não pode conter um elemento block.

Os elementos HTML inline são os seguintes:

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

Span

A tag span é um elemento inline.
Essa tag geralmente é usada para criar um "container" dentro de uma parte específica de um texto.
Utilizando propriedades CSS dentro da tag span, você consegue isolar a formatação nessa parte do texto.

Por exemplo, essa parte do texto foi isolada utilizando a tag span e foi formatada com CSS.