O HTML Progressivo agora faz parte do Programação Progressiva!
Este conteúdo foi atualizado e movido para o nosso novo endereço.
Redirecionando para: Clique aqui se não for redirecionado
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>.
Baixar PDF: Apostila HTML + CSS Progressivo
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>
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.
5 comentários:
Ótimo tutorial...Adorei!!!
Ta mais se o meu conteúdo principal não for um artigo. Eu usaria uma no lugar do , ou obrigatoriamente eu devo usar para o conteúdo principal?
Não Andre, não é obrigatório. A função dessas novas tags são para facilitar a manutenção e a organização da estrutura do código do site, sendo assim é apenas para lhe ajudar a entender melhor a sua linha de código.
Valeu! Ótimo artigo.
Era mesmo que eu queria obrigado
Postar um comentário