08/01/2017

IntroduoaoHTMLHTML|MDN

Introduo ao HTML

Antes de comear
Para compreender este artigo, recomendado que voc tenha familiaridade com o uso de um navegador.
Alm disso, voc tambm precisa estar familiarizado com a manipulao (criao e edio) de arquivos de texto, assim
voc poder testar os exemplos mostrados neste artigo.

Ao se deparar com uma pgina da Web no navegador, o que voc v, na perspectiva mais simples possvel,
so apenas palavras. raro encontrar uma pgina da Web que contenha apenastexto puro. Mais do que
meramente palavras, o que voc v e l contm caractersticas deestilo. Os projetistas de modernas pginas
da Web possuem acesso a centenas de fontes diferentes, diversos tamanhos de fonte, muitas cores e mesmo
vrios alfabetos (e.g. espanhol, japons, russo). Os navegadores modernos podem exibir a maioria deles de
maneira precisa. Pginas da Web podem conter imagens, videoclipes e msicas de fundo. Podem incluir
menus do tipo drop-down, caixas de busca, linques clicveis para produtos ou outras pginas no mesmo stio,
ou linques para pginas de outros stios. Alguns stios da Web fornecem mesmo opes para a
personalizao da exibio da pgina de modo a acomodar preferncias pessoais ou decincias como
limitao visual, surdez ou daltonismo. Uma pgina contm frequentemente caixas de contedo que se
movem (rolam) enquanto o restante da pgina mantm-se imvel.
Uma gama de tecnologias (comoCSS,JavaScript,Flash,AJAX,JSON) pode ser usada para denir os elementos
de uma pgina da Web. Contudo, na base da estrutura de uma pgina da Web est aHTML(HyperText
Markup Languageou, em portugus,Linguagem de Marcao de HiperTexto). Sem HTML no haveria
pgina da Web alguma. HTML o que o navegador "l" para apresentar a pgina ao usurio em frente ao
computador. As especicaes e padres da HTML so geridas pelo World Wide Web Consortium(W3C) e
pelo Web Hypertext Application Technology Working Group(WHATWG). O WHATWG considera a HTML um
"padro vivo", em constante evoluo, ao passo que o W3C trabalha tanto com o padro estabelecido quanto
com a sua evoluo. A verso mais atual do padro HTML oHTML5e a sua evoluo o HTML 5.1.
O criador de uma pgina da Web pode usar CSS para denir a aparncia e o leiaute dos elementos
constituintes da pgina (blocos de texto, imagens etc.). Atualmente, as melhores prticas de desenvolvimento
para a Web encorajam o uso das CSS, em vez do uso da HTML, para denir a apresentao.
Este artigo fornece uma introduo HTML. Se voc j se perguntou o que acontece nos bastidores do seu
navegador ao explorar esse mar de pginas que a Web, este artigo um bom ponto de partida para
aprender.

Uma breve histria da HTML

No nal dos anos 80, Tim Berners-Leetrabalhavacomo fsico no CERN (a Organizao Europia de
Pesquisa Nuclear) e idealizava uma maneira atravs da qual cientistas pudessem compartilhar documentos
por meio da Internet. Antes de sua inveno, a comunicao pela Internet era limitada texto puro, usando
tecnologias como email, FTP (Protocolo de Transferncia de Arquivos) e fruns de discusso baseados na
https://developer.mozilla.org/ptBR/docs/HTML/Introduction

1/7

08/01/2017

IntroduoaoHTMLHTML|MDN

Usenet. A inveno da HTML baseava-se num modelo em que o contedo era armazenado em um servidor
central e podia ser transferido e visualizado em uma estao de trabalho local por meio de um navegador. Ela
simplicou o acesso a contedos e permitiu a disponibilizao de contedos "enriquecidos" (pela sosticao
da formatao tipogrca e possibilidade de exibio de imagens, por exemplo).

O que HTML?
HTML uma linguagem de marcao. A palavra marcaoera usada por editores que marcavammanuscritos
(geralmente com uma caneta azul) para fornecer instrues para revises.O termo mantm-se em uso,
contudo, com um signicado um pouquinho diferente. Uma linguagem de marcao, no sentido em que se
relaciona com os navegadores, uma linguagem com uma sintaxe especca que fornece instrues ao
navegador sobre como exibir uma pgina. A HTML distingue e separa o "contedo" (palavras, imagens, udio,
vdeo, e assim por diante) de sua "forma de apresentao" (as instrues sobre como determinado tipo de
contedo deve ser exibido). A HTML usa um conjunto pr-denido de elementos para identicar os diversos
tipos de contedo. Os elementos, por sua vez, contm uma ou mais tags que contm ou expressam um
determinado contedo. Tags so envoltas por parnteses angulares e a tag de fechamento (isto , que indica
o m do contedo) tem o nome antecedido por uma barra "/".

A maioria dos navegadores permite ao usurio visualizar o cdigo HTML de qualquer pgina. Se voc usa o Firefox, por
exemplo, clique com o boto direito sobre a pgina e, no menu que aparece, em 'Cdigo-fonte' para visualizar o cdigo HTML
da pgina. Iniciantes acharo o cdigo um tanto ilegvel se a pgina for complexa, mas se gastar algum tempo
observando o cdigo de uma pgina simples e comparando-o a pgina que a renderizao do cdigo, voc logo
desenvolver um entendimento claro de alguns dos requerimentos bsicos de sintaxe.

Por exemplo, o elemento pargrafo consiste das tags de inicializao "<p>" e de nalizao "</p>". O seguinte
exemplo mostra um pargrafo contido dentro do elemento pargrafo da HTML:

<p>EstoucomeandoaaprenderHTML.</p>

Quando este contedo for exibido pelo navegador, deve apresentar-se como algo assim:
Estou comeando a aprender HTML.
O navegador usa as tags como se fossem sinalizadores que indicam o modo como deve ser exibido o
contedo contido por elas.
Elementos que contm contedo podem geralmente tambm conter outros elementos. Por exemplo, o
elemento de nfase ("<em>") pode ser colocado dentro de um elemento de pargrafo, para adicionar nfase
a uma palavra ou frase:

<p>Estou<em>comeando</em>aaprenderHTML.</p>

Quando exibido, isso se apresentar como:

Estou comeando a aprender HTML.
https://developer.mozilla.org/ptBR/docs/HTML/Introduction

2/7

08/01/2017

IntroduoaoHTMLHTML|MDN

Alguns elementos no contm outros elementos. Por exemplo, a tag para imagem ("<img>") simplesmente
especica o nome do arquivo do contedo (uma imagem) como um atributo:

<imgsrc="smiley.jpg">

Frequentemente uma barra colocada antes de ">" para indicar o fechamento de um elemento vazio em
XHTML (um esquema XML que implementa elementos HTML). Por exemplo, em XHTML teramos:

<imgsrc="smiley.jpg"/>

O resto deste artigo avana com maiores detalhes sobre os conceitos introduzidos nesta seo. No entanto,
se voc quiser ver a HTML em ao, faa uso do Mozilla Thimble, um editor on-line interativo que auxilia
voc na aprendizagem da escrita de marcao HTML. D uma olhada tambm em Elementos HTML para uma
lista de todos os elementos disponveis e uma descrio do uso de cada um.

Elementos - os "tijolos" de uma pgina da Web

A HTML consiste de um conjunto de elementos. Um elemento dene o signicadosemntico do seu
contedo. Elementos incluem tudo entre duas tags de elementos que casam entre si, incluindo as prprias
tags. Por exemplo, o elemento "<p>" indica um pargrafo; o elemento "<img>" indica uma imagem. Veja a
pgina dos Elementos HTML para uma lista completa.
Alguns elementos possuem um signicado bastante preciso, como em "isto uma imagem", "isto um ttulo"
ou "isto uma lista ordenada". Outros so menos especcos, como em "isto uma seo da pgina" ou "isto
uma parte de texto". Outros ainda so usados por razes tcnicas, como em "isto informao de
identicao para a pgina que no deve ser exibida". De qualquer forma, de um jeito ou de outro, todos os
elementos HTML possuem um valor semntico.
A maioria dos elementos podem conter outros elementos, formando uma estrutura hierrquica. Uma pgina
da Web muito simples, mas completa, se parece com isso:

1
2

<html>
<body>

3
4

<p>EstoudandoosmeusprimeirospassosemHTML.</p>
</body>

</html>

Como voc pode ver, o elemento <html> cerca o resto do documento, e o elemento <body> cerca o contedo
da pgina. Essa estrutura frequentemente pensada como sendo uma rvore com ramos (neste caso, os
elementos <body> e <p>) crescendo a partir de um tronco (<html>). Esta estrutura hierrquica chamada de
DOM: o Modelo de Objeto de Documentos.

Tags
https://developer.mozilla.org/ptBR/docs/HTML/Introduction

3/7

08/01/2017

IntroduoaoHTMLHTML|MDN

Documentos HTML so escritos na forma de texto puro. Podem ser escritos em qualquer editor de texto que
permita salvar contedo como texto puro, tal como Notepad, Notepad++ ou Sublime Text, muito embora a
maioria dos produtores de HTML preram usar um editor especializado que destaque a sintaxe e mostre o
DOM. Nomes de tags podem ser escritos tanto em com letras maisculas como minsculas. Contudo, o
W3C (o consrcio global que mantm o padro HTML) recomenda o uso de letras minsculas (e o XHTML
exige que sejam sempre letras minsculas).
O HTML atribui signicado especial qualquer coisa que comece com o sinal de menor ("<") e termine com o
sinal de maior (">"). Tais marcaes so chamadas de tags. Certique-se de sempre fechar cada tag, j que
embora algumas sejam fechadas por padro, outras podem produzir erros inesperados se voc esquecer de
naliz-las.
Eis aqui um exemplo simples:

<p>Issotextodentrodeumpargrafo.</p>

Neste exemplo existe uma tag de incio e uma tag de m. Tags de m so iguais s tags de incio, mas tambm
contm uma barra logo aps o sinal de menor. A maioria dos elementos em HTML so escritos usando tanto
tags de incio como de m. Tags de incio e de m devem estar corretamente aninhadas, isto , tags de m
devem ser posicionadas na ordem contrria das tags de incio. O aninhamento apropriado uma regra que
deve ser obedecida para que se possa escrever cdigo vlido.
Este um exemplo de cdigo vlido:

<em>Eu<strong>realmente</strong>quisdizeraquilo</em>.

Este um exemplo de cdigo invlido:

<em>Eu<strong>realmente</em>quisdizeraquilo</strong>.

Observe que, no exemplo vlido, a tag de m para cada elemento aninhado sempre colocada antes da tag
de m do elemento no qual ele est aninhado.
Alguns elementos no contm qualquer texto ou qualquer outro elemento. Estes so os elementos vazios e
no precisam de tags de encerramento. Eis um exemplo:

<metacharset="utf8">

Muitas pessoas marcam elementos vazios usando uma barra no nal da tag (prtica obrigatria em XHTML).

<metacharset="utf8"/>

https://developer.mozilla.org/ptBR/docs/HTML/Introduction

4/7

08/01/2017

IntroduoaoHTMLHTML|MDN

Em HTML esta barra possui um signicado que no implementado no Firefox, de modo que no deve ser
usada. Elementos vazios no devem ser fechados na sintaxe da HTML propriamente dita.

Atributos
A tag de incio pode conter informaes adicionais, como no exemplo precedente. Tais informaes so
chamadas de atributos. Atributos normalmente consistem de duas partes:
Um nome de atributo;
Um valor de atributo.
Alguns poucos atributos podem ter apenas um valor. Eles so atributos booleanos e podem ser abreviados
especicando-se somente o seu nome ou deixando o seu valor em branco. Assim, os seguintes 3 exemplos
tm o mesmo signicado:

<inputrequired="required">

3
4

<inputrequired="">

<inputrequired>

Valores de atributos que consistem em uma nica palavra ou nmero podem ser escritos imediatamente
aps o sinal de igualdade (=), dispensando-se o uso de aspas, por outro lado, se o valor for constitudo por
duas ou mais palavras, o uso de aspas obrigatrio. Tanto aspas simples (') como aspas duplas (") so
permitidas. Muitos desenvolvedores optam sempre pelo uso de aspas, de forma a deixar o cdigo menos
ambguo e para evitar erros. No seguinte exemplo comete-se um erro:

<pclass=foobar>(Cuidado,issoprovavelmentenosignificaoquevocachaquesignifica.

Neste exemplo, o valor deveria ser "foo bar", mas como no se usou aspas no cdigo, interpretado como se
fsse:

<pclass="foo"bar="">

Referncias a caracteres com nome

Referncias a caracteres com nome(tambm chamados de entidades) so usadas para imprimir caracteres
que tem um signicado especial em HTML. Por exemplo, a HTML interpreta os sinais de menor e maior como
delimitadores de tags. Quando voc quiser exibir um sinal de maior num texto, voc pode usar uma
referncia ao nome do caractere. H quatro referncias comuns a caracteres que se deve conhecer:
&gt;denota o sinal de maior (>);
&lt; denota o sinal de menor (<);
https://developer.mozilla.org/ptBR/docs/HTML/Introduction

5/7

08/01/2017

IntroduoaoHTMLHTML|MDN

&amp; denota o sinal do comercial (&);

&quot; denota o sinal de aspas duplas(").
H muito mais entidades, mas estas quatro so as mais importantes, pois representam caracteres que
possuem um signicado especial em HTML.

Doctype e comentrios
Alm das tags, contedo de textos e entidades, um documento HTML deve conter uma declarao doctype
na primeira linha. A declarao doctype no uma tag HTML; uma instruo ao navegador sobre qual
verso de HTML est sendo usada para escrever a pgina.
No padro HTML 4.01, o doctype refere-se a uma DTD (Denio de Tipo de Contedo), j que este padro foi
baseado na SGML. Existem trs diferentes declaraes doctype em HTML 4.01.
HTML 4.01 Estrito
Esta DTD contm todos os elementos HTML e atributos, mas NO INCLUI elementos de apresentao ou
elementos obsoletos (como font). Conjunto de frames no so permitidos.

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 de Transio

Esta DTD contm todos os elementos e atributos HTML, INCLUINDO elementos de apresentao ou obsoletos
(como font). Conjuntos de frames no so permitidos.

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/

HTML 4.01 com Conjunto de Frames

Esta DTD igual a de HTML 4.01 de Transio, mas permite o uso de contedo em conjuntos de frames.

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Frameset//EN""http://www.w3.org/TR/html4/fram

No HTML 5, h apenas uma declarao que escrita assim:

<!DOCTYPEhtml>

https://developer.mozilla.org/ptBR/docs/HTML/Introduction

6/7

08/01/2017

IntroduoaoHTMLHTML|MDN

O doctype tem uma histria longa e intrincada, mas, por ora, tudo que voc precisa saber que este doctype
pede ao navegador para interpretar o cdigo HTML e CSS de acordo com os padres W3C e no fazer de
conta que cdigo para o Internet Explorer dos anos 90. (Ver "quirks mode").
A HTML tambm possui um mecanismo para embutir comentrios que no so exibidos quando a pgina
renderizada em um navegador. Isso til para explicar uma seo de marcao, ou deixar notas para outras
pessoas que forem trabalhar na pgina, ou deixar lembretes para si mesmo. Comentrios em HTML so
delimitados por smbolos na seguinte forma:

<!Essetextoumcomentrio>

Um documento pequeno, porm completo

Para mostrar tudo isso junto, eis um pequeno exemplo de um documento HTML. Voc pode copiar este
cdigo em um editor de textos, salv-lo como meuprimeirodocumento.html e abri-lo em um navegador. Tenha
certeza de salv-lo usando a codicao de caracteres UTF-8. Como este documento no usa estilos, parecer
um bocado simples, mas saiba que apenas um simplrio comeo.

1
2

<!DOCTYPEhtml>
<htmllang="ptBR">

3
4
5

<head>
<metacharset="utf8"/>
<title>Umpequenodocumento</title>

6
7
8
9

</head>
<body>
<h1>Cabealhoprincipaldomeudocumento</h1>
<!Notequeissoum"h"+onmero"um",no"h"+aletra"le">

10
11
12

<p>Vejam!Estouescrevendocdigo<abbrtitle="LinguagemdeMarcaodeHipertexto">
</body>
</html>

https://developer.mozilla.org/ptBR/docs/HTML/Introduction

7/7