Elementos block-level

Elementos HTML(Linguagem de marcação de hipertexto) historicamente foram categorizados como "nível de bloco" ouelementos "em linha". Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um "bloco". Este artigo ajuda a explicar o que isso significa.

Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:

Elementos em nível de bloco

HTML

html

<p>  Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para  exibir o elemento pai do parágrafo.</p>

CSS

css

p {  background-color: #8abb55;}

Utilização

Elementos nível de bloco podem aparecer apenas dentro do elemento<body>

Nível-de-bloco vs. em-linha

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

Modelo de conteúdo: Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.
Formatação padrão: Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.

A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo decategorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria deconteúdo de frases, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem aoconteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemploconteúdo interativo.

Elementos

A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).