Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

Introdução ao HTML 5

3 min read

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.

Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

One Reply to “Introdução ao HTML 5”

  1. 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *