Quando se começa um documento HTML, a primeira coisa com a qual nos deparamos é a declaração DOCTYPE.
Analise a que usamos nos documentos atuais:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Na versão 5, basta apenas colocar:
<!DOCTYPE html>
e já está feita a sua declaração DOCTYPE. Legal, não? 😉
Em geral, o inicio de um documento HTML 5 ficou muito simplificado, facilitando a nossa vida e não precisando decorar tudo aquilo que as versões anteriores pedem.
Exemplo:
<!DOCTYPE html>
<html lang=”pt-br”>
<meta charset=”UTF-8 />
Que diferença em relação as versões anteriores.
Uma outra modificação em relação a versão anterior (HTML 4), é a introdução de tags semânticas, na verdade se você já está acostumado a colocar semântica em seu código, utilizar as tags atribuindo nomes referentes ao conteúdo, você irá se adaptar facilmente ao HTML 5.
Vejamos uma pequena estrutura convencional:
<div id=”corpo”>
<div id=”header”></div>
<div id=”nav”></div>
<div id=”content”></div>
<div id=”footer”></div>
</div>
Se você já está acostumado a criar uma estrutura mais ou menos assim, separando por seções utilizando DIV’s, o HTML 5 introduziu novas tags. Então vamos lá.
Veja o código HTML feito na versão 5, e logo abaixo confira a explicação e função de cada uma TAG.
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8 />
<title>Título da Página</title>
</head>
<body>
<section id=”principal”>
<header>
<h1>Logomarca</h1>
</header>
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”quem-somos.html”>Quem Somos</a></li>
<li><a href=”portfolio.html”>Portolio</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
</nav>
</section>
<section id=”conteudo”>
<article>
<header>
<hgroup>
<h2>Titulo</h2>
<h3>Subtitulo</h3>
</hgroup>
</header>
</article>
<article>
<h2>Titulo 2</h2>
<p>Texto do conteúdo – Texto do conteúdo</p>
</article>
<article>
<h2>Titulo 3</h2>
<p>Texto do conteúdo – Texto do conteúdo</p>
</article>
</section>
<footer>
<p>Todos os direitos reservados</p>
</footer>
</body>
</html>
Análise:
Para separarmos por seções agora, foi criada a tag <section>. Mas isso não quer dizer que, tudo que for div colocaremos essa nova tag. A section será a tag que irá representar a seção, para cada parte do seu código haverá uma seção como topo, menu, rodapé e é para cada uma delas que a tag section foi feita. Logo em seguida vemos a tag <header>, essa tag significa o inicio de uma seção, nesse caso o topo. Dentro da tag header, podemos colocar a logomarca como no exemplo acima, um campo de busca por exemplo. Abaixo vemos a tag <nav> que é onde ficará a principal barra de navegação do site, o famoso menu. Em seguida vem a tag <article> como o próprio nome já diz, é a tag onde ficarão os artigos de um blog pessoal por exemplo. Para agrupar as tags <H1><H2>, foi criado o <hgroup> e por fim, a tag <footer> significa o final de uma seção, nesse caso o rodapé do site.
Este é um exemplo bem simples de um código feito em HTML 5, como vocês podem ver não é um bicho de sete cabeças, não é mesmo?
Claro que foram feitas mais funções nessa nova versão, como o campo input type=”email”, para formulários que passem o email e muitas outras funções que aos poucos eu estarei ensinando pra vocês.
Vale ressaltar que somente as versões mais atuais dos navegadores possuem suporte a essa versão, muitos já me perguntaram se ja é viável começar a trabalhar com o HTML 5, isso vai variar muito por enquanto, vai depender do seguimento do site. Se for para clientes, visto que muitos ainda usam o IE 6 (Aff, infelizmente) por ser prejudicial e posteriormente você terá problemas com a visualização do site. Mais, nada impede de você utilizar um pouquinho do HTML 5 em sua página pessoal.
Olá Prezados
Alcance mais Clientes e Lucre Mais. Colocamos sua Empresa ou Negócio na 1ª página do Google, caso tenha interesse envie um Zap para (61) 95530473 com a palavra Alcançar mais Cliente que passaremos todas as informações
Att.
Empresas Conectadas
Não respoder esta Mensagem