HTML 5

Beleza pessoal? Depois de mais de um ano sem escrever aqui no MX Studio, volto falando sobre a nova versão do HTML.

Vamos lá!

O HTML 5 veio com grandes novidades, podendo até substituir algumas funções que normalmente era utilizado no flash, como player de audio ou vídeo, por exemplo. A nova versão e muito mais robusta, antes para estruturar um documento, era usado div’s com o atributo id, para identificar cada parte do site, agora na nova versão isso foi melhorado, para cada parte da estrutura existe uma tag especifica, o que deixa o código muito mais estruturado. Abaixou vou mostrar dois exemplos, como era no HTML 4 e como é agora na nova versão. Também vou listar algumas novas tags.

Sintaxe HTML 4 x HTML 5:

HTML 4

<?xml version=”1.0″ encoding=”UTF-8″?>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Titulo do Documento</title>

</head>

<body>

</body>

</html>

HTML 5

<?xml version=”1.0″ encoding=”UTF-8″?>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Titulo do Documento</title>

</head>

<body>

<header>Topo</header>

<nav>Menu de Navegação</nav>

<article>Conteudo</article>

<footer>Rodapé</footer>

</body>

</html>

Abaixo segue as novas tags.

  • selection – representa um documento genérico ou seleção de tags. Pode ser usado em conjunto com os elementos h1, h2, h3, h4, h5 e h6.
  • article – representa um pedaço independente do conteúdo de um documento, como um blog ou artigo de jornal.
  • aside – representa uma parte do conteúdo que é apenas ligeiramente relacionado com o restante da página.
  • hgroup – representa o cabeçalho de uma seção.
  • footer – representa um rodapé para uma seção e pode conter informações sobre o autor, copyright,…
  • nav – representa uma seção do documento destinada à navegação.
  • figure – pode ser usado para associar uma legenda junto com algum documento incorporado, como uma imagem ou vídeo.

<figure>

<video src=”ogg”></video>

<figcaption>Example</figcaption>

</figure>

  • figcaption – fornece a legenda.
  • video e audio para conteúdos multimídia.
  • embed – plugins.
  • marker – representa uma série de texto marcado.
  • progress – representa uma conclusão de uma tarefa, como baixar ou executar uma série de operações.
  • meter – representa uma medida, como o uso do disco.
  • time – representa uma data e/ou tempo.
  • ruby rb e rp – permite a marcação de anotações de Ruby.
  • canvas – é utilizada para renderização de gráficos bitmap.
  • command – representa um comando que o usuário pode invocar.
  • details – representa informações adicionais ou controles que o usuário pode obter sobre uma procura. O elemento summary fornece um resumo.
  • datalist – em conjunto com o atributo list usado na tag input pode ser usada para fazer caixas de combinação:

<input list=”browsers”>

<datalist>

<option value=”Safari”>

<option value=”Internet Explorer”>

<option value=”Opera”>

<option value=”Firefox”>

</datalist>

Isso só foi uma amostra da nova versão, nos próximos artigos vou estar mostrando como utilizar a nova versão do HTML 5.

Até++!

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s