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