Introdução a programação do HTML 5

Neste artigo vamos mostrar uma introdução da programação do HTML 5. Quando se começa um documento HTML, a primeira coisa com a qual nos deparamos é a declaração DOCTYPE

Por Programação Pular para comentários
Introdução a programação do HTML 5

http://www.oficinadanet.com.br//imagens/coluna/3059/td_html5logo.gif

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:

Na versão 5, basta apenas colocar:

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:



Que diferença em relação às 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:

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.




Título da Página


Logomarca

Titulo

Subtitulo

Titulo 2

Texto do conteúdo – Texto do conteúdo

Titulo 3

Texto do conteúdo – Texto do conteúdo

Todos os direitos reservados


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 já é 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 (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.

Compartilhe com seus amigos:
Mais sobre: html 5, programação, html
Vitor Corrêa
Vitor Corrêa Programador, Webdesigner, Geek assumido. Amante da tecnologia, eterno estudante de Desenvolvimento Web. Atende a diversas empresas e cuida de diversas marcas na internet. Amante também de plataformas Open Source para desenvolvimento web: Wordpress, Drupal, Joomla, Magento, etc.
FACEBOOK // TWITTER: @vitormcorrea
Quer conversar com o(a) Vitor, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.