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

<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. 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> 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>, <h2>, <h3>, <h4>, <h5>, <h6>
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