Elementos block-level

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha” (en-US). 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

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

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 de categorias de conteúdo (en-US). Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases (en-US), 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 ao conteúdo de fluxo (en-US), em HTML5. Existem também categorias adicionais, por exemplo conteú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).

<address>: Informação de contato.
<article> HTML5: Conteúdo do artigo.
<aside> HTML5: Conteúdo lateral.
<blockquote>: Citação longa ("bloco").
<details>: Widget de divulgação.
<dialog>: Caixa de diálogo.
<dd>: Descreve um termo em uma lista de descrição.
<div>: Divisão de conteúdo.
<dl>: Lista de descrição.
<fieldset>: Rótulo de conjunto de campos.
<figcaption> HTML5: Legenda da figura.
<figure> HTML5: Groups media content with a caption (see <figcaption>).
<footer> HTML5: Section or page footer.
<form>: Input form.
<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US): Heading levels 1-6.
<header> HTML5: Section or page header.
<hgroup> HTML5: Groups header information.
<hr>: Horizontal rule (dividing line).
<li>: List item.
<main>: Contains the central content unique to this document.
<nav>: Contains navigation links.
<ol>: Ordered list.
<p>: Paragraph.
<pre>: Preformatted text.
<section> HTML5: Section of a web page.
<table>: Table.
<tfoot>: Table footer.
<ul>: Unordered list.
<video> HTML5: Video player.

Veja também

Elementos Emlinha