0% acharam este documento útil (0 voto)

33 visualizações20 páginas

Comandos e Tags Do HTML5 - DevMedia

O documento fornece uma visão abrangente sobre HTML5, incluindo comandos e tags que foram mantidas ou descontinuadas. Ele também destaca as novas tags, atributos e eventos introduzidos no HTML5, além de simplificações na sintaxe. A DevMedia se apresenta como um recurso para quem deseja aprimorar suas habilidades em programação web.

Enviado por

Bruna Pedron

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

33 visualizações20 páginas

Comandos e Tags Do HTML5 - DevMedia

Enviado por

Bruna Pedron

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 20

Invista em você! Saiba como a DevMedia pode ajudar sua carreira.

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!

Artigos HTML e CSS Comandos e tags …

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

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

2 "http://www.w3.org/TR/html4/strict.dtd">

Agora fica apenas:

Listagem 2: HTML5 DOCTYPE

1 <!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

1 <link rel="stylesheet" type="text/css" href="arquivo.css">

2 <script type="text/javascript" src="arquivo.js"></script>

E agora, na HTML5:

Listagem 4: HTML5 LINK e SCRIPT

1 <link rel="stylesheet" href="arquivo.css">

2 <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

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

W3Schools - Tutorial de HTML5:

W3C - HTML5:

Wikipédia - HTML5:

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.

Confira outros conteúdos:

HTML Icons: utilizando

CSS Border
ícones em...
Por Rafael
Em 2012

Comentários nesta publicação

Escrever um comentário sobre conteúdo

Pwcodigo
Nível 3

Em pensar que é um conteúdo de 2012 é tão atual ao mesmo tempo.

há +1 ano

Daniella Gomes
DevMedia

O HTML não alterou muito Pablo. Na verdade, ao longo dos anos

aprendemos a integrá-lo com outas tecnologias para termos melhor
desempenho em nossas páginas, não é!
Bons estudos[]
há +1 ano

Weslen
Nível

Muito Bom cara ! Sou estudante do Curso de Sistemas de Informação, tava

com duvidas sobre as tags . Ajudo bastante !
há +1 ano
Faça a sua
matrícula
Pagamento anual
12x no cartão

De: R$ 79,00

Por: R$ 59,90
Total: R$ 718,80

Garanta o desconto

Formação FullStack Completa

Aprenda Marketing digital, automações

e IA para Devs

Módulo como ganhar dinheiro com Tech

+10.000 exercícios gamificados

+50 projetos reais com

acompanhamento

Clube de alunos e professores no

Mentorias online em grupo toda

semana

Estude pelo Aplicativo (Android e iOS)

Suporte 24h / 7 dias por semana

Biblioteca com +40 Tecnologias

12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 59,90 /mês

Total: R$ 718,80

Garanta o desconto

Formação FullStack Completa

Aprenda Marketing digital, automações

e IA para Devs

Módulo como ganhar dinheiro com Tech

+10.000 exercícios gamificados

+50 projetos reais com

acompanhamento

Clube de alunos e professores no

Mentorias online em grupo toda

semana

Estude pelo Aplicativo (Android e iOS)

Suporte 24h / 7 dias por semana

Biblioteca com +40 Tecnologias

Fidelidade de 12 meses

Não compromete o limite do seu cartão

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouquíssimas coisas de programação antes de começar a estudar

com vocês, fui me especializando em várias áreas e ferramentas que tinham
na plataforma, e com essa bagagem consegui um estágio logo no início do
meu primeiro período na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse período a Dev me
ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu
lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um Full-Stack Dev!
Heráclito Júnior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a

pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia
de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento

front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito
que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando
demais.

Joelberth Sena

Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um

passo a passo incrível. Só não aprende quem não quer. Foi o melhor
investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que já fiz na vida e tenho aprendido

bastante com a plataforma. Vocês estão fazendo parte da minha jornada
nesse mundo da programação, irei assinar meu contrato como
programador graças a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses

estudando outros cursos. Exercícios práticos que não tem como não
aprender, estão de parabéns!

José Lucas
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão
presente na vida acadêmica de seus alunos, parabéns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje

estou há 1 ano empregado trabalhando 100% com React!

Adauto Junior

Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou
aprendendo muito, muito obrigado por existirem. Estão de parabéns...
Espero um dia conseguir um emprego na área.

Ver todos os casos de sucesso

Menu
Assine agora
Quem somos Hospedagem web por Porta 80 Web Hosting.

FAQ - Fale conosco

Assinatura para empresas
Política de privacidade
Termos de uso
Política de estorno

Baixe o App

DevMedia: 08.401.613/0001-42
Rua Victor Civita, 66 - Salas 306, 307 e 308 -
Jacarepaguá
Rio de Janeiro - RJ, 22775-044