Elementos block-level

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como "nível de bloco" ou elementos "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 de categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteú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 ao conteúdo de fluxo, 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>

Conteúdo do artigo.

<aside>

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>

Legenda da figura.

<figure>

Groups media content with a caption (see <figcaption>).

Section or page footer.

<form>

Input form.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Heading levels 1-6.

Section or page header.

<hgroup>

Groups header information.

<hr>

Horizontal rule (dividing line).

<li>

List item.

<main>

Contains the central content unique to this document.

Contains navigation links.

<ol>

Ordered list.

<p>

Paragraph.

<pre>

Preformatted text.

<section>

Section of a web page.

<table>

Table.

<tfoot>

Table footer.

<ul>

Unordered list.

<video>

Video player.

Veja também