[série] A estrutura e a semântica do HTML5 – parte 2

… Continuação da série sobre  A estrutura e a semântica do HTML5.

Charset

A metatag Charset é usada para indicar a codificação de caracteres que a nossa página está utilizando. No exemplo abaixo, estamos indicando uma codificação de caracteres do tipo:

<meta charset="utf-8">

Essa metatag foi simplificada em relação a forma que era utilizada na versão anterior do HTML. Porem, a forma antiga ainda é suportada no HTML, apesar de não recomendada:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A semântica das novas marcações

Em todas as páginas da Web existem divisões básicas referentes aos tipos de conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé ou menu de navegação.

Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class.

No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.

Anatomia do HTML5

Cabeçalho com o elemento <header>

O elemento <header> é usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

<header>
   <img alt="logo" src="/img/logo.png">
   <h1>Entendo a estrutura e semântica do HTML5</h1>
   <form action="www.enderecodosite.com.br/search" id="searchform" method="get">
       <label for="s">Pesquisa</label>
       <input type="text" placeholder="Pesquisa" id="s">
       <input type="submit" value="Pesquisa" class="submit">
   </form>
</header>

Dentro do <header> podemos também inserir o elemento <hgroup>, que serve para agrupar dois ou mais elementos de títulos (h1 até h6), organizando-os hierarquicamente. O elemento <hgroup> foi descontinuado e não deve mais ser usado.

O site http://destroyafteruse.com/ utiliza a marcação <header> em seu cabeçalho, como podemos ver (de forma simplificada) logo abaixo.

<header>
	<h1><a href="http://destroyafteruse.com/">Agent</a></h1>
	<p id="site-description">Disruptive Innovation &amp; Strategic Product Design</p>
	<div id="logo"><a href="http://destroyafteruse.com/"><img src="logo.gif"></a></div>
	<p class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></p>	                
        <nav>
		<ul>
			<li><a href="http://destroyafteruse.com/category/news">News</a></li>
			<li><a href="http://destroyafteruse.com/about-agent">ABOUT AGENT</a></li>
			<li><a href="http://destroyafteruse.com/category/missions">Top Missions</a></li>
			<li><a href="http://destroyafteruse.com/the-way-of-the-agent">THE AGENT WAY</a></li>
			<li><a href="http://destroyafteruse.com/business-units">Business Units</a></li>
			<li><a href="http://destroyafteruse.com/services">SERVICES</a></li>
			<li><a href="http://destroyafteruse.com/our-process">Our Process</a></li>
			<li><a href="http://destroyafteruse.com/category/the-agents">The Agents</a></li>
			<li><a href="http://destroyafteruse.com/category/press">Press</a></li>
			<li><a href="http://destroyafteruse.com/jobs">JOBS</a></li>
			<li><a href="http://destroyafteruse.com/meeting-point">Meeting point</a></li>
		</ul>
	</nav>
</header>

destroyafteruse.com

Navegação Global com o elemento <nav>

O elemento <nav> serve para agrupar uma lista de links para outras partes do site, seja essa lista de navegação local ou global. Esses blocos de links podem estar em diferentes partes do layout, como no cabeçalho ou no rodapé.

<nav>
       <ul class="menu">
           <li><a href="inicio.html">Início</a></li>
           <li><a href="quem-somos.html">Quem somos</a></li>
           <li><a href="servicos.html">Serviços</a></li>
           <li><a href="contato.html">Contato</a></li>
       </ul>
</nav>

O site do navegador Safari, da Apple (http://www.apple.com/br/safari/), utiliza a marcação <nav> em seu menu, como podemos ver (de forma simplificada) abaixo.

<nav>
    <ul role="navigation" id="globalnav">
        <li><a href="/br/"><span>Apple</span></a></li>
        <li><a href="http://store.apple.com/br/"><span>Store</span></a></li>
        <li><a href="/br/mac/"><span>Mac</span></a></li>
        <li><a href="/br/ipod/"><span>iPod</span></a></li>
        <li><a href="/br/iphone/"><span>iPhone</span></a></li>
        <li><a href="/br/ipad/"><span>iPad</span></a></li>
        <li><a href="/br/itunes/"><span>iTunes</span></a></li>
        <li><a href="/br/support/"><span>Suporte</span></a></li>
    </ul>
    <div id="globalsearch">
        <form method="get" action="http://www.apple.com/br/search/">
            <label for="sp-searchtext">Buscar</label>
            <input type="text" id="sp-searchtext">
        </form>
    </div>
</nav>

nav

Diferentes sessões com o elemento <section>

O elemento <section> é o menos especifico entre as novas tags do HTML5. A diferença do <section> para um <div> é que o primeiro serve para dividir o conteúdo em diferentes sessões, que podem conter elementos como <header> ou <article>, enquanto o segundo divide qualquer conteúdo, sem uma finalidade específica.

<section>
   <article>
       (...)
   </article>
</section>

O antigo site do Nike Better World utilizava a marcação <section> para dividir duas diferentes sessões, como podemos ver (de forma simplificada) logo abaixo.

<section data-controller="StoryPhilosophy" data-nav="Philosophy">
  <article>
    (...)
  </article><!--article-->
</section><!--story-->

<section data-controller="StoryBeach"  data-nav="Board Short">
  <article>
    (...)
  </article><!--article-->
</section><!--story-->

<section data-controller="StoryHyperdunk"  data-nav="Hyperdunk">
  <article>
    (...)
  </article><!--article-->
</section><!--story-->

<section  data-controller="StoryLegendpant" data-nav="Nike Legend Pant">
  <article>
    (...)
  </article><!--article-->
</section><!--story-->

<section data-controller="StoryArchive" data-nav="View More Stories">
    <div class="view-archive">
      <h1>THERE'S MORE BETTER HERE.</h1>
      <p><a href="/about">Click</a> to learn more about how we're leveling the playing field, and protecting it too.</p>
      <div class="swoosh"><img src="lib/img/logo_end.png" /></div>
    </div>
</section><!--story-->

Nike Better World

O conteúdo central com o elemento <article>

O elemento <article> serve para identificar um conteúdo independente e de maior relevância dentro da página, que pode ser distribuido via feed, como um post, artigo ou bloco de comentários.

O elemento <article> pode conter outros elementos como <header> ou <footer>.

<article>
   <header>
       <h1>Entendendo o elemento Article</h1>
       <p>Publicado em <time pubdate datetime="2011-09-01">01 de Setembro de 2011</time></p>
   </header>
   ...conteúdo...
   <footer>
       <small>© Todos os direitos reservados.</small>
   </footer>
</article>

O site Gaga Debki (http://gaga-debki.pl/) utiliza a marcação <article> para especificar o conteúdo de maior relevância dentro do site, como podemos ver (de forma simplificada) logo abaixo.

<article>
    <h2>Ośrodek domków holenderskich</h2>
    <p>Ośrodek domków holenderskich <strong>GAGA &bull; Dębki</strong> znajduje się w spokojnej części Dębek w odległości <strong>400m od centrum Dębek i 900m od jednej z najpiękniejszych plaż w Polsce.</strong></p>
    <p>Posiadamy na wynajem 4 holenderskie domki letniskowe. Oferowane przez nas domki są w pełni wyposażone w&nbsp;następujące przedmioty:</p>
    <ul>
        <li>aneks kuchenny z lodówką, kuchenką z piekarnikiem oraz ekspresem do kawy,</li>
        <li>łazienkę z umywalką i prysznicem oraz WC,</li>
        <li>indywidualny alarm,</li>
    </ul>
    <p>Nasze domki letniskowe posiadają dwie sypialnie, jedna z łóżkiem małżeńskim, druga z dwoma pojedynczymi łóżkami wraz z pościelą. Istnieje także możliwość rozłożenia łóżka i spania w salonie.</p>
    <p><em>Doba rozpoczyna się o godzinie 14-ej, a kończy się o godzinie 11-ej.</em></p>
</article>

article

Conteúdos relacionados com o elemento <aside>

O elemento <aside> serve para mostrar conteúdos que fazem referência ao conteúdo principal à sua volta, como informações, blocos de navegação ou até mesmo publicidade. Vejamos o exemplo abaixo:

<div id="main">
   <div id="primary">
       <article>
           <header>
               <h1>Entendendo o elemento Aside</h1>
               <p>Publicado em <time pubdate datetime="2011-09-01">01 de Setembro de 2011</time></p>
           </header>
           (...)
           <aside>
               <h2>Curiosidades sobre o Aside</h2>
               (...)
           </aside>
           <footer>
		<p>Esse post foi publicado na categoria <a href="#" title="HTML5">HTML5</a>
           </footer>
       </article>
   </div>

   <div id="secondary">
	<aside>
           <h3>Arquivos</h3>
               <ul>
                   <li><a href="#" title="agosto 2011">agosto 2011
                   <li><a href="#" title="julho 2011">julho 2011</a></li>
                   <li><a href="#" title="junho 2011">junho 2011</a></li>
                   <li><a href="#" title="maio 2011">maio 2011</a></li>
                   <li><a href="#" title="abril 2011">abril 2011</a></li>
               </ul>
       </aside>
   </div>
</div>

Aqui temos duas situações onde o <aside> é empregado. No primeiro caso ele está dentro de um elemento <article>, e por isso podemos entender que ele traz conteúdos relacionados ao post ou artigo em questão.

No segundo caso o <aside> está fora do <article>, fazendo parte da barra lateral do site, trazendo links de navegação que tem relação com a página como um todo.

O site Tableless (http://tableless.com.br/) utiliza a marcação <aside> para especificar os conteúdos relacionados dentro de suas páginas, como podemos ver (de forma simplificada) logo abaixo.

<aside class="lateral">
    (...)
    <h3 class="widget-title">Posts Relacionados</h3>
    <ul class="related_post">
        <li><a title="Dicas de sobrevivência em uma era pós o IE6" href="#">Dicas de sobrevivência em uma era pós o IE6</a></li>
        <li><a title="Drops 7 ? Você está fazendo errado" href="#">Drops 7 ? Você está fazendo errado</a></li>
        <li><a title="Usando Meta Box em seu tema WordPress" href="#">Usando Meta Box em seu tema WordPress</a></li>
        <li><a title="Introdução aos padrões de codificação" href="#">Introdução aos padrões de codificação</a></li>
        <li><a title="Biblioteca CSS ou Framework?" href="#">Biblioteca CSS ou Framework?</a></li>
    </ul>
    (...)
</aside>

Tableless

Rodapé com o elemento <footer>

O elemento <footer> representa o rodapé de um documento ou de uma sessão específica do mesmo, podendo conter informações relacionadas ao autor e ao copyright, blocos de navegação ou links relacionados.

<body>
    <div id="page">
        <article>
            <header>
                <h1>Entendendo o elemento Footer</h1>
                <p>Publicado em <time pubdate datetime="2011-09-01">01 de setembro de 2011</time></p>
            </header>
            (...)
            <footer>
               <p>Publicado na categoria <a href="#" title="HTML5">HTML5</a></p>
            </footer>
        </article>

        <footer> 
            <nav>
                <ul>
                    <li><a href="inicio.html">Início</a></li>
                    <li><a href="quem-somos.html">Quem somos</a></li>
                    <li><a href="servicos.html">Serviços</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav> 
            <small>Copyright © 2011 - Todos os direitos reservados</small>
        </footer>
    </div>
</body>

No exemplo acima vemos o <footer> sendo empregado em duas situações: no primeiro caso ele está contido dentro do elemento <article>, representando o rodapé do post ou artigo em questão, e no segundo caso está ao final do código, representando o rodapé da página.

O site HTML5 ★ Boilerplate (http://html5boilerplate.com/) utiliza a marcação <footer> para delimitar a sua área de rodapé, como podemos ver (de forma simplificada) logo abaixo.

<footer>
  <h3>Brought to you by</h3>
  <p>
    <a href="#"><img src="img/paul-irish.png">Paul Irish <br><i>Google Chrome, jQuery</i></a>
    <a href="#"><img src="img/divya-manian.png">Divya Manian <br><i>Open Web Vigilante</i></a>
    <a href="#"><img src="img/shichuan.png">Shichuan <br><i>Open Web Developer</i></a>
    <a href="#"><img src="img/mathias-bynens.png">Mathias Bynens <br><i>Freelance web developer</i></a>
    <a href="#"><img src="img/nicolas-gallagher.png">Nicolas Gallagher <br> <i>Front-End Web Developer</i></a>
  </p>
  <ul>
    <li><a href="#">Mickael Daniel</a></li>
    <li><a href="#">Jonathan Verrecchia</a></li>
    <li><a href="#">Rob Larsen</a></li>
    <li><a href="#">Mike West</a></li>
    <li><a href="#">More Contributors</a></li>
  </ul>
  <p>It would not have been possible without the efforts of these superheroes:</p>
  <ul>
    <li><a href="#">Stoyan Stefanov</a></li>
    <li><a href="#">Patrick H Lauke</a></li>
    <li><a href="#">Faruk Ate?</a></li>
    <li><a href="#">Remy Sharp</a></li>
    <li><a href="#">Adam McIntyre</a></li>
    <li><a href="#">Thierry Koblentz</a></li>
    <li><a href="#">Mike Taylor</a></li>
    <li><a href="#">Jonathan Neal</a></li>
    <li><a href="#">Kroc Camen</a></li>
    <li><a href="#">Ethan Dunham</a></li>
    <li><a href="#">Peter Beverloo</a></li>
    <li><a href="#">Viget</a></li>
    <li><a href="#">Steve Souders</a></li>
    <li><a href="#">Isobar Creative Technology team</a></li>
  </ul>
</footer>

HTML5-Boilerplate

TO BE CONTINUED… isso aqui continua!!


Anúncios

Autor: Daniel Brandão

Desenvolvedor Web e Professor. Gosto de debater, escrever e comentar a respeito da vida, tecnologia, o pensar, a sociedade, a vida cotidiana e da vida vindoura.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.