Pular para o conteúdo principal

Tutorial - HTML5: Introdução





Novos elementos

Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento <div> com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:





Elementos de estrutura

<header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>);

<section> - cada seção do conteúdo;

<article> - um item do conteúdo dentro da página ou da seção;

<footer> - o rodapé da página ou de uma seção;

<nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

<aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).









Elementos de conteúdo

<figure> - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe:



   <figure id="figura01">

      <legend>Figura 1. Esquema de uma página em HTML5</legend>

      <img src="html5.png" border="0" width="200" height="300"

         alt="Como fica a estrutura de uma página escrita com os novos elementos do HTML5" />

   </figure>



<canvas> - através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;



<audio> e <video&gt; - usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens:



   <audio src="musica.mp3" autoplay="autoplay" loop="20000" />



   <video src="video.mov" width="400" height="360" />



<dialog> - junto com as tags <dt> e <dd> será usado para formatar um diálogo:



   <dialog>

      <dt> Michael, you never told me your family knew Johnny Fontane!

      <dd> Oh sure, you want to meet him?

      <dt> Yeah!

      <dd> You know, my father helped Johnny in his career.

      <dt> Really? How?

      <dd> ...Let's listen to this song.

      </dialog>

   <time> - representa data e/ou hora;



<meter> - usada para representar medidas, que podem ser de distância, de armazenagem em disco, etc.



Elementos retirados do HTML5

Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual, e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e <noframes>.



Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente.



Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:



target no elemento <a>;

align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;

background em <body>;

bgcolor nos elementos de tabela e no <body>;

border em <table> e <object>;

cellpadding e cellspacing em <table>;

height em <td> e <th>;

width nos elementos <hr>, <table>, <td>, <th> e <pre>;

hspace e vspace em <img> e <object>;

noshade e size em <hr>.



Doctype

Com o HTML5 usaremos apenas uma declaração doctype:



<!DOCTYPE html>

Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.



Transição do XHTML

A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.



A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como <img> e <input> fossem "fechados":



   <input type="text" id="nome">



Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita:



   <input type="text" id="nome" />



Artigo retirado de: Infowester

Comentários

Postagens mais visitadas deste blog

Temperamento - Decubra seu Perfil Profissional

Pergunta Sim Não 1: Gosta de conversar? 2: Gosta de atividade, ação? 3: Emociona-se com facilidade? 4: “Explode” facilmente? 5: Está sempre atualizado nos mais diversos assuntos(cultura geral)? 6: É imaginativo? 7: Tem inclinação para a crítica e para ironia? 8: Tem tendência a mudar de opinião se apresentarem argumentos válidos? 9: Quando lhe pedem desculpas,reconcilia-se com facilidade? 10: Tem dificuldade em perdoar/esquecer? 11: Gosta de fazer o bem sempre que pode? 12: Aflige-se facilmente com os males do próximo? 13: É mais optimista do que pessimista? 14: Ri com facilidade quando há motivo? 15: É uma pessoa inconstante,pouco perseverante? 16: Prefere que sejam outros a resolver os problemas? 17: Aceita facilmente novas ordens que lhe são dadas? 18: Gosta de novidades? 19: Gosta de andar elegante, bem vestido? 20: Gosta de ser admirado/elogiado pelos outros? Pergunta Sim Não

Downloads no iTunes U chegam a 300 milhões

A Apple anunciou nessa terça que nada menos que 300 milhões de downloads de conteúdos educacionais foram feitos por meio do ITunes. A iniciativa permite que estudantes do mundo inteiro baixem programas de áudio e de vídeo produzidos por mais de 800 universidades, entre elas Harvard , Cambridge , Oxford e o MIT .
PDF Converter Precisa converter algum arquivo em PDF, mas não tem algum programa que faça isso? O site PDF Converter faz o serviço em poucos cliques. Vá ao botão Browse, escolha o documento que quer converter, digite o e-mail de destino e clique em Convert Your File Google Tradutor Se você tem dificuldades em ler textos em outras línguas, o Google Tradutor é uma boa opção. Para utilizá-lo, escolha o idioma, digite o texto e, depois, selecione para qual idioma quer traduzir. Colar um endereço de página (URL) na caixa de texto e clicar em Traduzir também funciona HearNames O HearNames mostra como se pronuncia corretamente um nome. Para usar o serviço, digite o nome na caixa de texto e clique em Search. Após isso, clique no ícone de alto-falante que aparecerá para ouvir como se fala SuperLame Útil para quem não sabe mexer em programas de edição, o SuperLame executa uma função simples: inserir balões de diálogo em imagens. O procedimento é simples: faça o upload de uma imagem