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> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)
- 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.