Aula 012: Páginas HTML são compostas por elementos HTML
Autor: Uai Cartões Bh | Publicado: 2012-05-11T08:39:00-03:00


Essa é mais uma daquelas aulas que costumo chamar de "Leia tudo de novo para aprender mais".




O Elemento HTML



Veja na tabela abaixo, como é formado um elemento HTML:







Repare que a estrutura é padrão e se repete nas diversas tags existentes no HTML. Vale a pena analisar a tag de quebra de linha &lt;br/&gt;. Como ela não possui duas tags, nós apenas a abrirmos e fechamos na mesma tag, uma vez que não existe conteúdo nesse tipo de elemento.




Algumas informações importantes



Um elemento HTML sempre se inicia com uma tag de abertura;
Um elemento HTML sempre termina com uma tag de fechamento;
Chamamos de conteúdo do elemento tudo o que está entre as tags de abertura e fechamento;
Alguns elementos HTML não possuem conteúdo (é o caso do &lt;br/&gt;);
Elementos vazios (como o &lt;br/&gt;) são fechados já na tag de abertura;
A maioria dos elementos HTML possuem algum tipo de atributo, como veremos em breve.



Os elementos HTML são aninhados

Um documento HTML possui diversos elementos HTML aninhados, isso que dizer que, esses elementos podem ser relacionar entre si como numa espécie de ninho, entrelaçando suas tags. Alguns geralmente são colocados uns dentro do outro formando - assim - o documento que deverá ser interpretado pelo navegador.



&lt;html&gt;

&lt;/html&gt;

Acima temos um elemento HTML.&nbsp;





&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&lt;/html&gt;

O documento acima possui 2 elementos HTML. Repare que incluímos outro elemento dentro do elemento &lt;html&gt;&lt;/html&gt;. É a esse processo que chamamos de aninhamento.








&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;



&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&lt;/html&gt;


O documento acima possui 3 elementos HTML. Incluímos mais um elemento dentro do elemento-pai &lt;html&gt;&lt;/html&gt;








&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;



&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Isso é um parágrafo.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&lt;/html&gt;


O documento acima possui 4 elementos HTML.








Explicando a estrutura acima

O elemento &lt;p&gt;:



&lt;p&gt;Isso é um parágrafo.&lt;p&gt;



O elemento &lt;p&gt; define um parágrafo em HTML. Ele possui uma tag de abertura &lt;p&gt; e uma tag de fechamento &lt;/p&gt;. Tudo o que estiver entre essas duas tags, chamaremos de conteúdo do elemento, que nesse caso é Isso é um parágrafo.





O elemento &lt;body&gt;:



&lt;body&gt;

&lt;p&gt;Isso é um parágrafo.&lt;p&gt;


&lt;/body&gt;



O elemento &lt;body&gt; define todo o corpo do documento. Body em inglês quer dizer corpo. Ele sempre terá uma tag de abertura &lt;body&gt; e uma tag de fechamento &lt;/body&gt;. O elemento que está dentro de &lt;body&gt; é um outro elemento HTML (O elemento &lt;p&gt;).





O elemento &lt;html&gt;:



&lt;html&gt;




&lt;body&gt;



&lt;p&gt;Isso é um parágrafo.&lt;p&gt;



&lt;/body&gt;




&lt;/html&gt;



O elemento &lt;html&gt; define todo o documento HTML. Chamamos de elemento pai. Ele possui uma tag de abertura &lt;html&gt; e uma tag de fechamento &lt;/html&gt;. Repare que o elemento &lt;html&gt; possui dentro de seu conteúdo outros elementos HTML. A essa estrutura damos o nome de aninhamento. Portanto, retomamos e confirmamos o título acima: Os elementos HTML são aninhados.



Dica 1: Feche sempre todos os elementos

Se você esquecer de fechar uma tag HTML, seu documento poderá apresentar erros e não serem visualizados corretamente no navegador do cliente. Então jamais se esqueça de fechar as tags HTML.



[1] &lt;p&gt;Isso está errado.

[2] &lt;p&gt;Isso está errado.

[3] &lt;p&gt;Isso também está errado.&lt;p&gt;



Nos exemplos acima encontramos erros na linguagem, entretanto, os navegadores irão mostrar o seu conteúdo normalmente, mas evite cometer erros como esses. Nos casos [1] e [2], esquecemos de fechar a tag de parágrafo. No caso [3] fechamos a tag com uma tag de abertura, quando o correto deveria ser uma tag de fechamento.




[1] &lt;p&gt;Isso foi corrigido.&lt;/p&gt;

[2] &lt;p&gt;Isso foi corrigido.&lt;/p&gt;

[3] &lt;p&gt;Isso também foi corrigido.&lt;/p&gt;




Dica 2: Elementos Vazions



Elementos HTML que não possuem conteúdo são chamados de elementos vazio. A tag &lt;br&gt; é um elemento vazio, pois ela apenas quebra uma linha no navegador, sem a necessidade de apresentar nenhum texto em seu conteúdo.



Em XHTML (iremos falar sobre isso futuramente), definimos que todas as tags vazias devem apresentar o seu fechamento em sua própria tag de abertura.



[1] &lt;br&gt; (Isso está incorreto, mas funciona nos navegadores.

[2] &lt;/br&gt; (O problema foi corrigido, segundo as normas do XHTML)



Dica 3: Use sempre letras minúsculas nas tags HTML



Apesar de não existir problemas quanto a isso, os elementos HTML devem ser sempre escritos com letra minúscula. A partir da versão 4 do HTML, a 3WC (World Wide Web Consortium) recomenda que usemos apenas letras minúsculas em nossos documentos.&nbsp;



[1] &lt;P&gt;Isso é um parágrafo mal construído.&lt;/P&gt;

[2] &lt;H1&gt;Isso é um título mal construído.&lt;/H1&gt;



Em XHTML também temos essa norma: devemos escrever toda a nossa linguagem, utilizando letra minúscula.




[1] &lt;p&gt;Isso é um parágrafo corrigido, segundo as normas da 3WC.&lt;/p&gt;

[2] &lt;h1&gt;Isso é um título corrigido, segundos as normas da 3WC.&lt;/h1&gt;




Vamos parar por aqui hoje. Continue estudando e praticando o que já aprendemos até aqui. Na próxima aula, vamos falar dos atributos dos elementos HTML e como documentá-los corretamente.



Até mais!