Elementos block-level

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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; its background has been colored to display the paragraph's parent element.</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>
Contact information.
<article> HTML5
Article content.
<aside> HTML5
Aside content.
<blockquote>
Long ("block") quotation.
<dd>
Definition description.
<div>
Document division.
<dl>
Definition list.
<fieldset>
Field set label.
<figcaption> HTML5
Figure caption.
<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