HTML Como usar a tag footer

Categoria: HTML5 Publicado dia: 22/03/2011 15:12:25h Comentários: 0

Como o próprio nome já diz, a tag FOOTER foi criada para especificar que a seção da página trata-se apenas de um rodapé, fazendo com que não seja interpretada semanticamente como conteúdo importante da página.

No escopo geral da página, como todo rodapé, somente será usada para informar direitos de autorais [copyright] e informações para contato com o autor da página. Pode conter também links para acesso rápido a conteúdos importantes do site.

Vejamos como deve ser usada:


<footer>
<div id="mapa-importante">
<ul>
    <li>Quem Somos</li>
    <li>Serviços</li>
    <li>Contato</li>
</ul>
</div>
<div id="copyright">
2011 &copy; Todos os Direitos Reservados a FelipeBastosWeb
</div>
</footer>

Observe que não foram utilizados estilos na tag FOOTER. Isto foi feito por que o w3c enconraja a utilização da tag apenas como marcador de sessão. E desta forma, os bots de sites de pesquisa avaliarão os links contidos nesta seção de "forma adequada".

Mas este não é o único uso do footer. Outros recursos como as seções, artigos, etc podem ter rodapé também.



<article>
<p>Conteúdo do artigo.</p>
<p>Conteúdo do artigo.</p>
<p>Conteúdo do artigo.</p>
<footer>
    <p>Conteúdo do rodapé do artigo</p>
</footer>
</article>

Em caso de dúvidas, consulte o w3c

Ver como PDF

Comentários!

HTML5 Como usar a tag nav

Categoria: HTML5 Publicado dia: 22/03/2011 15:10:45h Comentários: 0

O HTML 5 acrescentou a tag NAV à lista de tags do html.

NAV, de navegabilidade, é uma tag que simboliza que a seção determinada por ela contém itens de navegação do site. É a tag ideal para menus e barras do site, e seu conteúdo deve ser links para outras páginas do site, ou ancoras para própria página. Porém, na tag NAV só deve conter links importantes.

Vejamos como deve ser usada:


<nav>
<a href="/site/index">Site</a>
<a href="/site/artigos">Artigos</a>
<a href="/site/contato">Contato</a>
</nav>

Vale lembrar que esta tag não deve ser usada para formatar o layout do site. Se for acrescentar estilos a seção, faça utilizando a tag DIV. Um exemplo:


<div id="menu-topo">
<nav>
<a href="/site/index">Site</a>
<a href="/site/artigos">Artigos</a>
<a href="/site/contato">Contato</a>
</nav>
</div>

Embora alguns sites na web, mal traduzidos, lhe incentivem a usar a tag NAV no rodapé, evite-o. Pois o próprio w3c desaconselha, informando que a tag FOOTER é a mais apropriada para links no rodapé.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

...A tag FOOTER sozinha é suficiente para esses casos, sem uma tag NAV.

Em caso de dúvidas, consulte o w3c

Ver como PDF