Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guilherme Rambo

HTML 5 - Guia para quem está querendo começar

Recommended Posts

Pretendo fazer aqui um pequeno guia para quem está querendo iniciar com o HTML 5.

 

Considerações iniciais sobre o HTML 5

=========================

 

- O tratamento de acessibilidade como um recurso nativo do HTML, e não como um "extra"

- A definição de semântica em maiores detalhes. Existem tags no HTML 5 com funções muito específicas para descrever seu conteúdo, que não existiam em versões anteriores.

- Novos elementos tais como datagrid, menu, command, entre outros que podem impactar na arquitetura da web

- As arquiteturas de drag & drop e copy & paste

 

A sintaxe

======

 

A sintaxe em geral não apresenta grandes mudanças, no entanto existem muitas tags novas, que veremos mais adiante. Lembrando que documentos HTML 5 devem ser servidos com o mime-type text/html, mas podem ser escritos como XML (compatível com XHTML 1), ocasião em que devem ser servidos com mime-type adequado.

 

O DOCTYPE para documentos HTML 5 não necessita mais de um DTD, sendo assim, o doctype fica da seguinte forma:

<!DOCTYPE html>

 

Tags novas

=======

 

É aqui que a coisa começa a ficar interessante, vamos conhecer algumas das novas tags que o HTML 5 traz, e ver obviamente para que servem:

 

<section> - Representa uma seção de uma página ou aplicação. Digamos que eu tenha uma página com uma seção de novidades e uma outra seção de comentários, cada uma dessas seções seria englobada por uma tag <section>. Mostrarei alguns exemplos mais adiante.

 

<article> - Representa um post de blog, um artigo de um jornal, ou qualquer informação similar

 

<aside> - Representa um conteúdo que está relacionado de alguma forma com o resto da página, como uma sidebar por exemplo. Note que esta tag não se refere à posição do elemento, mas sim ao seu significado dentro do contexto.

 

<header> - Representa o cabeçalho de uma seção. O topo de um site, por exemplo.

 

<footer> - Representa o rodapé de uma seção.

 

<nav> - Representa qualquer tipo de navegação. Um menu, uma lista de ações, qualquer coisa que represente navegação.

 

<dialog> - Engloba um conteúdo de conversasão, um diálogo entre duas pessoas, por exemplo. Dentro dela pode-se usar uma lista de definições <dt> e <dd> para representar, respectivamente, o sujeito que está falando e a fala em si.

 

<figure> - Usada para englobar uma informação a algum conteúdo multimídia, como uma foto, por exemplo. Dentro dela coloque uma tag de multimídia, como <img>, e uma tag <legend> contendo a informação a ser acrescentada.

 

<audio> - Usada para representar áudio. Esta tag recebe, entre outros, o parâmetro src, com o arquivo de áudio. Pode ser usada em conjunto com tags <source> caso se tenha mais de um arquivo de audio.

 

<video> - Da mesma forma que <audio>, porém representa um vídeo.

 

<mark> - Representa algum texto marcado

 

<meter> - Representa uma medida. Pode ser uma medida de graus, uma medida de espaço em disco, qualquer coisa do tipo.

 

<progress> - Representa o progresso de uma tarefa específica, um download de arquivo, uma requisição assíncrona, etc.

 

<time> - Representa uma data e/ou hora

 

<canvas> - Esta tag é muito poderosa, pode ser usada em conjunto com javascript para gerar conteúdo dinâmico gráfico, como gráficos ou até mesmo jogos.

 

<command> - Representa um comando que o usuário pode executar.

 

<datagrid> - Usada para representar árvores, listas, ou dados tabulares.

 

<details> - Representa informações ou controles adicionais.

 

<datalist> - Em conjunto com o novo tipo de input "list", é usada para fazer caixas de seleção (comboboxes).

 

<keygen> - Representa um controle que gera valores do tipo chave-valor.

 

<bb> - Representa um comando do user agent que o usuário pode executar, tais como voltar, avançar, parar, etc.

 

<output> - Representa qualquer tipo de resultado. O resultado de um cálculo, por exemplo.

 

Novidades na tag input

===============

 

A tag input agora traz algumas novidades para seu atributo "type", tais como: datetime, datetime-local, date, month, week, time, number, range, email, url, search e color. A interface que aparecerá para o usuário nestas tags vai depender do sistema operacional e do browser do usuário.

 

Novos atributos

==========

 

Com a chegada do HTML 5, além de muitas tags novas, temos também muitos atributos novos em tags que já existiam antes, vou listar alguns:

 

- Os elementos input (exceto do tipo hidden), select, textarea e button, agora têm um atributo autofocus, que nada mais é do que um indicador de que quando a página carregar aquele elemento deverá aparecer com o cursor nele. Muito útil em formulários, por exemplo. Até hoje, isto precisava ser feito com javascript.

 

- Elementos input e textarea agora têm um atributo placeholder.

 

- Agora os elementos de formulário, tais como input, textarea, entre outros, não precisam mais ser posicionados dentro do form ao qual estão associados, em vez disso, um novo atributo "form" permite que você informe a qual form aquele elemento está associado.

 

- Um novo atributo required pode ser usado em elementos de formulário para indicar que aquele campo deve obrigatoriamente ser preenchido para que o form seja enviado.

 

- O elemento fieldset agora tem um atributo disabled, que quando especificado desabilita todos os elementos dentro dele.

 

- O elemento input agora tem muitos novos atributos, tais como autocomplete,min,max,multiple,pattern e step.

 

- Como existem novos atributos de validação de dados, o elemento form agora tem um atributo novalidate, que desativa a validação do formulário.

 

- A tag script tem um atributo async que influencia na forma com que o script é carregado e executado.

 

- O elemento html tem um novo atributo manifest que pode ser apontado para um cache de uma aplicação para aplicações web offline.

 

- O elemento ol tem um novo atributo reversed para indicar que a ordem da lista deverá ser inversa.

 

Novos atributos globais

===============

 

Atributos globais são aqueles que todos os elementos possuem. Entre os novos atributos globais do HTML 5, temos:

 

- O atributo contenteditable que indica que aquela área é editável. O usuário pode mudar o conteúdo do elemento e manipular sua marcação.

 

- O atributo contextmenu que pode ser usado para apontar para um menu popup (que aparece quando se clica com o botão direito, por exemplo).

 

- O atributo draggable que informa que aquele elemento pode ser arrastado.

 

- O atributo hidden que informa que aquele elemento não é mais, ou ainda não é relevante.

 

O HTML 5 também mudou a forma como os eventos são identificados, bem como introduziu novos. Eventos agora são apresentados na forma onevent-nomedoevento. Exemplo: onevent-click.

Elementos eliminados

==============

 

Alguns elementos foram totalmente descartados no HTML, alguns por serem meramente estéticos, e outros por oferecerem problemas de usabilidade ou acessibilidade: basefont,big,center,font,s,strike,tt,u,frame,frameset,noframes, entre outros. Eles ainda serão suportados pelos browsers para manter retrocompatibilidade, mas não devem mais ser usados.

 

Suporte dos browsers

==============

 

Atualmente, pelo que sei, o browser que tem melhor suporte as novidades do HTML 5 é o Safari 4 da Apple, que ainda não implementa muita coisa. Mas algumas das tags tais como video e audio já funcionam. Nos meus testes, os novos tipos de input não funcionaram. O Firefox tem bom suporte as tags mais comuns, como header,section,footer,article,aside, entre outras. O Internet Explorer 8 está começando a suportar também. No entanto, para os browsers mais velhos, tais como IE7 e IE6, você pode utilizar um script que troca estas tags por tags que eles entendem.

 

Onde usar?

=======

 

NÃO USE HTML 5 EM ALGUM PROJETO DE CLIENTE, SÉRIO! O HTML 5 é experimental e só deve ser usado por você em seus projetos pessoais, tal como fiz no Screencaster, lançando seu último layout implementado com HTML 5.

 

Só isso?

=====

 

Certo, para aqueles que ficaram com "gostinho de quero-mais", segue um exemplo bem simples de página implementada com HTML 5, só para vocês terem uma idéia da estrutura:

 

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <title>HTML 5 Things</title>
</head>
<body id="testpage">

   <section id="main">

       <header>
           <h1>This is the header of the main section</h1>

           <nav>
               <ul>
                   <li><a href="">Navigation link 1</a></li>
                   <li><a href="">Navigation link 2</a></li>
                   <li><a href="">Navigation link 3</a></li>
                   <li><a href="">Navigation link 4</a></li>
               </ul>
           </nav>
       </header>

       <div id="something">
           <article>
               <h2>This is an article</h2>
               <p>This is a paragraph inside of an article.</p>
           </article>

           <article>
               <h2>This is another article</h2>
               <small>Posted at <time>09:30am</time></small>
               <p>This is another paragraph inside of another article.</p>
           </article>

           <h3>Here's a dialog:</h3>
           <dialog>
               <dt>Somebody</dt>
               <dd>Said something</dd>
               <dt>Other person</dt>
               <dd>Said something</dd>
               <dt>Somebody</dt>
               <dd>Said something</dd>
               <dt>Other person</dt>
               <dd>Said something</dd>
               <dt>Somebody</dt>
               <dd>Said something</dd>
               <dt>Other person</dt>
               <dd>Said something</dd>
           </dialog>

           <meter>You're using 80mb from your 100mb disk space.</meter>
       </div>

       <footer>
           <p>This is the footer.</p>
       </footer>

   </section>

</body>
</html>

 

Finalizando

=======

 

Eu fiz este artigo me baseando na própria documentação do W3C, que, diga-se de passagem, também está pela metade ainda. Qualquer dúvida com relação ao HTML 5 postem, que eu e os outros moderadores/membros teremos o maior prazer em ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem legal.

Só uma pergunta, a tag <nav> quando eu fui validar , ele me retornou um erro dizendo que ela não pode estar dentro do header

Então eu deixo ela separada ou tem outra forma de incluir ela?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem legal.

Só uma pergunta, a tag <nav> quando eu fui validar , ele me retornou um erro dizendo que ela não pode estar dentro do header

Então eu deixo ela separada ou tem outra forma de incluir ela?

Qual validador você usou? O validador da W3C não valida HTML5...

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, excelente post! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Ficou bem explicado. Estava lendo o XHTML 2.0 e me parece ser muito interessante também. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quando converso com desenvolvedores do brasil me assusto como ignoram HTML 5 dizendo que nenhum navegador interpreta ou só interpreta algumas coisas futeis (Safari)...

 

Navegadores que suportam:

Safari 3+ sim

Firefox 2.0 sim, com HTTP header "Content-type: application / xhtml+xml"

Firefox 3.0 sim

Opera 9.0+ sim

MSIE 6.0 sim, com JavaScript

MSIE 7.0 sim, com JavaScript

 

Google usa em várias aplicações, inclusive na busca.

Youtube tem uma página experimental: http://www.youtube.com/html5

 

não há nada de não-estável que não tenha nos atuais XHTML, HTML4

Se fossem tao instaveis - XHTML, HTML4 - nao iriamos precisar de hacks e if ie

 

-

Diogo Shaw

http://twitter.com/k_pax

http://dgshaw.com

Compartilhar este post


Link para o post
Compartilhar em outros sites

Alguem ainda usa HTML 4? A grande maioria dos sites não usam XHTML 1?

E quando sair o HTML 5 e XHTML 2, qual usar?

Até onde eu sei no HTML isso é permitido:

<DIV ID="minhaDiv"> ou

<dIV iD="minhaDiv"> ou

<div Id="minhaDiv"> etc...

 

E eu acho isso estremamente tosco, porque não eliminam o HTML e ficamos só com o XHTML?

Compartilhar este post


Link para o post
Compartilhar em outros sites

E eu acho isso estremamente tosco, porque não eliminam o HTML e ficamos só com o XHTML?

O XHTML é o HTML servido com mime-type de XML, com prólogo de XML, e com características do XML. Se o XHTML for usado como o HTML, simplesmente sem prólogo de XML nem mime-type adequados, o mesmo não oferece vantagem nenhuma.

Sendo assim, de modo generalizado, tanto faz usar XHTML ou HTML.

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu também concordo com o Oenning...

 

porq o XHTML nun veio para "revolucionar" e/ou melhorar o HTML?

então porque dar continuidade a uma coiza que mesmo sendo nova como o html5 vai ter erros da mesma maneira do 4 ,4.1,etc....

 

tem é q acabar com o HTML lógo e viva o XHTML!!!!!! rsrsrsrs

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu acho que traz vantagem sim, o fato de termos um código padronizado é muito bom. Alguém sabe um site famoso que usa HTML 4?

Atualmente XHTML 1 é mais famoso que o HTML 4. Já nessa nova onda, está sendo o contrário, você lê mais HTML 5 do que XHTML 2.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O código HTML4 também é padronizado. Não quer dizer que por usar XHTML o código se torna automaticamente padronizado. Dá pra fazer tanta m*** com XHTML quanto se faz com HTML. "Fama" não é um parâmetro sensato para optar por tecnologias.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como o #INSIDE# disse, fama não é um bom parâmentro para se "apoiar". http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Você deve analisar qual o mais adequado para se usar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, eu não consigo ver nenhuma vantagem em usar html4 ao invés de xhtml1, portanto fico com meu 1.0 strict até sair o 2.0 :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

No momento estou utilizando o XHTML 1.1. É um pouco mais rigoroso que o XHTML 1.0 Strict. Quando os browsers derem suporte total ao XHTML 2, testo todas suas funcionalidades. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Já dei uma lida bem básica no site da W3C, mas não testei nada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara... resolvi testar aki e no Firefox 3.5 RC1 não funciona... no IE 7 tbm não... nem no 8... Opera... sem sucesso

 

As propriedades dos inputs como autofocus não funcionam, os novos tipos de input também não vi funcionar nadinha =/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara... resolvi testar aki e no Firefox 3.5 RC1 não funciona... no IE 7 tbm não... nem no 8... Opera... sem sucesso

 

As propriedades dos inputs como autofocus não funcionam, os novos tipos de input também não vi funcionar nadinha =/

Essas coisas nenhum browser suporta ainda. O que eles estão suportando são apenas as tags novas, tipo section, article, etc...

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

INSIDE, mas essas tags section, article são apenas para aumentar a semântica né? Não alteram em nada o comportamento.

Compartilhar este post


Link para o post
Compartilhar em outros sites

INSIDE, mas essas tags section, article são apenas para aumentar a semântica né? Não alteram em nada o comportamento.

São para aumentar a semântica. Mas tem outras como audio e video que já funcionam no Safari. O Safari também suporta CSS animations. Na página de desenvolvedores da Apple tem mais informações sobre o assunto.

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.