Desenvolvimento - HTML
Principais mudanças na estruturação de uma página com HTML 5
Conheça nesse artigo algumas das muitas novas tag's do html 5 e aprenda as diferenças na hora de estruturar uma página com html 5.
por Ricardo ArrigoniO objetivo do HTML 5 é criar uma forma mais simples, fácil e ágil de desenvolver websites. Seja por organização, padronização do código ou qualquer outra coisa que facilite todos os nichos do desenvolvimento web.
Como todo desenvolvedor têm uma certa ressalva antes de partir para uma nova tecnologia, com o HTML 5 não é diferente, muitos deles inclusive utilizam de alguns navegadores(IEca) não interpretarem ainda o HTML 5, mas quando começam a estudar e usar, percebem que os benefícios alcançados valem muito a pena.
Esta nova versão do HTML traz mudanças significativas com a criação de novas tags que possibilitam unir as partes da página de forma lógica. O que não significa necessariamente um código mais enxuto, pois o objetivo é torná-lo organizado.
Neste tutorial, vou mostrar algumas funcionalidades novas de como utilizar o HTML 5 para estruturar uma página. Aqui você vai encontrar alguns vídeos sobre HTML 5.
Suporte Ao HTML 5
O único navegador que ainda esboça uma certa resistência ao html 5 é o bom e velho Internet Explorer na versão 9. O IE é o mais atrasado dos navegadores e ainda não suporta todas as funcionalidades do html 5, sendo necessário o uso de hack algumas vezes.
Como solução à isso, temos um código javascript que permite que o HTML 5 funcione no IE, é um hack para fazer o navegador aceitar a modernidade.
Listagem 1: Hack do IE
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Principais mudanças no HTML 5
Diferentemente do XHTML, o HTML 5 é case insensitive, ou seja, permite que as tag’s sejam escritas tanto minúscula, quanto maiúsculas, mas é sempre bom continuar seguindo o padrão do xhtml para evitar de que outras pessoas se confundam em futuras manutenções de código.
No HTML 5 não é mais obrigatório o fechamento da tag de elementos como img, br. Mais uma vez o direito de escolha é seu e a definição do tipo de documento tornou-se bem mais simples.
Listagem 2: Novo doctype
<!DOCTYPE html>
A hierarquia de cabeçalhos (h1 - h6) também foi alterada. Agora ela não é mais só relativa à página, mas à seção da página. É possível ter diversos h1 em uma mesma página, sendo que cada um em cada lugar diferente e sem influenciar nos outros.
header E hgroup
O elemento header especifica o cabeçalho de cada seção da página. Ele pode ser utilizado no topo da página englobando a Logo da empresa e o menu, e ao mesmo tempo aparecer no lado direito para intitular a seção “Parceiros”, por exemplo.
Utilização no topo da página:
Listagem 3: Exemplo de utilização no topo
<header>
<div class="topo-div"></div>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Sobre nós">Sobre nós</a></li>
<li><a href="#" title=" Artigos ">Artigos</a></li>
<li><a href="#" title="Tecnologias">Tecnologias</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>
Neste exemplo, o cabeçalho da página é simples e o header serve muito bem. Para cabeçalhos mais complexos que envolvam footer e outros headers, deve-se utilizar section.
No corpo da página:
Listagem 4: Exemplo de utilização no corpo da página
<article>
<header>
<h1>Titulo do artigo</h1>
<p>Data da postagem</p>
</header>
<p>Texto do artigo</p>
</article>
No caso de um site de artigos fica um pouco mais fácil de entender, pois tudo o que vier antes do texto em um artigo, é o cabeçalho. A tag hgroup (head group) serve para englobar diversos cabeçalhos.
Listagem 5:Englobando cabeçalhos
<article>
<hgroup>
<h1>Titulo principal</h1>
<h2>Subtítulo</h2>
</hgroup>
<p> Texto do artigo</p>
</article>
Tag footer
A tag footer é basicamente o rodapé. Seja da página ou de uma seção. Para a criação de rodapés mais robustos, com links, etc, é aconselhado utilizar a tag section e deixar a tag footer somente para informações mais sucintas.
Listagem 6: Exemplo de tag footer
<footer><p>Criado por Maicon Sobczak para Webmaster.pt</p></footer>
Tag nav
A tag nav identifica os links para navegação seja para outra página ou seções da mesma página, muito utilizada para a criação de menu de navegação, veja abaixo um exemplo de utilização:
Listagem 7: Tag Nav
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Marketing">Marketing</a></li>
<li><a href="#" title="Internet">Internet</a></li>
<li><a href="#" title="Webmaster">Webmaster</a></li>
</ul>
</nav>
A tag section
Assim como dividíamos a página em blocos de conteúdo com divs, faremos o mesmo com o section. A diferença entre a section e a div é a parte de semântica, pois toda seção precisa ter um significado como conteúdo, diferentemente da div no xhtml.
Veja um exemplo de utilização da tag section.
Listagem 8: Exemplo da tag section
<div class="esq-div">
<section class="chamadas">
<h4>Web Design</h4>
<article>
<h2>Título</h2>
<p>Texto </p>
</article>
</section>
<section class="chamadas">
<h4>Web Master</h4>
<article>
<h2>Título</h2>
<p>Texto </p>
</article>
</section>
</div>
É possível também aninhar sections.
Listagem 9: Aninhando sections
<section class="chamadas">
<h4>Web Design</h4>
<article>
<h2>Título</h2>
<p>Texto </p>
</article>
<section>
<h6>Mais artigos</h6>
<ul class="maisartigos">
<li><a href="#" title="Donec ac elit">Donec ac elit</a></li>
<li><a href="#" title="Lorem impsum amet">Lorem impsum amet</a></li>
<li><a href="#" title="Donec ac elit">Donec ac elit</a></li>
<li><a href="#" title="Lorem impsum amet">Lorem impsum amet</a></li>
</ul>
</section>
</section>
Nota: Toda section precisa de um cabeçalho, sejam de h1-h6 ou header, e se quiserem usar a tag footer, também pode.
A tag article
A tag article é muito utilizada em sites de notícias, artigos, blogs e como o nome delas já são bem sugestivos, servem para delimitarem um espaço para a inserção de um artigo, podendo ser referenciados via RSS.
Nota: Para saber quando utilizar o article, isole o texto do resto da página. Se ele continuar fazendo sentido, estão use article.
Listagem 10: Exemplo de article
<article>
<h2>Artigo em destaque</h2>
<figure><img src=”imagem.jpg” alt=”imagem”></figure>
<p>Donec ac elit. Etiam posuere venenatis ante. Nun ullamcorper neque ac justo. Donec id alor purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. </p>
<a href="#" title="Leia mais" class="leiamais">leia mais</a>
</article>
O article e o section tem um relacionamento bem parecidos, o que pode confundir a princípio. Pois assim como é possível colocar article dentro de um section, o inverso também.
Uma forma de ajudar a fixar isso é pensar que o section divide a página em blocos de conteúdo, enquanto o article engloba o conteúdo em si. Dessa forma eu acredito que fique mais fácil de memorizar.
Não é permitido aninhar articles. Se dentro de um texto houver uma tabela de conteúdo, com um título e enxerto de outros artigos relacionados, então utilize o section, pois ele engloba seções relacionadas.
Conclusão
Como pudemos ver nesse artigo, o HTML 5 veio para ficar e com certeza cada vez mais os desenvolvedores vão começar a usá-lo em seus projetos, tentando fazer da web um lugar melhor onde todos os sites funcionam lindos e alinhados em todos os navegadores :)
Espero que tenham gostado e até o próximo artigo.
Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.
