Semântica com o HTML5
Postado por: Pedro Rogério em
Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.
Além disso, você vai esperar mais 10 anos para utilizar HTML até que os padrões finais sejam definidos ou vai ser mais um adepto já que o suporte a HTML 5 nos browsers está aumentando?
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Site Name • Page Title</title>
</head>
<body>
<nav>
<h1><a href="/">Site Name</a></h1>
<ul>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
</ul>
</nav>
<header>
<p>Welcome to the site!</p>
<a href="#">Call to action!</a>
</header>
<section>
<aside>
<!-- Sidebar -->
</aside>
<article>
<header>
<h2>Article Name</h2>
<p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
<figure>
<img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
<label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
</figure>
<p>Lorem ipsum dolor...</p>
</article>
</section>
<footer>
<p>© <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
</footer>
</body>
</html>
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito bom! Nota-se que seja bem próximo ao que sugere o padrão XML. Tag para definir sessões para elementos. Um fator interessante é que o HTML5 não pode ser rederizado por navegadores antigos, ou seja, teriamos uma desagregação total com o website/sistema criado.
Para fins de conhecimento, muito bom!
Abraço a todos.
Alex Batista
@Alex,
Para que o HTML 5 funcione em browsers antigos basta utilizar JavaScript. Veja essa página de exemplo que eu criei para demonstrar isso:
http://www.cssnolanche.com.br/uploads/html5/
HUmmmmm, muito interessante, o youtube já tem uma pagina de testes em HTML5 http://youtube.com/html5
Todas as tags destre exemplo são suportadas por todos os browsers usados atualmente ?
@Mateus,
O Internet Explorer não suporta essas tags, mas você pode utilizar JavaScript para que funcione corretamente, como mostrei no exemplo que citei logo acima.
Existe algum exemplo concreto de HTML5, fora a demo do Youtube, sendo usado? Estou começando um projeto aqui na empresa e gostaria de fazer em HTML5. Poderia explicar algo mais sobre essa nova versão do HTML? Obrigado!
@João Paulo,
Esse site mostra sites que já utilizam HTML5:
http://html5gallery.com/
@ Pedro,
Valeu Pedro…vou vasculhar esse site :) Muito obrigado!!!
[...] Semântica com o HTML5 » Pinceladas da Web – XHTML, CSS, JavaScript e WebStandards http://www.pinceladasdaweb.com.br/blog/2009/06/22/semantica-com-o-html5 – view page – cached Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código … — From the page [...]
Olá Pedro muito boas as dicas, gostei muito. Sinceramente é tudo novo pra mim pois não conhecia o HTML5, estou estudando essa nova tecnologia, acho que estou um pouco atrasado neh !? Más enfim achei muito bom HTML5. Como faço para ficar informado sobre palestras e encontros de profissionais da Web? Grande abraço a todos.