Novos Elementos
Propaganda
HTML5 é uma linguagem de marcação utilizada para estruturação e apresentação do conteúdo na web. O HTML5 é a evolução do bom e velho HTML 4.1, que não recebia uma atualização desde 1999, e quem já trabalhou com a versão anterior não terá problemas com a atualização, tendo em vista que o HTML5 foi projetado considerando a compatibilidade com as antigas funcionalidades. Novos Elementos O HTML5 acrescenta novos elementos com o objetivo de facilitar a compreensão e manutenção do código. Alguns desses elementos são evoluções semanticas do elemento <div>; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Estrutura semântica <header> = cabeçalho da página, não confundir com o elemento <article> = <section> = elemento mais geral, assim como o elemento <div>, serve para seções da <aside> = barra <nav> = navegação do site <footer> = rodapé <head> conteúdo delimitar página lateral (menus) Formulários Para facilitar o desenvolvimeno em relação às validações dos sites e aplicações, o HTML5 traz novos tipos de elementos de entrada <input> para formulários, são eles: number, search, range, email, date, url e week. SVG O HTML5 traz também o suporte a imagens do tipo SVG (Scalable Vectorial Graphics) diretamente no elemento <img>. APIs Tem-se suporte a novas APIs que permitem ao desenvolvedor ter acesso a funcionalidades que a antiga versão não permitia. Como Geolocalização, Canvas, Multimídia, Web Storage, Aplicação Offline e Microdata. Conclusão Estas foram algumas das características do HTML5, tecnologia que veio pra ficar e agregar muito mais semântica às páginas web, facilitando assim a compreensão dessas páginas tanto por humanos quanto por robôs. E embora seja muito parecido com o HTML4.1 ele fornece um suporte ao desenvolvedor para que este possa desenvolver aplicações cada vez mais ricas. A estrutura semântica do HTML5 novos elementos de marcação que compõem a sua estrutura. Elementos esses que são introduzidos a tecnologia para agregar uma maior semântica as páginas web, aumentando assim a compreensão dos computadores sobre as páginas web. Mas como assim aumentando a compreensão dos computadores sobre as páginas web? Atualmente a maioria do conteúdo publicado na web possui um significado. E é através das marcações do HTML que o computador consegue identificá-lo. O HTML4.1 já possuía alguns desses recursos e os leitores de tela e robôs do google, por exemplo, já conseguiam identificar os títulos, parágrafos, links, etc. Mas existem tipos de dados que eles não conseguiam compreender. Pensando nisso, o HTML5 fornece uma série de ferramentas para facilitar a vida dos desenvolvedores e agregar uma maior semântica as páginas web: Novos elementos de mídia; Novos elementos estruturais; Nova semântica para a internacionalização; Novos tipos de relação de links; Novos atributos; Novos tipos de formulário; Nova sintaxe de microdados para semântica adicional. Neste tutorial trataremos dos elementos estruturais do HTML5 e agora que o assunto já foi introduzido, vamos aos exemplos práticos. Mãos a obra Pra começar, vamos definir o Doctype do HTML5, que ficou mais simples se comparado às versões anteriores. Antes era assim: 1<!!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Agora é assim: 1 <!DOCTYPE html> Logo, percebe-se que o HTML5 veio para simplificar a linguagem, deixando o desenvolvedor se preocupar com o que realmente é necessário. Após definirmos o Doctype, nós já possuímos um documento HTML5. Agora vamos inserir o elemento <html> na nossa página. No atributo lang definimos qual o idioma principal da página. Lembre-se que o atributo lang não é restrito ao elemento <html>, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 </html> O próximo passo é a tag <head>. Na tag <head> é onde fica toda a parte inteligente da página. No <head> ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado. Uma dessas informações é o charset, que no HTML5 ficou mais simples de se declarar. 1<!DOCTYPE html> 2<html lang="pt-br"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Página Teste</title> 6 <link rel="stylesheet" type="text/css" href="estilo.css"> 7 8 </head> </html> 9 Há dois tipos de links no HTML: a tag <a>, que são links que levam o usuário para outros documentos e a tag <link>, que são links para fontes externas que serão usadas no documento, como utilizado no exemplo anterior, onde o documento está "carregando" o arquivo estilo.css. Após definir o cabeçalho <head> do documento HTML é a hora de definirmos o corpo dele através da tag <body>. Que é onde fica o conteúdo que o usuário irá ver na sua página web. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Página Teste</title> 7 <link rel="stylesheet" type="text/css" href="estilo.css"> 8 9 </head> 1 0 <body> 1 1 </body> </html> 1 2 Até então não existem muitas diferenças entre as versões do HTML. Algumas instruções foram simplificadas, mas só isso mudou. Agora vamos criar uma estrutura semântica simples para o conteúdo da sua página web. Começaremos pela tag <header>, que pode ser utilizada em dois contextos: marcar o cabeçalho da página e marcar o cabeçalho de um ou vários artigos. Ou seja, pode existir mais de uma tag <header> dentro do mesmo documento, porém não pode existir uma tag <header> dentro de outra. Lembre-se a tag <header> é diferente da tag <head>. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 5 <head> <meta charset="utf-8"> <title>Página Teste</title> 6 7 8 9 1 <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <header> 0 1 1 1 2 </header> </body> 1 </html> 3 1 4 Dentro da tag <header> podemos inserir, por exemplo, o título do site através da tag <h1> e definir a navegação do site, ou seja, os menus, através da tag <nav>. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 5 <head> <meta charset="utf-8"> <title>Página Teste</title> 6 7 8 9 <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <header> 1 0 <h1>Nome do site</h1> <nav> 1 1 <ul> 1 2 <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> 1 3 <li><a href="#">Link 3</a></li> </ul> 1 4 1 5 1 </nav> </header> </body> 6 1 7 1 8 1 9 </html> 2 0 2 1 Pronto, já temos o cabeçalho da nossa página web com navegação. Vamos agora adicionar um artigo a essa página através da tag <article>. Depois iremos separar o artigo em cabeçalho (através da tag <header>), seções (através da tag <section>) e rodapé (através da tag <footer>). Como eu já havia explicado anteriormente, a tag <header> será agora utilizada para indicar o cabeçalho de um artigo. A tag <h1> dentro do cabeçalho do artigo irá indicar o título do artigo. A tag <section> define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno. Em nosso exemplo ela será utilizada dentro da tag <article>. Logo, nesse contexto, ela servirá para separar as seções do artigo. Por fim utilizaremos a tag <footer> que assim como as tags <header> e <section> pode ser utlizada em múltiplos contextos e no atual ela servirá para indicar o rodapé do artigo. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 5 <head> <meta charset="utf-8"> <title>Página Teste</title> 6 7 <link rel="stylesheet" type="text/css" href="estilo.css"> </head> 8 9 1 0 1 1 <body> <header> <h1>Nome do site</h1> <nav> <ul> <li><a href="#">Link 1</a></li> 1 2 1 3 1 4 1 5 1 6 <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </header> <article> <header> <h1>Título do artigo</h1> <p>Mussum ipsum cacilds, vidis litro abertis. 1 Consetis adipiscings elitis. Pra lá , depois divoltis porris, 7 paradis. Paisis, filhis, espiritis santis. Mé faiz elementum 1 girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis 8 quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss 1 quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> 9 2 0 2 1 2 2 2 3 2 4 2 5 2 </header> <section> <h2>Título da seção do artigo</h2> <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p> </section> <footer> <h3>Título do rodapé do artigo</h3> 6 2 7 2 8 2 9 3 0 3 1 <p>Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </footer> 3 2 </article> </body> 3 3 </html> 3 4 3 5 Por fim, vamos adicionar a barra lateral, através da tag <aside>, e o rodapé da página através da tag <footer>, que nesse contexto está relacionada com o rodapé da página e não do artigo. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 4 5 <head> <meta charset="utf-8"> <title>Página Teste</title> 6 7 8 9 1 0 <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <header> <h1>Nome do site</h1> 1 1 <nav> <ul> 1 2 <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> 1 3 1 4 1 5 <li><a href="#">Link 3</a></li> </ul> </nav> </header> <article> 1 6 1 7 1 8 1 9 2 0 2 1 <header> <h1>Título do artigo</h1> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </header> <section> <h2>Título da seção do artigo</h2> <p>Suco de cevadiss, é um leite divinis, qui tem 2 lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, 2 vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere 2 pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, 3 volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum 2 dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, 4 non scelerisque augue. Aenean justo massa.</p> 2 5 2 6 </section> <footer> <h3>Título do rodapé do artigo</h3> <p>Casamentiss faiz malandris se pirulitá, Nam liber 2 tempor cum soluta nobis eleifend option congue nihil imperdiet doming 7 id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, 2 vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. 8 Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 2 9 3 0 dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 3 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 1 aliquip ex ea commodo consequat.</p> 3 2 </footer> </article> 3 3 3 4 3 5 3 6 3 7 <aside> <h3>Título da barra lateral do site</h3> <p>Cevadis im ampola pa arma uma pindureta. Nam varius eleifend orci, sed viverra nisl condimentum ut. Donec eget justis enim. Atirei o pau no gatis. Viva Forevis aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Copo furadis é disculpa de babadis, arcu quam euismod magna, bibendum egestas augue arcu ut est. Delegadis gente finis. In sit amet mattis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis. Pellentesque viverra accumsan ipsum elementum gravidis.</p> </aside> 3 8 <footer> <h3>Rodapé da página</h3> 3 9 4 0 </footer> </body> </html> 4 1 4 2 E, pronto, terminamos a nossa página web criada com elementos HTML5 que agregam maior semântica ao documento. Conclusão Você conseguiu notar a relação entre as marcações? Por exemplo, se uma tag <header> está dentro de uma tag <article> significa que ela se refere ao cabeçalho do artigo, se essa mesma tag <header> não possuir como pai uma tag <article> ou uma tag <section>, então ela se refere ao cabeçalho da página web. Notou que estamos agregando significados aos dados da nossa página web de modo a torná-la mais compreensível? Agora um leitor digital ou um robô de busca consegue identificar cada elemento da página, e isso contribui com inúmeros fatores na computação, como a acessebilidade. Já compreendemos como funciona a estrutura do HTML5 e como ela ajuda a agregar semântica às páginas web, então, no próximo artigo, trabalharemos a API de Microdados do HTML5, que auxilia a agregar mais semântica as páginas web. Assim, os motores de busca , web crawlers e navegadores podem extrair e processar microdados de uma página web e usá-los para proporcionar uma experiência mais rica de navegação para os usuários. Referências HTML5 – Curso W3C Brasil - http://www.w3c.br/pub/Cursos/CursoHTML5/html5web.pdf Semântica HTML5: comece agora a usá-la! - http://imasters.com.br/desenvolvimento/web-standards/semantica-html5-comeceagora-mesmo-use
