Você está na página 1de 5

Introduo ao HTML5 e seus novos elementos

1. Caminho at o HTML5

A WEB foi criada numa instituio (CERN) para troca de informaes entre cientistas.
Em toda a sua existncia ela se expandiu e foi se transformando, como tambm se
transformaram os meios de transporte da informao: as pginas de WEB.

Dada a sua utilizao inicial, a linguagem HTML oferecia as facilidades necessrias para a
criao de documentos com a aparncia de artigos cientficos. Quando foi necessria uma
apresentao diferente, passou-se a utilizar tabelas com bordas invisveis para permitir um
livre posicionamento de elementos dentro de uma pgina. Isso o que chamamos de layout
baseado em tabelas, o que permitiu a criao de pginas mais bonitas e acabou facilitando a
expanso da internet para alm dos meios cientficos.

A popularizao da WEB mostrou que a forma de construir pginas apresentava diversos


problemas. A uniformidade de pginas dentro de um site muito difcil de ser mantida j que
a informao de aparncia estava misturada ao contedo das pginas. O layout de tabelas
tambm no permite que seja definida com clareza a estrutura de um documento, o que
uma informao importante para mecanismos de busca. Por fim, este tipo de layout um
desastre para a acessibilidade.

A definio do padro CSS (Cascade Style Sheets) permitiu que se retirassem as


informaes de aparncia de dentro do documento HTML. Os estilos de posicionamento
contidos na definio do CSS, aplicados sobretudo a tag <DIV> permitiu o livre posicionamento
de elementos numa pgina sem a utilizao de tabelas. Isso o que chamamos de layout sem
tabelas (tableless) e a forma mais correta hoje em dia de se criar uma pgina.

<html>
<head>
<title> </title>
</head>
<body>
<div> </div>
<div> </div>
<div> </div>
</body>
</html>
Tab. 1.1 Estrutura de uma pgina no HTML4

A utilizao da tag <DIV> para posicionamento e organizao dos documentos foi um


grande avano mas, para algumas aplicaes, ela ainda tem um pequeno problema. Esta tag
muito genrica e, por poder conter qualquer coisa, no diz nada acerca do que ela contm.
Esta informao sobre o significado (semntica) de cada ponto de um documento tem
importncia tanto em termos de organizao do prprio documento quanto para auxiliar os
sites de busca para melhor encontrar a informao desejada por um usurio.

Imagine um documento tpico com uma rea de cabealho, um menu, uma rea de
contedo e um rodap. Este documento poderia ser criado com quatro tags <DIV> para cada
uma destas reas e a utilizao do atributo id para diferenciar e identificar cada uma delas
(Tab. 1.2). Isso resolve o problema de organizao interna do documento mas no o problema
dos mecanismos de busca pois no h uma padronizao do valor do identificador. O que
algum chamou de cabecalho outro poderia simplesmente chamar de cabec.

<html>
<head>
<title> </title>
</head>
<body>
<div id="cabecalho"> </div>
<div id="menu"> </div>
<div id="conteudo"> </div>
<div id="rodape"> </div>
</body>
</html>
Tab. 1.2 Estrutura com divises identificadas

Baseado nos tipos de diviso mais comum de um documento, uma das mudanas
introduzidas no HTML5 foi a criao de uma srie de tags para implementar estas divises.

2. Estrutura de um documento

Uma srie de novas tags foram definidas no HTML5 para suprir esta necessidade de
atribuir significado a blocos de contedo de um documento: <header>, <nav>, <section>,
<article>, <aside> e <footer>. Esta tags no definem por si s nenhuma informao de
posicionamento ou de aparncia, o que importa nelas apenas seu significado no documento:

<header>

O elemento header contm informao introdutria para uma pgina ou para uma
seo. Isso pode ser desde um simples cabealho de um documento at toda uma tabela de
contedo.

<nav>

O elemento nav reservado para uma seo de um documento que contm links para
outras pginas ou links para sees da mesma pgina. Nem todo grupo de links precisa estar
contido dentro do elemento nav, apenas o menu primrio.

<section>

O elemento section representa um document genrico ou a seo de um documento.


Ele age mais ou menos como um div, separando partes de um documento. possvel incluir
outras section ou article dentro de uma section.

<article>

O elemento article representa uma parte de uma pgina que pode ficar sozinha com,
por exemplo: uma postagem de blog, uma entrada de frum, comentrios submetidos por um
usurio ou qualquer item de contedo independente. . possvel incluir section ou article
dentro de um article.
<aside>

O elemento aside representa um contedo relacionado com a rea principal do


documento porm fora do fluxo principal do assunto. muito comum de se encontrar em
livros onde inclui notas explicaes ou citaes sobre o texto principal.

<footer>

Este elemento serve para incluir informaes de rodap numa pgina ou em cada seo
de uma pgina.

Na estrutura do HTML nenhum destes elementos obrigatrio e eles devem ser


utilizados apenas para conter o tipo de dado cujo significado eles representam. Conforme dito
anteriormente, estes elementos no definem por si s nenhuma informao de
posicionamento ou de aparncia, porm comum represent-los como blocos dispostos
conforme mostrado na figura 2.1. Um erro muito comum imaginar que um documento
qualquer em trs colunas deve necessariamente ser representado desta forma. Muitas vezes
cada coluna deve ser criada simplesmente como uma section ou mesmo como um div,
dependendo do significado de seu contedo para o documento.

Fig. 2.1 Layout padro de um documento HTML5

3. O DOCTYPE

Antes de colocarmos isso em prtica e sairmos por a criando documentos em HTML5


necessrio incluirmos uma tag especial no incio do nosso documento. Um documento HTML
nada mais que um documento XML (o HTML nada mais que uma linguagem que segue a
sintaxe XML) e por isso deve comear como um comando XML informando em qual dialeto
de XML est codificado. Isso feito simplesmente incluindo na primeira linha do documento:

<!DOCTYPE html>

Simplesmente isso j indica para o navegador que estamos com um documento HTML5.
Nas verses anteriores de HTML j existia o DOCTYPE mas a sua sintaxe era mais complicada e
muitas vezes era mais simples omitir sua presena que explic-lo. Na nova verso no mais
possvel omiti-lo. Um documento para representar o layout padro mostrado na Figura 2.1
pode ser escrito ento conforme o cdigo da Tabela 3.1 a seguir:

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<header>
</header>
<article>
<hgroup>
</hgoup>
</article>
<footer>
</footer>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Tab. 3.1 Estrutura de uma pgina com novos elementos do HTML5
A tag <hgroup> mais uma das novas tags do HTML5 e usada para agrupar
cabealhos de vrios nveis em um s bloco.

4. O CSS para isso funcionar

Ao chegar neste ponto do texto voc j dever ter entendido as mudanas


introduzidas pelo HTML5 e deve estar ansioso para por a mo na massa e comear a
utilizar as novas tags. Porm, se voc digitar o cdigo da Tabela 3.1 e mandar abrir em um
navegador vai ficar decepcionado pois no encontrar nada parecido com o layout da
figura 2.1. Para incluir informaes de posicionamento e aparncia necessrio utilizar
estilos CSS. Diversas propriedades de CSS podem ser aplicadas a estas tags mas destacarei
trs delas pela sua utilidade para posicionamento:

a. Propriedade display

Uma questo fundamental para a aparncia de qualquer elemento da linguagem


HTML se ele se comporta como parte de uma linha (display com valor inline) ou se ele se
comporta como um bloco (display com valor block). A diferena entre os dois
basicamente a diferena entre a tag <span> (inline) e a tag <div> (block).

Para que nossas novas tags possam ser exibidas com o layout mostrado na figura 2.1
necessrio que elas se comportem como block, e isso j verdadeiro para a ltima verso
dos navegadores mais populares. Porm verses mais antigas destes navegadores, mesmo
aquelas j aptas a trabalhar com HTML5, tratavam estas novas tags como inline. Para estes
casos deve-se incluir o seguinte estilo no CSS da pgina (o que no causa nenhum prejuzo
caso o navegador j trate estas tags como block):
<style>
header, nav, section, article, aside, footer {
display: block;
}
</style>

b. Propriedade float

A propriedade float indica se um elemento ficar preso a uma lateral do bloco que o
contm e a qual lado (left ou right).
<style>
nav, section {
float: left;
}
aside {
float: right;
}
</style>

c. Propriedade clear

A propriedade clear indica se um elemento no vai permitir nenhum elemento


agarrado a seu lado direito (right), esquerdo (left) ou a nenhum dos dois (both).
<style>
footer {
clear: both;
}
</style>