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é++!
Hom Digitalis 