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>-
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.
<header>-
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.