Artigo original: Inline Elements and Block Elements in HTML - Explained
Elementos de bloco e em linha
Vamos entender os elementos de bloco e os elementos em linha usando os exemplos abaixo:
Exemplo de código e resultados:
Elementos de bloco:
Um elemento de bloco (em inglês, block) ocupa todo o espaço do pai (contêiner), como <div> e <p> no exemplo.
Note que ambos, <div> e <p>, começam em uma nova linha, formando uma estrutura semelhante a um bloco. Elementos de bloco começam em novas linhas.
Elementos de bloco comuns são <div>, <p>, <article>, <section>, <figure>, <footer> etc.
Elementos em linha:
Elementos em linha (em inglês, inline), como o nome diz, estão "incluídos como parte do texto principal e não como uma seção separada". Elementos em linha ocupam o espaço conforme necessário dentro do espaço definido pelo elemento principal. Diferentemente dos elementos de bloco, eles não começam em novas linhas.
Alguns dos elementos em linha são <a>, <span>, <img>, <code>, <cite>, <button>, <input> etc.
Exemplo de código e resultados:
Observação: elementos de bloco podem conter outros elementos de bloco ou elementos em linha. Elementos em linha não podem conter elementos de bloco.
Mudanças no HTML5
Embora a compreensão dos elementos de bloco e em linha ainda seja relevante, você deve estar ciente de que esses termos foram definidos em versões anteriores da especificação do HTML.
No HTML5, um conjunto mais complexo de "categorias de conteúdo" substitui os elementos de nível bloco e em linha. Elementos de bloco são amplamente colocados na categoria "conteúdo de fluxo" no HTML5, enquanto os elementos em linha correspondem à categoria "conteúdo de frase".
Para mais informações sobre as novas categorias de conteúdo no HTML5, incluindo o conteúdo de fluxo e o conteúdo de frase, consulte a página de categorias de conteúdo na Mozilla Developer Network.
Leia mais sobre o HTML aqui.