This article has been localized into Portuguese by the community.
Elementos bloco e em linha
Nós já vimos alguns dos elementos HTML5 de que uma página web é construída, e agora é hora de introduzir outra propriedade dos elementos HTML5. Existem dois tipos diferentes de elementos – elementos em linha e elementos bloco. O tipo do elemento, seja em linha ou bloco, afeta como o navegador renderiza o elemento.
Elementos bloco
Um elemento bloco é renderizado como um bloco, como o nome sugere. O elemento bloco é tão largo quanto ele pode ser, uma forma retangular que não quebra através das linas, e a largura e altura do elemento podem ser reguladas. Elementos bloco podem conter elementos em linha ou outros elementos bloco.
Elementos em linha
Os elementos em linha são tratados como fazendo parte do fluxo do documento, e geralmente o tamanho não deve ser alterado manualmente. Apenas elementos em linha podem estar contidos em elementos em linha. E para confundir ainda mais, elementos em linha são os únicos elementos que podem estar contidos em um elemento parágrafo, mesmo que o elemento <p> seja um elemento bloco.
O elemento <p></p> é um elemento bloco, enquanto que o elemento <b> é um elemento em linha. (b significa negrito e muda a aparência do texto)
Exemplos
O elemento bloco mais usado é o <div>. (Div é uma abreviação para divisão). O elemento <div> é um elemento bloco usado para separas os diferentes tipos de conteúdo na sua página web. Imagine que você tem duas entradas em um blog, constituídas da entrada propriamente dita, um título, seu nome e a data da publicação, elas podem ficar assim:
Just Another Day
Escrito por Christina
Em 11 de Janeiro
Este é meu segundo post no blog, e eu só queria dar uma olhada nele
My First Blog Entry
Escrito por Christina
Em 11 de Janeiro
Eu estou tão feliz em escrever meu primeiro post no blog - oba!
Como podemos ver, há duas postagens no blog, e nós as dividimos usando um elemento bloco, neste caso foi escolhido um <div>. Dentro desse elemento bloco, há um outro elemento bloco, o parágrafo (<p>). Usando somente o necessário para efetuar a marcação, o HTML da webpage deverá se parecer com algo tipo isso:
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Christina<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Christina<br />
On January 10th
</p>
<p>
I’m so happy to write my first blog entry – yay!
</p>
<div>
</body>
</html>O elemento <div> é usado para diferenciar as duas entradas do blog. Dentro de cada elemento <div> há dois parágrafo consistindo o título e o autor e o texto da postagem.
O elemento <div> é amplamente utilizado como um contêiner que pode aplicar formatação em qualquer lugar que você deseja em sua página da Web. A limitação é que os elementos <div> não lhe dizem nada sobre o conteúdo real. Assim, o navegador sabe que ele encontrou uma seção separada, mas não que tipo de seção. Em HTML5 diversos novos elementos foram introduzidos e alguns deles estão aqui para substituir o uso do <div>. Veja artigos sobre os novos elementos semânticos para definir a marcação semântica.
Eu falei anteriormente sobre elementos aninhados e o fato de que elementos <p> dentro de um elemento <div> é um exemplo de elementos aninhados.
O que você aprendeu
- Elementos de bloco são como quadrados
- Elementos em linha não tem quebras associadas ao elemento
- Você pode aninhar elementos de bloco dentro de outros elementos de bloco
- Mas você não pode aninhar elementos de bloco dentro de elementos em linha
- O parágrafo é o único elemento de bloco que deve conter somente elementos em linha
- O elemento <div> é atualmente usado como um recipiente, mas os novos elementos do HTML5 estão aí para mudar isso
