Neste tutorial de nosso
Curso de HTML5, iremos aprender os conceitos básicos para estruturarmos uma página que faz uso do HTML5.
Para isso, iremos estudar as tags
<header>,
<footer> e
<article>, bem como falar de suas diferenças semânticas e de uso em relação as
<div>.
O problema com as <div>
Sem dúvidas, um dos elementos mais importantes do HTML é a tag <div>, pois ele limita e faz divisões de quaisquer porções de código.
Ou seja, através da tag
<div> podemos ter regiões, também chamadas de
containers, com quantos e quais elementos quisermos.
Por exemplo, usamos a div para delimitar a parte superior de nossa
página, outra div representado o menu lateral, também é comum vermos o
conteúdo dentro de uma div principal, e dentro desta várias outras, como
uma div para uma imagem e sua descrição, outra div para as informações
do autor do artigo, outra div com informações que vão ficar no rodapé do
site...e por aí vai.
É fácil notar a importância deste elemento. Porém, há um problema com
ele: ele é muito, muito genérico. Apenas lendo o nome da tag não é
possível saber para que serve aquele elemento.
Se você olhar códigos-fonte de diversos sites por aí, verá uma verdadeira enchente de
divs dentro de
divs,
onde é complicado saber do que se trata cada uma destas tags, sendo
necessário maior estudo e avaliação para fazer a manutenção e correção
de código.
Site em HTML5 - As Tags <header>, <footer> e <article>
Usar divs não é algo ruim ou errado.
Pelo contrário, são importantíssimas, e você sempre vai usar. Porém, se
passar a usar demais, seu site ficará cada vez mais complicado de se
manter e controlar, pois para saber o que ocorre dentro de uma div,
precisamos ler seu conteúdo.
Há maneiras mais eficientes e lógicas de se estruturar um site em HTML5 do que apenas usando as
divs e
span, que veremos agora.
Vamos agora, neste
tutorial de HTML5, apresentar 3 grandes e importantes elementos do HTML5, que são as tags <header>, <footer> e a <article>.
Esses elementos, por si só, já são auto descritíveis, eles um
significado lógico e semântico, não são gerais, como é o caso das tags
<div> e <span>, que também são usadas pra estruturar o corpo
de um site.
A tag <header> do HTML5
Como o próprio nome pode sugerir, ela que vai encabeçar uma região de seu site.
Cuidado para não confundir com a tag <head>, que serve para informar características da página.
O que existe no <header> será, de fato, exibido no seu site.
Geralmente é um o título de um artigo, slogan, logotipo de sua empresa/site.
<header>
<h1>Bem-vindo ao Tutorial HTML Progressivo</h1>
<h2>Apostila de HTML & CSS completa e grátis</h2>
</header>
A tag <footer> do HTML5
O elemento semântico
<footer>, do HTML5, é análogo ao elemento
<header>, mas este se refere ao rodapé, que geralmente fica abaixo, em seu site.
É costume usarmos o rodapé para divulgar informações de conteto e/ou direitos autorais:
<footer>
<p>Todos os direitos reservados. Projeto HTML Progressivo 2014</p>
</footer>
A tag <article> do HTML5
Se já estudamos o elemento do topo (
header) e do rodapé (
footer),
nada mais óbvio que mostrar algum elemento que seja responsável pelo
escopo da página, pelo artigo e/ou conteúdo principal de seu site,
tarefa esta que ficará a cargo da tag
<article>.
Embora o uso da tag seja igual ao das tags anterior, as informações
contidas dentro deste elemento geralmente são maiores, possuem um
título, imagens, vários parágrafos, informações sobre o autor daquele
artigo etc.
Por isso, também usamos a tag "header" dentro da tag "article", para
definir um cabeçalho dentro do artigo (com o título do artigo, por
exemplo).
Ao fim da tag "article", também é comum usar um "footer", para dar mais
informações a respeito daquele artigo, de seu autor, referências
bibliográficas etc, veja:
<article>
<header>
<h3>Como criar sites: HTML e CSS</h3>
<p>HTML blá blá blá <br /> etc etc etc</p>
</header>
<footer>
<p>Artigo criado por Zezinho Webmaster</p>
</footer>
</article>
CSS no HTML5
Uma outra vantagem, além da semântica, destas novas tags do HTML5 se dá quando vamos estilizar nosso site usando CSS,
pois é mais fácil acessar elementos únicos e bem definidos, do que as
genéricas divs (além de ter que sar, nas div, seletores, como os class e ID).
Vamos criar um site com as tags <header>, <footer> e
<article> (e dentro desta colocar outras <header> e
<footer>).
Vamos estilizar as tags H1, deixando-as na cor vermelha, mas somente as
que estão dentro de uma <header>, fezemos " header h1 { código CSS
}"
Analogamente, para estilizar as tags H2 deixando-as na cor azul, mas só
as que estão dentro de uma <header>: "header h2 { código CSS}
Vamos também colocar a fonte do rodapé (tags
footer) em itálico, bem como definir um tamanho de 300 pixels de altura para o corpo do artigo (
article).
Nossa folha de estilos fica:
header h1{
color: red;
}
header h2{
color: blue;
}
article {
height: 400px;
margin: 0 auto;
}
footer p{
font-style: italic;
}
E nosso documento de HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de HTML5</title>
<meta name="description" content="Como usar as tags header, footer e article em HTML5">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<script type="text/javascript">
teste
</script>
</head>
<body>
<header>
<h1>Tutorial HTML Progressivo</h1>
<h2>Apostila de HTML & CSS completa e grátis</h2>
</header>
<article>
<header>
<h3>Como criar sites: HTML e CSS</h3>
<p>HTML blá blá blá <br /> etc etc etc</p>
</header>
<footer>
<p>Artigo criado por Zezinho Webmaster</p>
</footer>
</article>
<footer>
<p>Todos os direitos reservados. Projeto HTML Progressivo 2014</p>
</footer>
</body>
</html>
Note como fica mais fácil para passar o olho e saber a estrutura da página.
Caso usássemos somente divs, teríamos que ler o conteúdo das divs. Agora
temos só que ler o nome dos elementos semânticos para identificarmos
onde cada parte da estrutura está localizada no código.
Adobe Flash CS6 Portable
