HML5_Um_mero_resumo

Prévia do material em texto

HML5
Um mero resumo
Jonas Mayer
versão 1.0
1
2
Sumário
1.Introdução.............................................................................................................................................................7
1.1.O que é HTML? ...........................................................................................................................................7
2.Estrutura básica....................................................................................................................................................7
2.1.O Doctype ....................................................................................................................................................7
2.2.O elemento HTML.......................................................................................................................................7
2.3.O HEAD.......................................................................................................................................................7
2.3.1.O elemento title.....................................................................................................................................8
2.3.2.O elemento base....................................................................................................................................8
2.3.3.O elemento link.....................................................................................................................................8
2.3.4.O elemento style....................................................................................................................................8
2.3.5.O elemento meta...................................................................................................................................8
2.3.5.1.Metatag Charset.............................................................................................................................9
2.3.6.O elemento script..................................................................................................................................9
2.4.Formatação...................................................................................................................................................9
2.5.Tag LINK......................................................................................................................................................9
2.6.Parágrafos.....................................................................................................................................................9
2.7.Cabeçalho...................................................................................................................................................10
2.8.Links...........................................................................................................................................................10
2.9.Âncoras.......................................................................................................................................................11
2.10.Imagens.....................................................................................................................................................11
2.11.Tabelas......................................................................................................................................................12
2.12.Listas.........................................................................................................................................................13
2.13. Blocos......................................................................................................................................................13
2.13.1.O elemento div..................................................................................................................................13
2.13.2.O elemento span................................................................................................................................14
2.14.Layouts.....................................................................................................................................................14
2.15.Formulários...............................................................................................................................................15
2.15.1.A tag input.........................................................................................................................................15
2.15.2.A tag select........................................................................................................................................17
2.15.3.A tag datalist......................................................................................................................................18
2.15.4.A tag keygen......................................................................................................................................18
2.15.5.A tag output.......................................................................................................................................19
2.15.6.A tag textarea....................................................................................................................................19
2.15.7.A tag label.........................................................................................................................................19
2.15.8.A tag form.........................................................................................................................................20
2.15.9.Métodos GET e POST......................................................................................................................20
2.16.O elemento iframe....................................................................................................................................21
2.17. Entidades..................................................................................................................................................21
2.18.Codificação da URL.................................................................................................................................22
2.19.O elemento canvas....................................................................................................................................22
2.20.SVG .........................................................................................................................................................23
2.21.O elemento Video.....................................................................................................................................24
2.22.O elemento Audio ....................................................................................................................................24
3. Modelos de conteúdo.........................................................................................................................................25
3.1.Categorias...................................................................................................................................................25
Metadata content...............................................................................................................................................26
base ..............................................................................................................................................................26
command .....................................................................................................................................................26
link ..............................................................................................................................................................27
meta .............................................................................................................................................................28noscript ........................................................................................................................................................29
script ............................................................................................................................................................30
3
style .............................................................................................................................................................30
title ..............................................................................................................................................................31
Flow content.....................................................................................................................................................32
a....................................................................................................................................................................32
abbr..............................................................................................................................................................33
address..........................................................................................................................................................33
area...............................................................................................................................................................33
article............................................................................................................................................................35
aside.............................................................................................................................................................35
audio.............................................................................................................................................................35
b....................................................................................................................................................................36
bdo................................................................................................................................................................36
blockquote....................................................................................................................................................37
br..................................................................................................................................................................37
button...........................................................................................................................................................38
canvas...........................................................................................................................................................39
cite................................................................................................................................................................39
code..............................................................................................................................................................39
datalist..........................................................................................................................................................40
del.................................................................................................................................................................40
details...........................................................................................................................................................41
dfn................................................................................................................................................................41
div................................................................................................................................................................41
dl..................................................................................................................................................................42
em.................................................................................................................................................................42
embed...........................................................................................................................................................42
fieldset..........................................................................................................................................................42
figure............................................................................................................................................................43
footer............................................................................................................................................................43
form..............................................................................................................................................................44
h1 - h6..........................................................................................................................................................45
header...........................................................................................................................................................45
hgroup..........................................................................................................................................................45
hr..................................................................................................................................................................46
i....................................................................................................................................................................46
iframe...........................................................................................................................................................46
img...............................................................................................................................................................47
input.............................................................................................................................................................48
ins.................................................................................................................................................................50
kbd................................................................................................................................................................51
keygen..........................................................................................................................................................51
label..............................................................................................................................................................51
map...............................................................................................................................................................52
mark.............................................................................................................................................................53
meter.............................................................................................................................................................53
nav................................................................................................................................................................54
object............................................................................................................................................................54ol..................................................................................................................................................................55
output...........................................................................................................................................................55
p....................................................................................................................................................................56
pre................................................................................................................................................................56
progress........................................................................................................................................................56
q....................................................................................................................................................................57
ruby..............................................................................................................................................................57
4
select.............................................................................................................................................................58
small.............................................................................................................................................................58
span..............................................................................................................................................................59
strong............................................................................................................................................................59
sub................................................................................................................................................................59
sup................................................................................................................................................................59
table..............................................................................................................................................................59
textarea.........................................................................................................................................................60
time..............................................................................................................................................................61
ul..................................................................................................................................................................61
var................................................................................................................................................................62
video.............................................................................................................................................................62
wbr...............................................................................................................................................................63
Sectioning content............................................................................................................................................63
Heading content................................................................................................................................................63
Phrasing content................................................................................................................................................63
Embedded content............................................................................................................................................64
Interactive content............................................................................................................................................65
3.2.Atributos globais.........................................................................................................................................65
3.3.Atributos de Evento....................................................................................................................................66
3.3.1.Atributos de eventos de janela............................................................................................................66
3.3.2.Eventos de formulários.......................................................................................................................66
3.3.3.Evento do teclado................................................................................................................................67
3.3.4.Eventos de Mouse...............................................................................................................................67
3.3.5.Eventos de mídia.................................................................................................................................68
4.Validação de formulários....................................................................................................................................70
4.1.pattern.........................................................................................................................................................70
4.2.novalidate e formnovalidate.......................................................................................................................70
4.3.Custom validators.......................................................................................................................................71
5.Multimedia.........................................................................................................................................................71
5.1.O elemento object.......................................................................................................................................71
5.2.Audio..........................................................................................................................................................72
5.3.Video...........................................................................................................................................................74
6.Armazenamento Web com HTML5 ................................................................................................................76
7.Cache da aplicativos HTML...............................................................................................................................77
8.Workers Web .....................................................................................................................................................79
9.Drag and Drop....................................................................................................................................................80
9.1.dragstart......................................................................................................................................................81
10.Geolocalização.................................................................................................................................................82
11.Eventos Sever-Sent...........................................................................................................................................84
12.Revisão ortográfica e gramatical......................................................................................................................85
13.O elemento device............................................................................................................................................85
13.1.Streams.....................................................................................................................................................85Referèncias............................................................................................................................................................86
5
6
HTML
1.Introdução
1.1.O que é HTML? 
HTML é uma abreviação de Hypertext Markup Language (Linguagem de Marcação de Hipertexto) Ela é uma linguagem de 
marcação utilizada para produzir páginas Web. 
A partir da versão 5 do HTML ou seja, HTML 5 foram adicionadas ferramentas para optimizar a interação com CSS e JavaScript, 
também foram criadas novas tags e outras foram modificadas. 
As atualizações desta versão também incluem:
• Novas APIs, entre elas uma para desenvolvimento de gráficos bidimensionais
• Controle embutido de conteúdo multimídia
• Aprimoramento do uso off-line
• Melhoria na depuração de erros
2.Estrutura básica
Um documento HTML é composto de elementos que possuem uma tag, atributos, valores e possivelmente filhos que podem ser 
um texto simples ou outros elementos. Cada elemento deve obrigatoriamente possuir uma tag e ela deve estar entre parênteses 
angulares (< e >). Veja o exemplo:
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
 <title></title>
 </head>
 <body>
 </body>
 </html>
2.1.O Doctype 
O Doctype deve ser a primeira linha de código do documento antes da tag HTML. No HTML5 a declaração DOCTYPE foi 
simplificada: 
<!DOCTYPE html!>
O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era 
necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é 
responsabilidade do Browser.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão do código a 
marcação foi escrita.
2.2.O elemento HTML
O código HTML é uma estrutura em árvore. O elemento principal ou nó raiz é sempre a tag HTML.
<html>
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. O atributo LANG não é 
restrito ap elemento HTML, ele pode ser uzado em qualquer outro elemento para indicar o idioma do texto representado.
2.3.O HEAD
É na tag HEAD onde ficam os metadados. Os metadados são informações sobre a página e o conteúdo ali publicado. O elemento 
pode incluir scripts, instruir o navegador a onde encontrar a folha de estilo, fornecer meta informações e muito mais.
As seguintes tags podem ser adicionadas a seção head: <title>, <style>, <meta>, <link>, <script>, <noscript>, e <base>. 
7
2.3.1.O elemento title
A tag <title> define o título do documento.
O elemento <title> é necessária em todos os documentos HTML /XHTML.
O elemento <title>:
• define um título na barra de ferramentas do navegador
• fornece um título para a página que é adicionado aos favoritos
• exibe um título para a página no motor de pesquisa resultados
Um documento HTML simplificado:
<!DOCTYPE html>
<html>
<head>
<title>Título do documento</title>
</head>
<body>
O conteúdo do documento......
</body>
</html> 
2.3.2.O elemento base
A tag <base> especifica o URL base /target para todas as URLs relativas em uma página:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head> 
2.3.3.O elemento link
A tag <link> define a relação entre um documento e um recurso externo.
A tag <link> é mais utilizado para vincular a folhas de estilo:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 
2.3.4.O elemento style
A tag <style> é usada para definir informações de estilo para um documento HTML.
Dentro do elemento <style> que é especificado como elementos HTML devem ser processados em um navegador:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head> 
2.3.5.O elemento meta
O <meta> fornece metadados sobre o documento HTML. Metadados não será exibido na página, mas será analisádo pela máquina.
Elementos meta são normalmente usados para especificar descrição da página, palavras-chave, autor do documento, modificada 
pela última vez, e outros metadados.
Os metadados podem ser utilizados pelos navegadores , pelos motores de busca (palavras-chave), ou outros serviços da web.
8
2.3.5.1.Metatag Charset
Responsável por informar o encoding do documento.
<meta charset=”utf-8”>
2.3.6.O elemento script
A tag script é usada para definir um script do lado cliente, como um JavaScript.
2.4.Formatação
HTML utiliza tags como <b> e <i> para a saída de formatação, como negrito ou itálico.
Tags de formatação de texto
<b> - Define o texto em negrito
<em> - Define texto enfatizado
<i> - Define texto itálico
<small> - Define o texto como pequeno
<strong> - Define o texto como grande
<sub> - Define texto subscrito
<sup> - Define o texto sobrescrito
<ins> - Define o texto inserido
<del> - Define o texto excluído
2.5.Tag LINK
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.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>
Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.
No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de 
material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.
2.6.Parágrafos
Os parágrafos dentro de um documento HTML, em geral, são representados através da tag p. Uma das características da tag p é 
que ela ocupa horizontalmente todo o espaço definido pelo elemento pai.
Pelo fato da tag p se um elemento de bloco, o navegador irá ajustar o texto à largura do elemento pai realizando todas as quebras 
de linha necessárias. Caso seja necessário forçar uma quebra de linha no meio de um texto, podemos utilizar a tag br.
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de quebra de linha em um parágrafo </title >
 </head >
 <body >
 <p>Um texto bem longo . Longo mesmo ! Este parágrafo serve para demonstrar
 o comportamento da quebra de linha automática , ou seja , sem utilizar
 nenhum recurso para que a quebra ocorra .</p>
 <p>Já este parágrafo demonstra a qubra de linha forçada .<br/>Percebeu ?</p>
 </body >
</html >
9
2.7.Cabeçalho
Uma página HTML pode conter uma hierarquia de títulos para estabelecer uma divisão de seu conteúdo. Para conseguirmos 
realizar essa tarefa devemos utilizar as tags de cabeçalho h1, h2, h3, h4, h5 e h6.
Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento.
Veja o exemplo:
<html>
 <head>
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title>Exemplo de cabeçalhos </title >
 </head>
 <body>
 <h1>Título 1</h1>
 <h2>Título 2</h2>
 <h3>Título 3</h3>
 <h4>Título 4</h4>
 <h5>Título 5</h5>
 <h6>Título 6</h6>
 </body>
</html>
Cada nível possui um tamanho diferente de fonte. Esse tamanho é determinado pelo navegador e pode ser alterado através de 
regras CSS.
Devemos utilizar os cabeçalhos com cautela, pois eles são utilizados como parâmetros de ranqueamento da página por diversos 
buscadores como Google, Yahoo e Bing, por exemplo. O uso correto das tags de cabeçalho faz parte das técnicas de SEO (Search 
Engine Optimization) que, como o próprio nome já indica, são técnicas que ajudam a melhorar o ranqueamento de páginas dentro dos 
buscadores.
De acordo com as técnicas de SEO devemos tomar os seguintes cuidadosao utilizarmos as tags de cabeçalhos:
• Utilizar apenas uma tag h1 por página
• Utilizar no máximo duas tags h2 por página
2.8.Links
Para criarmos um link devemos utilizar a tag a. Porém, a tag a sem atributos não irá criar nenhum link interno ou externo. Para que
um link seja criado devemos, no mínimo, utilizar o atributo href com o caminho relativo ou absoluto de uma outra página. O elemento
pode conter mais do que apenas texto, ele pode conter outros elementos como imagens.
Veja o exemplo:
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Exemplo de uso da tag a</title>
 </head>
 <body>
 <p><a href ="pagina2.html">Exemplo de link relativo</a></p>
 <p><a href ="outros/pagina3.html">Outro exemplo de link relativo</a></p>
 <p><a href =" http://www.k19.com.br">Exemplo de link absoluto</a></p>
 </body>
</html>
Além do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o documento. Os possíveis valores 
para o atributo target são:
• _blank - em uma nova janela ou aba
• _self - na mesma janela ou frame do documento que contémo link
• _parent - em um frame que seja o "pai"do frame no qual o link se encontra
• _top - na mesma janela do documento que contém o link
Nota: _self e _top possuem o mesmo comportamento se a página que contém o link não estiver em um frame. Caso o link esteja em 
um frame e com o valor _top no atributo target, o link será aberto na janela na qual o frame se encontra. Se o valor for _self, o link 
será aberto no próprio frame.
Dentro de uma única página podemos ter diversos frames e, às vezes, queremos que um link de um determinado frame seja aberto 
em outro. Para realizarmos tal tarefa devemos inserir como o valor do atributo target o nome do frame no qual o link será aberto.
O comportamento padrão de um link é abrir o documento na mesma página ou frame caso o atributo target não seja utilizado.
10
Nota: As tags frame e iframe não são suportadas pelo HTML5.
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag a com o atributo target </title >
 </head >
 <body >
 <p><a href =" pagina1 . html " target =" _blank ">Abre em outra janela /aba </a></p>
 <p><a href =" pagina2 . html " target =" _self ">Abre na mesma janela </a></p>
 <p><a href =" pagina3 . html ">Abre na mesma janela </a></p>
 </body >
</html >
2.9.Âncoras
Além de criar links para outras páginas o HTML nos permite criar links para uma determinada seção dentro da própria página na 
qual o link se encontra ou dentro de outra página. Esse recurso chama-se ancoragem, pois as seções para as quais queremos criar um 
link devem possuir uma âncora. 
Para criarmos umaâncora devemos utilizar novamente a tag a, porém sem o atributo href. Dessa vez utilizaremos o atributo name 
para identificar a seção através de um nome.
O link também muda levemente, pois agora ao invés de passar somente o nome do arquivo da página como valor do atributo href 
devemos passar o nome da seção prefixada com o caractere #.
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag a como âncora </title >
 </head >
 <body >
 <p><a href ="# mais_info ">Veja mais informações </a></p>
 <p><a href =" pagina2 . html # outra_ancora ">Âncora em outra página </a></p>
 ...
 <a name =" mais_info ">Mais informações </a>
 <p>
 ...
 </p>
 </body >
</html >
Nota: Até a versão 4 do HTML e no XHTML a especificação dizia para utilizarmos o atributo name para criarmos as âncoras. Porém, 
no HTML5, a recomendação do W3C é que se utilize o atributo id.
2.10.Imagens
Em HTML, imagens são definidas com a tag img. A teg img é vazia, isso significa que ela possui apenas atributos enão tem tag de 
fechamento.
Para exibir uma imagem em uma página, você precisa usar o atributo src. Src significa source (fonte). O valor do atributo src é o 
URL da imagem que você deseja exibir 
A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar dentro de um documento HTML. 
O valor do atributo pode ser o caminho absoluto ou relativo de uma imagem.
<img src="url" alt="some_text"> 
O atributo alt especifica um texto alternativo caso a imagem não possa ser exibida.
Para especificar o tamanho da imagem são usados os atributos width e height.
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 
Dica: È uma boa prática especificar o tamanho da imagem. Se os atributos de tamanho são definidos o espaço nescessário para a 
imagem é reservado quando a página é carregada. Sem esses atributos o navegador não sabe o tamanho da imagem, desse modo o 
layout da página vai mudar durante o carregamento. 
2.11.Tabelas
Tabelas são definidas pela tag <table>.
11
Uma tabela é dividida em linhas(com a tag <tr>) , e cada linha é dividisa em células com dados(com a tag<td>).
A tag td pode conter texto, links, imagens, listas, formulários tabelas e outros.
 
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Bordas
Para exibir uma tabela com bordas, especifique o atributo border:
Se você não especificar um atributo de border, a tabela será exibida sem bordas. Às vezes isso pode ser útil, mas na maioria das 
vezes, queremos mostrar as bordas.
Cabeçalhos
Informações de cabeçalho em uma tabela são definidas com a tag <th>.
Todos os principais navegadores exibir o texto no elemento <th> como negrito e centralizado.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 
Tags
• tr - define uma linha da tabela
• th - define uma célula de cabeçalho
• td - define uma célula
Também é possível utilizar essas tags:
• thead - define o cabeçalho da tabela
• tfoot - define o rodapé da tabela
• tbody - define o corpo da tabela
Por que complicar? Qual o motivo da existência dessas tags?
• A tag thead, assim como a tfoot, servem para agrupar as linhas de cabeçalho e de rodapé, respectivamente.
• O código fica mais claro.
• Facilita a aplicação de estilos CSS (através do seletor de elemento)
• Pode permitir que o conteúdo do corpo da tabela possua rolagem*.
• Ao imprimir a página com uma tabela muito extensa, pode permitir que o cabeçalho e rodapé sejam replicados em todas as 
páginas.
Outros dois atributos importantes para a construção de tabelas são colspan e rowspan que podem ser aplicados nos elementos com 
a tag td e th : 
O atributo colspan faz com que a célula ignore o número de colunas definidas em seu valor. Analogamente, o atributo rowspan faz
o mesmo, porém com linhas.
2.12.Listas
Em um documento HTML podemos ter três tipos de listas e cada uma delas deve ser utilizada de acordo com a sua semântica, ou 
seja, você deve escolher um tipo de lista para cada situação.
12
Os três tipos possíveis de listas são:
• Lista de definição - utilizada para exibir definições de termos. Funciona como nos dicionários, no qual temos uma palavra e 
em seguida o seu significado.
Para criar uma lista de definição utiliza-se a tag dl. O elemento com a tag dl deve possuir pelo menos um filho com a tag dt 
seguido de um elemento com a tag dd, isto é, um item na lista de definição é composto por um par de elementos com as tags dt e dd.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
• Lista ordenada - utilizada para exibir qualquer conteúdo de forma ordenada.
Para criar uma lista ordenada utiliza-se a tag ol. O elemento com a tag ol deve possuir pelo menos um filho coma tag li.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol> 
• Lista sem ordem - utilizada para exibir qualquer conteúdo sem ordenação.
Para criar uma lista sem ordem utiliza-se a tag ul. O elemento com a tag ul deve possuir pelo menos umfilho com a tag li.
<ul>
<li>Coffee</li><li>Milk</li>
</ul> 
2.13. Blocos
Elementos HTML podem ser agrupados com <div> e <span>.
2.13.1.O elemento div
O elemento <div> HTML é um elemento de bloco de nível que pode ser utilizado como um recipiente para o agrupamento de 
outros elementos HTML.
 O elemento <div> não tem nenhum significado especial. Só que, porque é um elemento nível de bloco, o navegador irá mostrar 
uma quebra de linha antes e depois dele.
Quando usado junto com o CSS, o elemento <div> pode ser usado para definir atributos de estilo de grandes blocos de conteúdo.
Outro uso comum do elemento <div>, é para o layout do documento. Ele substitui a "velha forma" da definição de layout usando 
tables. O uso de tabelas não é o uso correto do elemento <table>. O propósito do elemento <table> é exibir dados tabulares.
2.13.2.O elemento span
O elemento HTML <span> é um elemento interno que pode ser usado como um recipiente para o texto.
O elemento <span> não tem nenhum significado especial.
Quando usado em conjunto com CSS, o elemento <span> pode ser usado para definir atributos de estilo para as partes do texto.
2.14.Layouts
Layout de página web é muito importante para fazer o seu site com bom aspecto.
Layouts de site
A maioria dos sites têm colocado o seu conteúdo em várias colunas (formatado como uma revista ou jornal).
Várias colunas são criadas usando os elementos <div> ou <table> . CSS é usados para posicionar elementos, ou para criar fundos 
ou visual colorido para as páginas.Mesmo que seja possível a criação de layouts agradáveis com tabelas HTML, as tabelas foram 
projetados para apresentar dados tabulares - não como uma ferramenta de layout!
Layouts de HTML - Usando Elementos <div>
O elemento div é um elemento nível de bloco usado para agrupar elementos HTML.
O exemplo a seguir utiliza cinco elementos div para criar uma disposição de várias colunas:
13
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html> 
Dicas úteis
Dica: A maior vantagem de usar o CSS é que, se você colocar o código CSS em uma folha de estilo externa, seu site se torna muito 
mais fácil de manter. Você pode alterar o layout de todas as suas páginas, editando um arquivo. Para saber mais sobre CSS, estude o 
nosso tutorial CSS.
Dica: Como layouts avançados levam tempo para serem criados, uma opção mais rápida é usar um template. Pesquise do Google por 
website templates grátis (estes são layouts pré-construídos de site que você pode usar e personalizar).
2.15.Formulários
Formulários HTML são usados para selecionar diferentes tipos de entrada de dados do usuário.
Formulários HTML são usados para transmitir dados para um servidor. Um formulário HTML pode conter elementos de entrada. 
A tag <form> é usada para criar um formulário HTML:
<form>
.
input elements
.
</form> 
2.15.1.A tag input
O elemento <input> é usado para selecionar as informações do usuário.
A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seu atributo type. O atributo type pode 
receber os seguintes valores:
• button - cria um botão. Através do atributo value definimos o texto do botão.
 <p>
 button :
 <input type =" button " value =" Botão " />
 </p> 
• checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível 
que se crie um grupo de checkboxes no qual um ou mais checkboxes seja "checado".
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
14
</form> 
• color - Define um seletor de cores
Select your favorite color: <input type="color" name="favcolor"> 
• date - Define um controle de data (ano, mês e dia (sem tempo))
Birthday: <input type="date" name="bday"> 
• datetime - Define um controle de data e hora (ano, mês, dia, hora, minuto, segundo, e fração de segundo, com base no UTC 
fuso horário)
Birthday (date and time): <input type="datetime" name="bdaytime"> 
• datetime-local - Define um controle de data e hora (ano, mês, dia, hora, minuto, segundo, e fração de segundo (sem fuso 
horário)
Birthday (date and time): <input type="datetime-local" name="bdaytime"> 
• email - Define um campo para um endereço de e-mail
E-mail: <input type="email" name="usremail"> 
• file - cria um botão que, ao ser clicado, abre uma caixa de diálogo para a escolha de um arquivo no computador do usuário.
 <p>
 file :
 <input type =" file " />
 </p> 
• hidden - cria um elemento que não fica visível para o usuário, porém pode conter um valor que será enviado pelo formulário.
 <p>
 hidden :
 <input type =" hidden " value =" valor escondido " />
 </p> 
• image - cria um botão para o envio do formulário. Dese ser utilizado em conjunto com o atributo src para que uma imagem 
de fundo seja utilizada no botão.
 <p>
 image :
 <input type =" image " src ="/img/logo.png " />
 </p> 
• month - Define um controle de mês e ano (sem fuso horário)
Birthday (month and year): <input type="month" name="bdaymonth"> 
• number - Define um campo para digitar um número 
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> 
• password - cria uma caixa de texto de uma linha escondendo os caracteres digitados.
<form>
Password: <input type="password" name="pwd">
</form> 
• radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível que se
crie um grupo de radios no qual apenas um radio seja "checado".
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 
• range - Define um controle para a entrada de um número cujo valor exato não é importante (como um controle deslizante)
15
<input type="range" name="points" min="1" max="10"> 
• reset - cria um botão que descarta todas as alterações feitas dentro de um formulário. Através do atributo value definimos o 
texto do botão.
<p>
 reset :
 <input type =" reset " value =" Descartar alterações " />
 </p> 
• search - Define um campo texto para inserir uma string de pesquisa
Search Google: <input type="search" name="googlesearch"> 
• submit - cria um botão para o envio do formulário. Através do atributo value definimos o texto do botão.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 
• tel - Define um campo para digitar um número de telefone
Telephone: <input type="tel" name="usrtel"> 
• text - cria uma caixa de texto de uma linha.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 
• time - Define um controle de entrada de tempo (sem fuso horário)
Select a time: <input type="time" name="usr_time"> 
• url - Define um campo para digitar uma URL
Add your homepage: <input type="url" name="homepage"> 
• week - Define um controle de semana e ano (sem fuso horário)
Select a week: <input type="week" name="week_year"> 
Nota: Alguns valores do atributo input foram adicionados no HTML5 e nem todos os navegadores o suportam.
2.15.2.A tag select
A tag select permite ao usuário escolher um ou mais itens de uma lista. O atributo multiple, quando presente, informa ao 
navegador que mais de um item pode ser selecionado. A lista de itens deve ser informada através de elementos com a tag option. Tais 
elementos devem ser filhos diretos ou indiretos do elemento com a tag select. Além disso, cada item pode conter o atributovalue para 
informar o valor associado a uma determinada opção.
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag select </title >
 </head >
 <body >
 <form action =" pagina . html " method =" get ">
 <p>
 Selecione uma cidade :
 <select >
 <option value ="sao - paulo ">São Paulo </option >
 <option value ="rio -de - janeiro ">Rio de Janeiro </option >
 <option value ="porto - alegre ">Porto Alegre </option >
 <option value =" curitiba ">Curitiba </option >
 </select >
16
 </p>
 <p>
 Selecione uma ou mais categorias de produtos ( mantenha a tecla
 " control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ):
 <select multiple =" multiple ">
 <option value =" desktops ">Desktops </option >
 <option value =" notebooks ">Notebooks </option >
 <option value =" tablets ">Tablets </option >
 <option value =" celulares ">Celulares </option >
 </select >
 </p>
 </form >
 </body >
</html >
Caso exista a necessidade de agrupar as opções de um elemento com a tag select, podemos utilizar utilizar a tag optgroup em 
conjunto com o atributo label. Veja o exemplo:
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag select </title >
 </head >
 <body >
 <form action =" pagina . html " method =" get ">
 <p>
 Selecione uma cidade :
 <select >
 <optgroup label =" Região Sudeste ">
 <option value ="sao - paulo ">São Paulo </option >
 <option value ="rio -de - janeiro ">Rio de Janeiro </option >
 </optgroup >
 <optgroup label =" Região Sul ">
 <option value ="porto - alegre ">Porto Alegre </option >
 <option value =" curitiba ">Curitiba </option >
 </optgroup >
 </select >
 </p>
 <p>
 Selecione uma ou mais categorias de produtos ( mantenha a tecla
 " control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ):
 <select multiple =" multiple "> 
 <optgroup label ="De mesa ">
 <option value =" desktops ">Desktops </option >
 </optgroup >
 <optgroup label =" Portáteis ">
 <option value =" notebooks ">Notebooks </option >
 <option value =" tablets ">Tablets </option >
 <option value =" celulares ">Celulares </option >
 </optgroup >
 </select >
 </p>
 </form >
 </body >
</html >
2.15.3.A tag datalist
O elemento <datalist> especifica uma lista de opções pré-definidas para um elemento <input>.
O elemento <datalist> é usado para fornecer um recurso "autocompletar" em elementos <input>. Os usuários verão uma lista 
suspensa de opções pré-definidas como entrada de dados.
17
Use o atributo do elemento <input> da lista para vinculá-lo em conjunto com um elemento <datalist>.
<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist> 
2.15.4.A tag keygen
A finalidade do elemento <keygen> é o de proporcionar uma forma segura de autenticar os utilizadores.
A tag <keygen> especifica um campo gerador de par de chaves em um formulário.
Quando o formulário é enviado, duas chaves são gerados, uma público e uma privada .
A chave privada é armazenada localmente, e a chave pública é enviada para o servidor. A chave pública pode ser usada para gerar 
um certificado de cliente para autenticar o utilizador no futuro.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form> 
2.15.5.A tag output
O elemento <output> representa o resultado de um cálculo (como um realizado por um script).
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form> 
2.15.6.A tag textarea
A tag textarea exibe uma caixa de texto na qual o usuário poderá inserir um texto qualquer. A diferença para a tag input com o 
atributo type com o valor text é que a tag textarea permite a inserção de textos mais longos e com quebras de linha.
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag textarea </title >
 </head >
 <body >
 <form action =" pagina . html " method =" get ">
 <p>
 textarea :
 <textarea >
</textarea >
 </p>
 </form >
 </body >
 </html >
2.15.7.A tag label
Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulário apresentados. Podemos pensar 
nesses textos como rótulos de cada elemento e é exatamente para esse fim que devemos utilizar a tag label do HTML.
Além de servir como rótulo, a tag label auxilia o usuário a interagir comos elementos do formulário. Utilizando o atributo for 
18
podemos fazer com que um elemento do formulário receba o foco.
Veja o exemplo:
<html >
 <head >
 <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
 <title >Exemplo de uso da tag label </title >
 </head >
 <body >
 <form action =" pagina . html " method =" get ">
 <p>
 <label for =" nome ">Nome :</label >
 <input type =" text " id=" nome " />
 </p>
 </form >
 </body >
</html >
Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que desejamos focar.
2.15.8.A tag form
A tag form irá definir, de fato, o nosso formulário. Todos os elementos de formulário que vimos anteriormente devem ser filhos 
diretos ou indiretos de um elemento com a tag form para que os dados vinculados a esses elementos sejam enviados.
O atributo action é define para onde os dados de um formulário deve ser enviado. Além disso, devemos informar a maneira como 
queremos que esses dados sejam enviados, ou seja, se queremos que eles sejam enviados através de uma requisição do tipo GET ou 
POST (métodos de envio definidos no protocolo HTTP). 
2.15.9.Métodos GET e POST
O Hypertext Transfer Protocol (HTTP) foi projetado para realizar comunicação entre o cliente e o servidor.
HTTP funciona como um protocolo de solicitação-resposta entre um cliente e servidor.
Um navegador da Web pode ser o cliente, e um aplicativo em um computador que hospeda um site pode ser o servidor.
Os métodos GET e POST
Os dois métodos usados para solicitação-resposta entre o cliente e o servidor são: GET e POST
• GET - Requisita dados de um recurso especificado
• POST - Envia dados para serem processados para um recurso especificado
O método GET 
Observe que a string de consulta é enviada na URL de um pedido GET.
/test/demo_form.asp?name1=value1&name2=value2 
Algumas notas sobre requisições GET:
• requisições GET podem ser armazenadas em cache
• requisições GET permandecem no histórico de navegação
• requisições GET podem ser favoritadas
• requisições GET nunca devem ser usadas para lidar com dados sensíveis 
• requisições GET podem ter restrições de comprimento
• requisições GET devem ser usados apenas para recuperar dados
O método POST
Observe que a string de consulta é enviado no corpo da mensagem HTTP de um pedido POST. 
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2 
 
Algumas notas sobre o requisições POST:
• requisições POST ninca são armazenadas em cache
• requisições POST não podem ser favoritadas
• requisições POSTnão tem restrições quanto ao comprimento dos dados
19
Comparação GET vs. POST
GET POST
botão voltar/recarregar inofensivo Os dados serão re-submetidos (o browser 
deve alertar o usuário de que os dados 
estão prestes a ser re-submetidos)
Favoritar SIM NÃO
Armazenar em cache SIM NÃO
Tipos de codificação aplicação/x-www-form-urlcodificado aplicação/x-www-form-urlcodificado ou 
multipart/form-data . Use a codificação 
multipart para dados binarios.
Histórico Parâmetros permanecem no histórico do 
navegador
Os parâmetros não são salvos no histórico 
do navegador
Restrição de tamanho de dados Sim, ao enviar dados, o métodoGET 
adiciona os dados à URL, e o comprimento
de um URL é limitado (comprimento 
máximo de URL é de 2048 caracteres)
Sem restrição
Restrição de tipos de dados Somente caracteres ASCII Sem restrições. Os dados binários também 
são permitido
Segurança GET é menos seguro em relação ao post, 
porque os dados enviados são parte da 
URL
Nunca use GET quando enviar senhas ou 
outras informações confidenciais!
O POST é um pouco mais seguro do que 
GET, porque os parâmetros não são 
armazenadas no histórico do navegador ou 
em logs de servidores web
Visibilidade Dados ficam visíveis para todos na URL Os dados não são exibidos na URL
Outros métodos HTML
A tabela a seguir lista alguns outros métodos de solicitação HTTP:
HEAD - Mesmo que GET, mas retorna apenas cabeçalhos HTTP e nenhum corpo do documento
PUT - Envia uma representação da URI especificada
DELETE - Exclui o recurso especificado
OPTIONS - Retorna os métodos HTTP que o servidor suporta
CONNECT - Converte uma solicitação de conexão em uma traspatente TCP/IP tunnel.
2.16.O elemento iframe
Um iframe é usado para exibir uma página web dentro de uma página web.
Sintaxe para adicionar um iframe:
<iframe src="URL"></iframe> 
O URL aponta para a localização da página separada.
Os atributos de altura e largura são usadas para especificar a altura ea largura do iframe. Os valores de atributo são especificadas 
em pixels por padrão, mas podem também ser em percentagem (como "80%").
<iframe src="demo_iframe.htm" width="200" height="200"></iframe> 
Removendo a borda
O atributo frameborder especifica se deve ou não exibir uma borda em torno do iframe.
Definir o valor do atributo como "0" remove a borda:
<iframe src="demo_iframe.htm" frameborder="0"></iframe> 
Usar iframe como destino para um link
O atributo de destino de um link deve se referir ao atributo nome do iframe:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> 
20
2.17. Entidades
Caracteres reservados em HTML deve ser substituído por entidades de caracteres.
Alguns caracteres são reservados em HTML.
Não é possível usar sinais de menor que (<) ou maior que (>) em seu texto, porque o navegador irá misturá-los com etiquetas.
Para realmente exibir caracteres reservados, devemos usar entidades de caracteres no código-fonte HTML.
Uma entidade de caráter parece com isto:
&entity_name;
OR
&#entity_number; 
Para exibir um sinal de menor que devemos escrever: &lt; ou &#60;
Espaço sem quebra
Uma entidade de caráter comum utilizada em HTML é o espaço sem quebra ().
Navegadores sempre truncam espaços em páginas HTML. Se você escrever 10 espaços no seu texto, o navegador irá remover 9 
deles, antes de exibir a página. Para adicionar espaços ao seu texto, você pode usar a entidade caráter &nbsp;.
2.18.Codificação da URL
Uma URL pode ser composta por palavras ou um endereço IP (Internet Protocol). Navegadores acessam páginas Web de servidores 
web usando uma URL. 
Um endereço web é formado pela seguinte sintaxe:
scheme://host.domain:port/path/filename 
Sendo:
• scheme - define o protocolo. O mais usado é o http.
• host - define o dominio do host (o padrão para http é o www).
• domain - define o nome do dominio
• :port - define o número da porta no host (o padrão para http é 80)
• path - define um caminho no servidor (se omitido, o documento estar armazenado no diretório raiz )
• filename - define o nome de um documento /recurso
Protocolos comuns
Protocolo Abreviação de...
http HyperText Transfer Protocol Páginas web comuns começam com http://.
Não criptografado
https Secure HyperText Transfer Protocol Páginas Web protegidas. Todas as 
informações trocadas são criptografadas.
ftp File Transfer Protocol Para fazer o download ou upload de 
arquivos para um site. Útil para a 
manutenção de domínio
file Um arquivo em seu computador
Codificação de URL
URLs só pode ser enviada pela Internet, utilizando o conjunto de caracteres ASCII.
Uma vez que muitas vezes URLs conter caracteres fora do conjunto ASCII, a URL tem que ser convertida para um formato ASCII
válido.
Codificação de URL converte caracteres em um formato que pode ser transmitido através da Internet.
Codificação de URL não substitui caracteres ASCII com um "%" seguido de dois dígitos hexadecimais.
2.19.O elemento canvas
O elemento canvas é um novo elemento introduzido no HTML 5.
O elemento <canvas> é usado para desenhar gráficos, em tempo real, em uma página web.
O elemento <canvas> HTML5 é usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript).
O elemento <canvas> é apenas um recipiente para gráficos. Você deve usar um script para realmente desenhar os gráficos.
Criando um canvas
21
A tela é uma área retangular em uma página HTML, e é especificado com o elemento <canvas>.
Nota: Por padrão, o elemento <canvas> não tem fronteira e nenhum conteúdo.
A marcação é assim:
<canvas id="myCanvas" width="200" height="100"></canvas> 
Nota: Sempre especifique um atributo id (para ser referenciado pelo script) e os atributos height e width para definir o tamanho.
Para adicionar bordas, use o atributo style:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> 
 
Desenhar sobre a tela com JavaScript
Todo o desenho sobre a tela deve ser feito dentro de um JavaScript:
Exemplo:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script> 
2.20.SVG 
HTML 5 tem suporte para SVG embutido.
O que é SVG?
• SVG significa Scalable Vector Graphics
• SVG é usado para definir gráficos vetoriais para a web
• SVG define os gráficos em formato XML
• Gráficos SVG não perder nenhuma qualidade se forem ampliada ou redimensionada
• Cada elemento e cada atributo em arquivos SVG pode ser animado
• SVG é uma recomendação da W3C
Vantagens do SVG
Vantagens da utilização de SVG sobre outros formatos de imagem (como JPEG e GIF) são:
• Imagens SVG podem ser criados e editados com qualquer editor de texto
• Imagens SVG podem ser pesquisados, indexados, roteirizados e comprimidos
• Imagens SVG são escaláveis
• Imagens SVG podem ser impressas com alta qualidade em qualquer resolução
• Imagens SVG são zoomable (a imagem pode ser ampliada sem degradação)
Incorporar SVG diretamente em páginas HTML
Em HTML 5 você pode incorporar SVG diretamente na página HTML através do elemento SVG.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html> 
Diferenças entre SVG e Canvas
SVG é uma linguagem para descrever gráficos 2D em XML.
Canvas desenha gráficos 2D, em tempo real (com JavaScript).
SVG é baseado em XML, o que significa que cada elemento está disponível no DOM SVG. Você pode anexar manipuladores de 
22
eventos JavaScript para um elemento.
Em SVG, cada forma desenhada é lembrada como um objeto. Se os atributos de um objeto SVG são alteradas, o navegador pode 
automaticamente renderizar novamente a forma.
Canvas é renderizada pixel por pixel. Na tela, uma vez que o gráfico é desenhado, é esquecido pelo navegador. Se a sua posição 
deve ser mudado, todo o cenário precisa ser redesenhado, incluindo quaisquer objetos que possam ter sido cobertos pelo gráfica.
2.21.O elemento Video
Muitos sites modernos mostram vídeos. HTML5 fornece um padrão para mostrar-los.
Video na Web
Até agora, não houve um padrão para mostrar um vídeo /filme em uma página web.
Hoje, a maioria dos vídeos são mostrados através de um plug-in (como flash). No entanto, os navegadores diferentes podem ter 
diferentes plug-ins.
HTML5 define um novo elemento que especifica uma forma padrão de inserir um vídeo /filme em uma página web: o elemento 
<video>.
Como funciona
 Para mostrar um vídeo com HTML 5 use:
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 
O atributo de controle adiciona controles de vídeo, como play, pause e volume.
Também é uma boa idéia sempre incluem largura e atributos de altura. Se a altura e largura são definidos, o espaço necessário para
o vídeo é reservado quando a página é carregada. No entanto, sem esses atributos, o navegador não sabe o tamanho do vídeo, e não 
pode reservar o espaço apropriado para isso. O efeito será que o layout da página vai mudar durante o carregamento (enquanto o vídeo
é carregado).
Você também deve inserir o conteúdo de texto entre a tag <video> e </vídeo> para navegadores que não suportam o elemento 
<video>.
O elemento <video> permite multiplos elementos <source>. elementos <source> podem se vincular a arquivos de vídeo 
diferentes. O browser usará o formato reconhecido inicialmente.
Tipos MIME para formatos de video 
Formato tipo MIME
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Métodos e propriedades DOM
HTML5 tem métodos DOM, propriedades e eventos para os elementos <video> e <audio>.
Estes métodos, propriedades e eventos permitem que você manipule elementos <video> e <audio> usando JavaScript.
Existem métodos para reproduzir, pausa, e carregar, por exemplo, e existem propriedades (como duração e volume). Há também 
eventos DOM que pode notificá-lo quando o elemento <video> começa a executar, pausar , terminar, etc
2.22.O elemento Audio 
Até agora, não houve um padrão para a reprodução de arquivos de áudio em uma página web.
Hoje, a maioria dos arquivos de áudio são reproduzidos através de um plug-in (como flash). No entanto, os navegadores diferentes
podem ter diferentes plug-ins.
HTML5 define um novo elemento que especifica uma forma padrão para incorporar um arquivo de áudio em uma página web: o 
elemento <audio>.
Como funciona
Para usar o elemento audio de HTML5 use:
<audio controls>
 <source src="horse.ogg" type="audio/ogg">
 <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
23
</audio> 
O atributo de controle adiciona controles de áudio, como play, pause e volume.
Você também deve inserir um de texto entre a tag <audio> e </audio> para navegadores que não suportam o elemento <audio>.
O elemento <audio> permite multiplos elementos <source>. elementos <source> pode se vincular a diferentes arquivos de áudio. 
O navegador usará o formato reconhecido inicialmente.
Tipos MIME para formatos de audio 
Formato tipo MIME
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg
3. Modelos de conteúdo
Há pequenas regras básicas no HTML que definem o comportamento,a localização e a hieraquia dos elementos. Dentre todas as 
categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong, em, img, input, abbr, span.
Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.
Algumas premissas dos elementos são:
• Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o
elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de bloco.
• Elementos de bloco sempre podem conter elementos de linha.
• Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um 
parágrafo não pode conter um DIV. Mas o contrário é possível.
Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de conteúdo o elemento 
trabalha e como pode ser seu comportamento.
3.1.Categorias
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content
24
Metadata content
Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteúdo com outros documentos que 
distribuem informação por outros meios.
Os elementos que compõe a categoria Metadata são:
base 
Definição e Uso: 
A tag <base> especifica a URL ou destino base para todas as URLs correspondentes em um documento.
Pode haver no máximo um elemento <base> em um documento e ele deve estar dentro do elemento <head>.
Dicas e notas:
Dica: Coloque a tag <base> como o primeiro elemento dentro do elemento <head>, de modo que outros elementos da secção de head 
usem as informações do elemento <base>.
Nota: Se o tag <base> está presente, ele deve ter o atributo de um href ou um atributo de destino, ou ambos.
Diferenças entre HTML e XHTML:
Em HTML a tag <base> não tem tag final.
Em XHTML a tag <base> deve ser devidamente fechado.
Atributos:
Atributo Valor Descrição
href URL Especifica a URL base para todas as URLs correspondentes na página.
target _blank
_parent
_self
_top
framename
Especifica o destino padrão para todos os hyperlinks e forms na página.
Atributos globais e Eventos:
A tag <base> também suporta os atributos globais do HTML. Mas não suporta nenhum atributo de evento.
Exemplo:
Especifica uma URL padrão e um destino padrão para todos os links em uma página.
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3schools.com">W3Schools</a>
</body>
command 
Definição e uso:
A tag <command> define um comando (um radiobutton, um checkbox ou um botão de comando) que o usuário pode invocar.
Um comando pode ser parte de um menu de contexto ou barra de ferramentas, usando o elemento <menu>, ou pode ser colocada em 
qualquer outro lugar na página, para definir um atalho de teclado.
Atributos:
Atributo Valor Descrição
checked checked Especifica que o comando deve ser verificada quando a página é carregada. Apenas para 
type = "radio" ou type = "checkbox"
disabled disabled Especifica que o comando deve ser desativado
25
icon URL Especifica uma imagem que representa o comando
label text Obrigatório. Especifica o nome do comando, que sera mostrado para o usuário
radiogroup groupname Especifica o nome do grupo de comandos que vai ser alternados quando o próprio 
comando é alternado. Apenas para type = "radio"
type checkbox
command
radio
Especifica o tipo de comando
Atributos Globais:
A tag <command> também suporta os atributos globais. E suporta os atributos de evento.
Dicas e Notas:
Nota: a tag <command> somente é compativel com o IE.
Exemplo:
Um elemento <command> pode ser marcado assim:
<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>
link 
Definição e uso:
A tag <link> define a relação entre um documento e um recurso externo.
A tag <link> é o mais utilizado para vincular a folhas de estilo.
Nota: O elemento <link> é um elemento vazio, somente contém atributos.
Nota: Este elemento vai somente na seção head, mas pode aparecer varias vezes.
Diferenças entre HTML e XHTML
No HTML a tag <link> não tem tag final.
No XHTML a tag <link> deve ser devidamente fechado.
Atributos:
Atributo Valor Descrição
href URL Especifica o local do documento linkado
hreflang language_code Especifica o idioma do texto no documento linkado
media media_query Especidica em que dispositivo o documento linkado será exibido
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
Obrigatório. Especifica a relação entre o documento atual e o documento linkado.
sizes HeightxWidth Especifica o tamanho do recurso linkado. Apenas para rel = "ícon"
26
any
type MIME_type Especifica o tipo de MIME do documento linkado. 
Atributos globais e eventos
A tag <link> suporta os atributos globais e também suporta os atributos de evento.
Exemplo:
Link para uma folha de estilo externa:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
meta 
Definição e uso:
Metadados sãodados (informações) sobre os dados.
O <meta> fornece metadados sobre o documento HTML. Metadados não será exibido na página, mas serão analisáveis pela máquina.
Elementos meta são normalmente usados para especificar descrição da página, palavras-chave, autor do documento, modificada pela 
última vez, e outros metadados.
Os metadados podem ser utilizados pelos navegadores (como exibir conteúdo ou página de recarga), motores de busca (palavras-
chave), ou outros serviços da web.
Dicas e notas:
Nota: tags <meta> sempre vai dentro do elemento <head>.
Nota: Os metadados é sempre passado em pares nome /valor.
Nota: O atributo de conteúdo deve ser definido se o nome ou o atributo http-equivalente está definido. Se nenhum desses forem 
definidos, o atributo de conteúdo não pode ser definido.
Diferença entre HTML e XHTML
No HTML a tag <meta> não tem tag final.
No XHTML a tag <meta> precisa ser devidamente fechada.
Atributos:
Atributos Valores Descrição
charset character_set Especifica o encoding para o documento HTML
content text Indica o valor associado ao http-equivalente ou atributo nome
http-equiv content-type
default-style
refresh
Fornece um cabeçalho HTTP para a informação /valor do atributo content
name application-name
author
description
generator
keywords
Especifica um nome para os metadados
Atributos Globais:
A tag <meta> suporta os atributos globais.
Exemplo:
Descreve metadados dentro do documento HTML.
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
</head>
Exemplo 1 - Definir palavras-chave para os motores de busca:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
 
27
Exemplo 2 - Definir uma descrição da página web:
<meta name="description" content="Free Web tutorials on HTML and CSS">
 
Exemplo 3 - Definir o autor de uma página:
<meta name="author" content="Hege Refsnes">
 
Exemplo 4 - Atualiza documento a cada 30 segundos:
<meta http-equiv="refresh" content="30">
 
noscript 
Definição e uso:
A tag <noscript> é usada para fornecer um conteúdo alternativo a usuários que tenham desativados scripts em seu navegador ou 
navegador que não suporta script do lado cliente.
O elemento <noscript> pode conter todos os elementos que você pode encontrar dentro do elemento <body> de uma página HTML 
normal.
O conteúdo dentro do elemento <noscript> só será exibido se os scripts não são suportados, ou estão desativados no navegador do 
usuário.
Dicas e Notas:
Dica: É uma boa usar comentários para esconder scripts de browsers sem suporte para scripts do lado client (para que eles não mostrá-
los como texto simples):
<script>
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script> 
Atributos Globais:
A tag <noscript> suporta atributos globais.
Exemplo:
Uso da tag <noscript>:
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
script 
Definição e Uso:
A marca <script> é usado para definir um script do lado do cliente, como um JavaScript.
O elemento <script> ou contém declarações de scripts, ou ele aponta para um arquivo de script externo através do atributo src.
Os usos comuns para JavaScript são de manipulação de imagem, validação de formulário, e as mudanças dinâmicas do conteúdo.
Dicas e notas:
Nota: Se o atributo "src" está presente, o elemento <script> deve estar vazio.
Dica: Também olhar para o elemento <noscript> para usuários que desabilitaram os scripts em seu browser, ou ter um navegador que 
não suporta scripting do lado cliente.
Nota: Existem várias maneiras de um script externo podem ser executadas:
Se async = "async": O script é executado de forma assíncrona com o resto da página (o script será executado enquanto a página 
continua a análise)
Se async não está presente e adiar = "adiar": O script é executado quando a página terminou de análise
Se nem async ou adiar está presente: O script é buscada e executada imediatamente, antes de o navegador continua analisando a 
página
28
Diferenças entre HTML e XHTML
Em XHTML, o conteúdo dentro de scripts é declarado como # PCDATA (em vez de CDATA), o que significa que as entidades serão 
analisadas.
Isto significa que em XHTML, todos os caracteres especiais devem ser codificados, ou todo o conteúdo deve ser acondicionada dentro
de uma seção CDATA:
<script type="text/javascript">
//<![CDATA[
var i=10;
if (i<5)
 {
 //some code
 }
//]]>
</script>
Atributos:
Atributo Valor Descrição
async async Especifica que o script é executado de forma assíncrona (somente para scripts externos)
charset charset Especifica o encoding usado em um arquivo de script externo
defer defer Especifica que o script é executado quando a página terminou a análise (apenas para scripts 
externos)
src URL Especifica a URL de um arquivo de script externo
type MIME-type Especifica o tipo MIME do script
Atributos Globais
A tag <script> suporta os atributos globais
Exemplo:
Imprime "Hello world" em JavaScript
<script>
document.write("Hello World!")
</script>
style 
Descrição e uso:
A tag <style> é usado para definir informações de estilo para um documento HTML.
Dentro do elemento <style> você especificar como elementos HTML devem processar em um navegador.
Cada documento HTML pode conter vários tags <style>.
Dicas e notas:
Dica: Para ligar a uma folha de estilo externa, use a tag <link>.
Nota: Se o atributo "scoped" não é usado, cada marca <style> deve ser localizado na seção de head.
Atributos:
Atributos Valores Descrição
media media_query Especifica para qual midia/dispositivo o recurso de media é otimizado.
scoped scoped Especifica que o estilo apenas se aplicam aos elementos pais e seus elementos filhos.
type text/css Especifica o tipo MIME da folha de estilo.
Atributos globais e eventos:
Esta tag suporta os atributos globais e os atributos de eventos.
Exemplo:
O uso do elemento <style> em um documento HTML:
<html>
<head>
<style type="text/css">
h1 {color:red;}
29
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
title 
Definição e uso:
A tag <title> é necessária em todos os documentos HTML e define o título do documento.
O elemento <title>:
-define um título na barra de ferramentas do navegador
-fornece um título para a página que é adicionado aos favoritos
-exibe um título para a página no motor de pesquisa resultados
Tipos e notas:
Nota: Você não pode ter mais de um elemento <title> em um documento HTML.
Dica: Se você omitir a tag <title>, o documento não será valido como HTML.
Atributos globais:
A tag <title> suporta os atributos globais. 
Exemplo:
Define um título para seu documento HTML.
<html>
<head>
<title>HTML Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
Flow content
Por via de regra, elementos que seu modelo de conteúdo permitem inserir qualquer elemento que se encaixa no Flow Content, devem 
ter pelo menos um descendente de texto ou um elemento descendente que faça parte da categoria embedded.
A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content.
 São eles:
a
Definição e uso:
A marca <a> define um hiperlink, que é usado para ligar uma página a outra.
O atributo mais importante do elemento <a> é o atributo href, que indica o destino do link.
Por padrão, os links vão aparecer da seguinte forma em todos os navegadores:
Um link não visitado é sublinhado e azul
Um link visitado é sublinhado e roxo
Um link ativo é sublinhado e vermelho
30
Dicas e notas:
Dica: Os atributos: hreflang, media, rel, target, e os atributos de tipo não podem estar presentes se o atributo href não está presente.
Dica: Uma página linkada normalmente é exibida na janela do navegador atual, a menos que você especifique outro modo no atributo
target.
Dica: Use CSS para mudar o estilo de links.
Atributos Valor Descrição
href URL Especifica a URL da página destino do link.