Comandos e Tags do HTML5

Entendendo os comandos e tags HTML5

O HTML5 assim como qualquer outra linguagem ao ser atualizada, al�m de receber novo comandos, aposenta outros. Dessa forma, voc� pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadas e s� servem para as vers�es anteriores.

Relacionado: Curso completo de HTML5

Tags Continuadas:

Define um coment�rio;
<!DOCTYPE> Define o tipo de documento; (No HTML 4 existiam tr�s (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>. � aqui que o navegador entende o tipo de documento e como ele deve interpretar as tags nele contidas.)
<a> Define um hyperlink;
<abbr> Define uma abreviaç�o
<address> Define um endereço. (Passa a ser tratado como uma seç�o);
<area> Define uma �rea dentro de um mapa de imagem;
<b> Define um texto em negrito; (Possui o mesmo n�vel sem�ntico que um SPAN, e tamb�m o estilo de negrito no texto. Contudo, ele n�o d� nenhuma import�ncia para o texto marcado com ele.)
<base> Define uma base URL para todos os links da p�gina;
<bdo> Define a direç�o do texto apresentado;
<blockquote> Define uma citaç�o longa;
<body> Define o corpo da p�gina;
<br> Insere uma quebra de linha simples;
<button> Define um bot�o de comando;
<caption> Define o "caption" de uma tabela;
<cite> Define uma citaç�o;
<code> Define o c�digo texto do computador;
<col> Define os atributos da coluna da tabela;
<colgroup> Define um grupo de colunas da tabela;
<dd> Define uma descriç�o de definiç�o;
<del> Define um texto deletado;
<dfn> Define um termo de definiç�o;
<div> Define uma seç�o no documento;
<dl> Define uma lista de definiç�o;
<dt> Define um termo de definiç�o;
<em> Define um texto em �nfase;
<fieldset> Define um conjunto de campos (fieldset);
<form> Define um formul�rio;
<h1> at� >h6> Define do cabeçalho 1 at� o cabeçalho 6;
<head> Define uma informaç�o sobre o documento. (N�o aceita mais elementos Child como filho);
<hr> Define uma regra horizontal. (Tem o mesmo n�vel que um par�grafo, mas tamb�m � utilizado para fazer separaç�es e quebras de linha);
<html> Define um documento html;
<i> Define um texto em it�lico; (Possui o mesmo n�vel sem�ntico que um SPAN. O texto continua sendo it�lico e para usu�rios de leitores de tela, a voz utilizada � modificada para indicar �nfase. � de grande valor e utilidade para marcar, termos t�cnicos, termos em outras linguagens etc.)
<iframe> Define uma linhas sobre a janela (frame);
<img> Define uma imagem;
<input> Define um campo de inserç�o;
<ins> Define um texto inserido;
<kbd> Define um texto do teclado;
<label> Define uma "label" para o formul�rio;
<legend> Define um t�tulo para os campos (fields);
<li> Define os itens da lista;
<link> Define uma refer�ncia;
<map> Define uma imagem de mapa;
<menu> Define uma lista de "menus";
<meta> Define informaç�es meta;
<noscript> Define uma seç�o noscript;
<object> Define um objeto incorporado;
<ol> Define uma lista ordenada;
<optgroup> Define um grupo de opç�o;
<option> Define uma opç�o em uma lista suspensa (drop-down list);
<p> Define um par�grafo;
<param> Define um par�metro para determinado objeto;
<pre> Define um texto pr�-formatado;
<q> Define uma citaç�o curta;
<s> Define um texto que n�o � mais correto.
<samp> Define um c�digo de amostra;
<script> Define um script;
<select> Define uma lista selecion�vel;
<small> Define um pequeno texto;
<span> Define uma seç�o no documento;
<strong> Define um texto forte (similar ao negrito);
<style> Define um estilo;
<sub> Define um texto subscrito;
<sup> Define um texto sobrescrito;
<table> Define uma tabela;
<tbody> Define o corpo da tabela;
<td> Define uma c�lula da tabela;
<textarea> Define um �rea de texto;
<tfoot> Define o rodap� da tabela;
<th> Define o cabeçalho da tabela;
<thead> Define o cabeçalho da tabela;
<title> Define o t�tulo do documento;
<tr> Define uma linha da tabela;
<ul> Define uma lista desordenada;
<var> Define uma vari�vel;

Tags Descontinuadas:

<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>);
<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em funç�o da tag <object>);
<basefont> Define as propriedads da font padr�o para todo o texto do documento. (Apenas efeito visual);
<big> Usado para tornar o texto maior. (Apenas efeito visual);
<center> Usado para alinhar texto e conte�do no centro. (Apenas efeito visual);
<dir> Define a lista do diret�rio. (Ficou obsoleto em funç�o da Tag <ul>);
<font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual);
<frame> Define uma janela particular dentro de um conjunto de "frames". (Fere princ�pios de usabilidade e acessibilidade);
<frameset> Define um conjunto de frames organizado por m�ltiplas janelas.(Fere princ�pios de usabilidade e acessibilidade);
<noframes> Texto exibido para navegadores que n�o lidam com "frames". (Fere princ�pios de usabilidade e acessibilidade);
<strike> Exibe texto rasurado. (Apenas efeito visual);
<tt> Define teletipo de texto. (Apenas efeito visual);
<u> Define sublinhado. (Apenas efeito visual);
<xmp> Define texto pr�-formatado. (Ficou obsoleto em funç�o da tag <pre>);

Se analisarmos bem as definiç�es podemos perceber que muitas tags descontinuadas tiveram esse fim por j� existirem tags que realizam a mesma funç�o. E ao utilizar o HTML 5 voc� perceber� que algumas tags continuadas foram modificadas e passaram a exercer outras propriedades, fazendo, tamb�m, que outras tags percam valor.

Nota 1: Voc� pode ouvir em algum lugar sobre HTML - ArqHP (Arquitetura de Home Pages). � o pr�prio HTML 5 com outra denominaç�o e isso � apenas uma jogada de marketing.

Nota 2: Os HTML 1, HTML 2 , HTML 3 e o HTML 4 est�o todos contidos no HTML 5 e mesmo as tags descontinuadas n�o trazem nenhum problema de compatibilidade com o HTML 5 e o contr�rio tamb�m ocorre, onde as novas tags tamb�m n�o trazem nenhum problema de compatibilidade com as vers�es antigas.

HTML5 DOCTYPE e as Tags link e script

A tag <DOCTYPE> � a primeira que aparece em um documento HTML e indica para o browser o tipo e vers�o do documento que est� sendo aberto.

Na HTML5 o DOCTYPE ficou mais simples, com relaç�o � HTML4.1. Observe as listagens a seguir.

Listagem 1: HTML4.1 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

Agora fica apenas:

Listagem 2: HTML5 DOCTYPE

<!DOCTYPE html>

Nas tags link e script, utilizadas para referenciar arquivos CSS e JavaScript, respectivamente, n�o � mais necess�rio informar o atributo type=�text/css� ou text=�text/javascript�, como era feito na HTML 4.1.

As listagens a seguir mostram como eram essas tags na HTML4.1 e como s�o agora na HTML5.

HTML4.1 LINK e SCRIPT

<link rel="stylesheet" type="text/css" href="arquivo.css">
<script type="text/javascript" src="arquivo.js"></script>

E agora, na HTML5:

Listagem 4: HTML5 LINK e SCRIPT

<link rel="stylesheet" href="arquivo.css">
<script src="arquivo.js"></script>

Como vimos, das principais tags utilizadas no cabeçalho do documento tiveram sua sintaxe simplificada, facilitando o aprendizado e agilizando o desenvolvimento.

HTML 5 - Novos Atributos e Eventos

Neste artigo estaremos vendo os novos atributos globais e eventos do HTML 5.

Atributos Globais

contenteditable - especifica se o usu�rio est� autorizado a editar um conte�do ou n�o: true|false (verdadeiro|Falso).
contextmenu - especifica um menu contexto para um elemento. menu_id.
draggable - especifica se um usu�rio tem permiss�o para arrastar um elemento: true|false|auto (verdadeiro|falso|autom�tico).
dropzone - especifica o que acontece quando um dado arrastado � solto: copy|move|link (copiar|mover|linkar).
hidden - especifica que o elemento n�o � relevante: hidden (oculto).
spellcheck - especifica se o elemento deve ter sua grafia verificada: true|false (verdadeiro|falso).

Eventos

De Janelas:

onafterprint - executa ap�s o documento ser impresso.
onbeforeprint - executa antes do documento ser impresso.
onbeforeonload - executa antes do documento ser carregado.
onerror - executa quando ocorre um erro.
onhaschange - executa quando o documento sofre alteraç�o.
onmessage - executa quando uma mensagem � disparada.
onoffline - executa quando o documento � desconectado da internet.
ononline - executa quando o documento � conectado � internet.
onpagehide - executa quando a janela � ocultada.
onpageshow - executa quando a janela se torna vis�vel.
onpopstate - executa quando ocorre alteraç�o no hist�rico da janela.
onredo- executa quando � acionado o comando de repetir.
onresize - executa quando a janela tem alteraç�o de tamanho.
onstorage - executa quando um documento � carregado.
onundo - executa quando � acionado o comando de desfazer.
onunload - executa quando o usu�rio sai do documento.

De Formul�rios:

oncontextmenu - executa quando um menu de contexto � acionado.
onformchange - executa quando ocorre alteraç�es no formul�rio.
onforminput - executa quando o usu�rio d� entrada no formul�rio.
oninput - executa quando um elemento d� entrada do usu�rio no formul�rio.
oninvalid - executa quando um elemento n�o � v�lido.

De Mouse:

ondrag - executa quando um elemento � arrastado.
ondragend - executa ao fim de uma operaç�o de arrastar um elemento.
ondragenter - executa quando um elemento � arrastado e solto em seu destino.
ondragleave - executa quando um elemento � solto em um destino v�lido.
ondragover - executa quando elemento � arrastado e solto ao longo de um destino.
ondragstart - executa quando se inicia uma operaç�o de arrastar.
ondrop - executa quando o elemento arrastado est� sendo descartado.
onmousewheel - executa quando o scroll do mouse � girado.
onscroll - executa quando as barras de rolagem de um elemento est� sendo rolada.

De Multim�dia:

oncanplay - executa quando uma m�dia est� sendo iniciada a tocar.
onclanplaythrought - executa quando a m�dia est� sendo tocada at� o fim.
ondurationchange - executa quando o comprimento da m�dia � alterado.
onemptied - executado quando um elemento de recursos de m�dia torna-se vazio.
onended - executa quando a m�dia chega ao fim.
onerror - executa quando ocorre um erro de carregamento de um elemento.
onloadeddata - executa quando os dados de m�dia s�o carregados.
onloadedmetadata - executa quando a duraç�o de um elemento de m�dia est� sendo carregado.
onloadstart - executa quando o navegador começa a carregar os dados de m�dia.
onpause - executa quando a m�dia de dados est� em pausa.
onplay - executa quando a m�dia de dados for começar a tocar.
onplaying - executa quando a m�dia começa a tocar.
onprogress - executa quando o navegador est� buscando os dados de m�dia.
onratechange - executa quando altera a faixa de m�dia .
onreadystatechange - executa quando ocorre uma mudança de estado.
onseeked - executa quando o atributo de busca de um elemento n�o � verdadeiro.
onseeking - executa quando o atributo de busca de um elemento � verdadeiro.
onstalled - executa quando h� um erro na busca de dados de m�dia.
onsuspend - executa quando o navegador para de buscar os dados da m�dia.
ontimeupdate - executa quando a posiç�o da m�dia � alterada.
onvolumechange - executar quando a m�dia muda de volume e, tamb�m, quando o volume fica mudo.
onwaiting - executar quando a m�dia para de tocar.

HTML5 - Novas Tags

O HTML5 acrescentou uma nova s�rie de Tags a serem explorados pelos Web Designers, conforme mostra o (infogr�fico disponivel no site).�

H� praticamente uma d�cada sem atualizaç�o, o HTML abre as portas para os diversos browsers que conhecemos oferecendo uma gama de recursos multim�dia e aplicaç�es off-line.

Os novos recursos tem por objetivo facilitar a compreens�o e a manutenç�o do c�digo. Por isso, que organizaç�es como� Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML4 de 1999 e lançar o HTML5.

Layout

<article>: Define um artigo;
<aside>: Define o conte�do al�m do conte�do da p�gina;
<embed>: Define o conte�do interativo ou plugin externo;
<figcaption>: Define o caption de uma imagem;
<figure>: Define um grupo de m�dia e seus captions;
<footer>: Define o rodap� de uma p�gina;
<header>: Define o cabeçalho de uma p�gina;
<nav>: Define os links de navegaç�o;
<section>: Define uma �rea ou seç�o;
<wbr>: Define uma poss�vel quebra de linha;

Media

<audio>: Define o conte�do de som;
<source>: Define recursos de m�dia;
<video>: Define um v�deo;

Aplicativos Web

<canvas>: Define gr�ficos;
<command>: Define um bot�o de comando;
<datagrid>: Refer�ncias aos dados din�micos em Tree View ou tabelas;
<datalist>: Define uma lista suspensa (DropDown);
<details>: Define detalhes de um elemento;
<output>: Define os tipos de sa�da (outputs);
<progress>: Define o progresso de uma tarefa qualquer;

Linguagem Ruby

<rp>: Define o browser substituto para elementos n�o suportados pelo ruby;
<rt>: Define explicaç�es para as anotaç�es de ruby;
<ruby>: Define as anotaç�es de ruby;

Outros

<dialog>: Define uma conversa ou pessoas falando;
<hgroup>: Define informaç�es sobre uma determinada �rea do documento;
<keygen>: Define a key (chave) do formul�rio;
<mark>: Define a marcaç�o de um texto;
<meter>: Define a mediç�o dentro de um intervalo pr�-definido;
<summary>: Define o cabeçalho de dados �detalhe�;
<time>: Define uma data ou hora;

Sinta-se motivado a adquirir novas experi�ncias com o HTML.

Com esse novo leque de comandos e a adequaç�o e compatibilidade temos uma maior segurança de nossas p�ginas e aplicaç�es.

Desde setembro de 2011, grandes empresas t�m se aderido ao uso do HTML5. Como grande exemplo temos o Facebook que liberou recursos aos desenvolvedores para criar, transformar e inovar em aplicaç�es utilizadas para si mesmo.

Um grande abraço e at� o pr�ximo artigo!

Links �teis

Saiba mais sobre JavaScript ;)

Programando em HTML5:
Ao ser anunciada a vers�o 5 do padr�o HTML, inicialmente parte do mercado n�o recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma vers�o para outra. A verdade � que, desde que a vers�o 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
As Novidades do HTML5:
Neste artigo apresento as principais novidades da nova vers�o da linguagem de marcaç�o de hipertexto HTML, que j� est� dispon�vel nos principais navegadores de internet com suporte quase que total.
O que � o HTML5:
Veja neste artigo um pouco da hist�ria do HTML, o que � o HTML5 e suas principais mudanças em relaç�o �s vers�es anteriores.

Comandos e tags HTML5

Se você precisa conhecer comandos, dicas e tags HTML5 acesse nosso conteúdo gratuito. Tudo sobre HTML5 você encontra no maior site para programadores do Brasil. Estude agora!