<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>L Cardoso &#187; h1</title>
	<atom:link href="http://www.lcardoso.com/tag/h1/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lcardoso.com</link>
	<description>Desenvolvedor Web</description>
	<lastBuildDate>Wed, 08 Dec 2010 14:54:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Elemento header &#8211; HTML5</title>
		<link>http://www.lcardoso.com/2010/05/elemento-header-html5/</link>
		<comments>http://www.lcardoso.com/2010/05/elemento-header-html5/#comments</comments>
		<pubDate>Sat, 15 May 2010 02:35:17 +0000</pubDate>
		<dc:creator>Leo</dc:creator>
				<category><![CDATA[-]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[h1]]></category>
		<category><![CDATA[header]]></category>

		<guid isPermaLink="false">http://www.lcardoso.com/?p=45</guid>
		<description><![CDATA[Olá amigos Hoje vou falar sobre um assunto que esta em alta nos últimos tempos, o tal do HTML5, vou procurar de tempo em tempo trazer algumas coisas sobre essa nova versão do HTML que esta prometendo ser de grande ajuda nos mais variados seguimentos, desde melhoras em processamento a acessibilidade e animações e efeitos [...]]]></description>
			<content:encoded><![CDATA[<p>Olá amigos</p>
<p>Hoje vou falar sobre um assunto que esta em alta nos últimos tempos, o tal do HTML5, vou procurar de tempo em tempo trazer algumas coisas sobre essa nova versão do HTML que esta prometendo ser de grande ajuda nos mais variados seguimentos, desde melhoras em processamento a acessibilidade e animações e efeitos integrados com CSS3.</p>
<p>Dentre as principais novidades do HTML5, estão seus novos elementos, que segundo suas <a title="HTML5 especificações" href="http://dev.w3.org/html5/spec/Overview.html" target="blank">especificações</a> há um número significativo de novos elementos, e é sobre um deles que vou tratar neste post. </p>
<p>Vamos começar a falar sobre o elemento<br />
<header>, suas funcionalidades, especificações, como e quando usá-la.</p>
<p>Então mãos a obra.</p>
<p>Basicamente esse elemento veio para substituir a famosa:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span>”header”&gt;</span></pre></td></tr></table></div>

<p>Que hoje é utilizada na maioria dos sites da web, enfim, com o HTML5 essa tag não será mais utilizada, passando agora a ser utilizado o elemento<br />
<header>.</p>
<p>De acordo com suas especificações, o elemento<br />
<header> representa o cabeçalho do site.</p>
<blockquote><p>&#8220;Um elemento<br />
<header> é normalmente destinada a conter a seção do título (um elemento h1- h6 ou o elemento<br />
<hgroup>), mas isso não é necessário. O elemento<br />
<header> também pode ser usado para abrigar outros conteúdos como sumário, formulários de pesquisa ou qualquer logos relevantes.&#8221;</p></blockquote>
<p>Vou mostrar alguns exemplos de sua utilização:</p>
<p>Esta é uma aplicação bem simples do elemento<br />
<header>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;header&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span> Bem-vindo ao ... <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span> Lcardoso.com! <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>header&gt;</span></pre></td></tr></table></div>

<p>Vale lembrar que o elemento<br />
<header> não introduz uma nova seção, e sim faz parte de uma, é importante também não confundi-lo com a tag <head>, são bem diferentes. ;D</p>
<p>Outra dica importante é que o elemento<br />
<header> não se limita a somente um por página, ele pode ser usado em diferentes partes do código, como por exemplo:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;header&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>The most important heading on this page<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>header&gt;</span>
<span style="color: #009900;">&lt;article&gt;</span>
<span style="color: #009900;">&lt;header&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>Title of this article<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>header&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>...Lorem Ipsum dolor set amet...<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>article&gt;</span></pre></td></tr></table></div>

<p>Observe que neste exemplo foi utilizado duas tags <code>&lt;h1&gt;</code>, isso é perfeitamente aceitável em HTML5 (HTML e 4), porém vai dar pau na acessibilidade, muito cuidado quando for utilizar mais de um <code>&lt;h1&gt;</code> em sua aplicação. <img src='http://www.lcardoso.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Por tanto podemos ter múltiplos cabeçalhos dentro de uma página. Vou passar para vocês o que pode e deve conter dentro do elemento para torná-lo válido.</p>
<p>O elemento<br />
<header> deve contem pelo menos uma tag <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>, você também pode incluir o elemento<br />
<hgroup>, que mais p/ frente vou falar dele também, pode conter também fluxo de documento, tais como tabelas de conteúdos, logos ou formulários de busca. Seguindo uma recente modificação nas especificações, você pode usar também o elemento <code>&lt;nav&gt;</code>.</p>
<p><strong>Estilo para utilização</strong></p>
<p>Até a data que escrevo este post, alguns browsers como o IE8 não dão suporte a linguagem HTML5, por tanto para você utilizar esse elemento em sua página, você precisará especificar em seu CSS a seguinte linha:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">header <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Brevemente isso não será mais necessário, haja visto que os novos browsers que estão vindo por ai prometem dar um suporte bem maior ao HTML5.</p>
<p>É isso aí, espero que tenham gostado, mais p/ frente vou postar mais sobre HTML5 aqui no blog, fiquem ligados.</p>
<p>Referencias:<br />
<a title="HTML5 Doctor" href="http://html5doctor.com/the-header-element/">HTML5 Doctor</a><br />
<a title="Especificações HTML5" href="http://dev.w3.org/html5/spec/Overview.html">W3C</a></p>
<!-- boo-widget start -->
          <script type="text/javascript">
            bb_keywords = "HTML5";
            bb_bid  = "40565";
            bb_lang = "pt-BR";
            bb_name = "custom";bb_limit = "7";bb_format = "bbc";
          </script>
          <script type="text/javascript" src="http://widgets.boo-box.com/javascripts/embed.js"></script>
          <!-- boo-widget end -->]]></content:encoded>
			<wfw:commentRss>http://www.lcardoso.com/2010/05/elemento-header-html5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

