Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial

Introdução ao Desenvolvimento com Padrões Web
XHTML Essencial

Muito tem se falado em frameworks para desenvolvimento web,
Tableless, AJAX, Facelets, RichFaces, etc, etc. Mas afinal, será
que usar todo esse aparato tecnológico nos garante ter sistemas
web de qualidade, acessíveis e usáveis? Por que é tão difícil
deixar uma tela com visual idêntico no Mozilla Firefox e no
Internet Explorer (e no Opera, Safari, Konqueror, além das
versões mobile)? No que nosso desenvolvimento com esta
tecnologia ainda pode melhorar? E afinal, o que vêm a ser
padrões web?

Esclarecer um pouco a algumas destas questões para que você
conheça o essencial dos detalhes do desenvolvimento web é o
objetivo deste tutorial. Com esta apostila, certamente você irá
gostar tanto dos padrões web quanto esse nosso amigo aí do
lado. :-P Tudo para os padrões web não
saírem de sua cabeça!

Breve histórico.
Aplicações web ricas, páginas dinâmicas, animações, sites para se assistir a vídeos, ouvir música em
rádios on-line, elementos de interatividade... Todas essas coisas comuns na Internet que
conhecemos hoje estavam muito longe da realidade nos primórdios das redes de computadores.
Interessante lembrar que isso tudo chegou a nós evoluindo num espaço de menos de vinte anos.
Como curiosidade, a primeira página web colocada oficialmente na Internet em 7 de agosto de 1991
foi a homepage do Conselho Europeu para Pesquisa Nuclear (CERN, da sigla em francês) em e
consistia em apenas um único arquivo HTML.
Pois bem. Assim que começou a sair dos ciclos militar e acadêmico, a Internet era essencialmente
um pequeno conjunto de documentos de texto interligados entre si e mantendo alguma correlação –
documentos de hipertexto, como são chamados. De acordo com o projeto da World Wide Web de
Tim Berners-Lee, a linguagem de marcação HTML foi definida para geração de documentos de
hipertexto. Todos os documentos basicamente consistiam em um fundo branco contendo texto,
possivelmente com alguns links para outros documentos. A estrutura dos documentos de hipertexto
era a única preocupação.
O ambiente web, baseado no modelo cliente-servidor, utilizava (e ainda utiliza) o protocolo de
transferência de hipertexto, HTTP, para comunicação e envio destes documentos de um servidor
web a um cliente, também chamado navegador web ou ainda, browser.
Em meados da década de 1990, a Internet se desenvolve e passa a ser usada comercialmente, por
empresas e corporações interessadas em divulgar sua marca, produtos e serviços. Com essa
motivação, o padrão para a linguagem HTML passou a incorporar marcações que permitiam inserir
elementos não relacionadas à estrutura do conteúdo. Foi o caso das marcações para mudar o estilo e
tamanho das fontes, inserção de imagens e formatações como negrito, itálico e sublinhado e
miniaplicativos Java Applets, por exemplo (respectivamente, <font>, <img>, <b>, <i>, <u> e
<applet>).

Além disso, as empresas que desenvolviam os navegadores web mais populares então (depois da
era do Mosaic) – a Netscape com seu Netscape Navigator, e a Microsoft com o Internet Explorer –
travaram uma disputa que ficou conhecida como a “Guerra dos Browsers": cada uma, por conta
própria, começou a criar marcações HTML próprias, só reconhecidas por seus próprios produtos (e
que não funcionavam no navegador concorrente) na tentativa de abarcar mais usuários para si.
Como o parser HTML de cada navegador simplesmente ignorava marcações que não reconhecia, ter
um site visualizado adequadamente nos dois produtos era uma ingrata tarefa.
Para tentar padronizar o conjunto de marcações HTML (e outros aspectos relacionados à web), o
próprio Tim Berners-Lee cria, em 1994, com um conglomerado de empresas
(http://www.w3.org/Consortium/Member/List), o Word Wide Web Consortium, W3C
(http://www.w3.org/Consortium); sendo o organismo que rege todos os padrões web existentes.
Deste passado recente até hoje, muita coisa aconteceu, ao menos pelo lado da Netscape: o
Navigator deixou de ser o navegador hegemônico
(http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#1998_and_earlier) e parou de ser
produzido oficialmente em 28 de dezembro de 2007. A empresa Netscape quase faliu e foi
adquirida pela America OnLine. O código-fonte do navegador foi doado à comunidade (através da
então recém criada Fundação Mozilla), reescrito e melhorado, dando origem inicialmente a um
novo navegador chamado Mozilla e, pouco depois, a uma versão mais leve chamada Mozilla
Firefox, prestes a ter sua versão 3 lançada.
Pelo lado do Internet Explorer, desde o declínio da Netscape o navegador da Microsoft usufrui de
sua cômoda supremacia no mercado. Talvez por isso tenha tido relativamente poucas evoluções
desde o final do século XX. As versões da série 4.x, 5.x e 5.5.x tiveram cerca de três anos no
mercado praticamente sem melhorias significativas.

O Padrão XHTML
Durante a “Guerra dos Browsers", na tentativa de se conseguir layouts com colunas de textos e
imagens minimamente semelhante nos navegadores mais populares, era comum se utilizarem
elementos de tabelas do próprio HTML como espécies de linhas guia para alinhar conteúdos.
Com a “Guerra dos Browsers", era muito comum se encontrar sites com dois botões, com os logos
do Internet Explorer e Netscape Navigator. Como nenhum dos dois prevalecia (o Netscape era mais
popular na Europa e o Internet Explorer na América), com o tempo as empresas perceberam que tal
competição na verdade acabava dividindo o mercado. As empresas então perceberam a necessidade
de adequação aos padrões web. E de fato, com o fim de tal “Guerra", os navegadores se
aprimoraram muito com relação aos padrões web definidos pelo W3C. Apesar de ainda haver
algumas discordâncias, o grau de aderência aos padrões dos navegadores modernos (grosso modo,
IE e NN de versões superiores a 4) é em geral muito satisfatório.
Apesar da grande melhoria no suporte aos padrões, os navegadores ainda se comportavam errônea e
discrepantemente para o caso de códigos HTML fora dos padrões, ou feitos incorretamente ou mal-
formados – que aliás, eram muito comuns devido a grande popularização da web desde o estouro da
bolha da Internet. Os padrões ditavam como o navegador deveria se comportar ao segui-los, mas
os resultados poderiam ser inesperados em caso de problemas com o código HTML. Os
navegadores acabavam fazendo um “melhor esforço" para tentar exibir código HTML incorreto ou
despadronizado, mas não havia nenhuma garantia.
Para garantir este melhor esforço, os navegadores flexibilizam ao máximo suas engines de
renderização e passam a operam no chamado “Quirks Mode", uma espécie de modo de
compatibilidade em que os navegadores funcionam tal como eram suas versões antiquadas, da
época da Guerra dos Browsers. Ou seja, se seu código HTML for ruim, sua página será exibida
tal como o seria num Internet Explorer 2 ou Netscape Navigator 3 – e tão difícil de manter e

garantir a aparência visualização quanto.
Como exemplo, de acordo com o padrão HTML, um parágrafo deve possuir as tags de abertura
(<p>) e fechamento (</p>). Assim:
<p>Ouviram do Ipiranga as margens Ouviram do Ipiranga as margens plácidas de um
plácidas de um povo heróico o brado
povo heróico o brado retumbante.
retumbante.</p>
<p>E o sol da liberdade em raios
fúlgidos brilho no céu da pátria neste E o sol da liberdade em raios fúlgidos brilhou no
instante.</p> céu da pátria neste instante.
Trecho de código HTML bem formado Renderização

Mas se alguém esquecesse a tags de fechamento e gerasse um documento HTML mal-formado
como abaixo?
<p>Ouviram do Ipiranga as margens Ouviram do Ipiranga as margens plácidas de um
plácidas de um povo heróico o brado
povo heróico o brado retumbante.
retumbante.
<p>E o sol da liberdade em raios
fúlgidos brilho no céu da pátria neste E o sol da liberdade em raios fúlgidos brilhou no
instante. céu da pátria neste instante.
Trecho de código HTML bem formado Renderização

O resultado seria o mesmo! Para não frustrar a grande quantidade de usuários da web que poderiam
ter gerado códigos desta forma, os navegadores acabavam renderizando tal código incorreto da
mesma forma que o de acordo com os padrões. Entretanto, as possibilidades são infinitas e as
decisões de como renderizar código incorreto ficavam a cargo de cada desenvolvedor.
Então, no início do ano 2000, o W3C estende e padroniza a sintaxe HTML, dando-lhe mais rigor e
organização. A este padrão deu-se o nome de XHTML (HTML eXtensível). O “xis" de
“eXtensível" é uma alusão ao padrão XML. Usado para troca de dados entre aplicações distintas,
desde o princípio, as implementações de frameworks para manipulação de XML sempre foram bem
rigorosos – fazer parsing de um arquivo XML mal formado sempre resulta em erro.
As principais características do padrão XHTML são:

Todas as tags devem ter o par de abertura e fechamento.
Ex:
<ul> <ul>
<li>Banana <li>Banana</li>
<li>Mamão <li>Mamão</li>
<li>Maçã <li>Maçã</li>
<li>Abacate <li>Abacate</li>
<ul> <ul>
Código HTML incorreto XHTML equivalente

Tags unas, que inerentemente não possuam o par de fechamento,
devem ser terminadas com barra.
Ex.:
Eis a minha foto: Eis a minha foto:
<img src="foto.jpg"> <img src="foto.jpg" />

PS: É importante o espaço antes da barra de finalização nas tags unas.

Tags aninhadas devem ser fechadas correspondentemente.
Ex.:
<i><b>Velho negrito e itálico</i></b> <b><i>Velho negrito e itálico</i></b>

Todas a tags e atributos devem estar em letras minúsculas.
Ex.:
<STRONG><EM>Nova ênfase e <strong><em>Nova ênfase e
destaque</EM></STRONG> destaque</em></strong>

Atributos de tags também devem estar em minúsculas.
Ex.:
<button <button
onClick="alert('Errado!')">Clique onclick="alert('Certo!')">Clique
</button> </button>

Valores de atributos em tags devem ser delineados por aspas duplas.
Ex.:
<img src=foto.jpg src=30 heigth=40> <img src="foto.jpg" width="30"
height="40" />

Todos os atributos devem constituir-se de pares nome/valor.
Ex.:
<option selected>Selecione</option> <option selected="selected">Selecione</
option>
PS: Nos casos de atributos HTML que não são pares nome/valor, o código XHTML equivalente
ocorre atribuindo-se valor igual ao mesmo nome do atributo. Em XHTML não há os valores de
atributo, p.ex., como “true" ou “false".

O atributo “id" substitui o “name", e este deverá ser único no código.
Ex.:
<input type="text" name="endereco" /> <input type="text" id="endereco" />

Além disso (http://www.heliocosta.com.br/blog/como-escrever-codigo-xhtml-valido/) É importante
observar que o padrão HTML não morreu, sendo mantido normalmente pelo W3C. Assim, devido

aos diferentes padrões – e suas diferentes versões -- hoje em dia é imprescindível declarar o tipo de
documento web que estamos manipulando. A declaração do tipo de documento web é feita por
meio de DOCTYPES.
A declaração do DOCTYPE deve vir logo no início de qualquer documento web. Atualmente
existem os seguintes DOCTYPES (http://www.pinceladasdaweb.com.br/blog/2006/12/21/utilize-o-
doctype-correto/):

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

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

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

XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

PS: Só para ficar claro, tem-se que XHTML é apenas uma especificação diferenciada do padrão
HTML. O mime-type correspondente ainda é o próprio text/html. Assim, o nome de arquivos com
código XHTML pode usar a extensão .html (ou .htm) normalmente.
A principal idéia por trás da diferenciação dos tipos de documentos, além da definição de qual
padrão web está sendo usado, é também buscar a independência entre apresentação e conteúdo. Por
definição os padrões para documentos html devem definir a estrutura do documento e nunca sua
aparência. Este, a propósito, é o motivo de tags como <font>, <b>, <i>, <u>, <center> e outras,
além de atributos que possibilitam efeito similar, como align="left" serem considerados obsoletos
nas versões. Assim, ainda que espere ver um título de documento em negrito e com um tamanho
maior, NUNCA seria adequado fazê-lo assim:

<font size="16"><b>Hino Nacional Brasileiro</b></font>

Sendo a forma semanticamente correta:

<h1>Hino Nacional Brasileiro</h1>

O DOCTYPE Strict é o que possibilita a maior separação entre apresentação e conteúdo, pois não
permite nenhum elemento referente a apresentação no código, ou seja, nenhuma das tags ou
atributos obsoletos (http://www.maujor.com/dicas/deprecated.php). Nesta situação, toda a
aparência da página deverá ser dada integralmente por folhas de estilo.
Já o DOCTYPE Transitional possibilita a maioria das marcações de apresentação obsoletas, sendo a
mais simples de se usar quando se deseja converter uma página renderizada em quirks mode
(código não válido) em uma página aderente aos padrões.
O DOCTYPE Frameset é usado apenas para o caso de páginas com frames. Seu uso é pouco
recomendado hoje em dia, devido às vantagens que se tem em conseguir o mesmo efeito visual
apenas com folhas de estilo. Veja os exemplos disponíveis em http://www.dynamicdrive.com/style/
layouts/category/C11/
PS: Consulte a relação de todas as tags html em http://www.w3schools.com/tags/default.asp.
A propósito, com o que já sabemos até aqui, é oportuno apresentar neste momento a estrutura
mínima básica para um documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esqueleto de uma página XHTML válida</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body></body>
</html>

O DOCTYPE deve ser sempre o primeiro
elemento presente no código – até para definir
que tipo de documento estamos desenvolvendo.
Mas, como visto no esqueleto mínimo acima, há
outros elementos essenciais para a uma página
web.
É hora então de analisar os elementos que
compõem a estrutura mínima de uma página, para
que você possa visualizar e entender o código
html que está por trás daquilo que você vê.
É sempre muito importante
PS: Você nunca mais verá uma página web da visualizar e entender o código...
mesma forma!

CONHECENDO OS ELEMENTOS HTML
Os elementos mínimos essenciais para a estrutura de uma página web são aqueles mostrados no
código pouco mais acima. A saber (além do DOCTYPE) toda página web é composta de duas
seções: uma cabeça1 e um corpo.
A cabeça é uma área que contém relevantes informações sobre o próprio documento html (meta-

1 Por questões de tradução, muitas vezes também mencionado como cabeçalho. Entretanto, optou-se por não utilizar
esta forma para evitar confusão com as tags de cabeçalho <h1> a <h6>, apresentadas mais à frente.

informações) além de referências a outras páginas html, folhas de estilos e scripts. Por outro lado, o
corpo é onde tudo acontece, onde realmente estão inseridos os conteúdos. PS: A seguir, detalhes
sobre estas e algumas outras tags especialmente importantes para desenvolvedores web.
<html></html>
A raíz de todo documento web. A tag de abertura deve vir imediatamente após a declaração do
DOCTYPE e a tag de fechamento deve ser a última coisa presente no código. A tag html deve ser
única num arquivo, ou seja, não é possível definir mais de um documento html dentro do mesmo
arquivo. Também deve conter obrigatoriamente as tags <head> e <body>.
Atributos obrigatórios: Conteúdo:
- xmlns http://www.w3.org/1999/xhtml
(valor fixo) referência ao namespace do padrão XHTML
<head></head>
Define a cabeça do documento, onde devem constar informações sobre o documento, dentre as
quais uma tag <title>.
<meta />
Provê diversos tipos de meta informação sobre a página, como descrição da página, nome do autor,
ou data da última atualização. Deve aparecer na cabeça da página.
- content o valor atribuído
Atributos opcionais: Conteúdo:
- name qualquer informação a ser descrita, tal como description ou author
- http-equiv usado no lugar de name para descrever um cabeçalho http correspondente
<title></title>
Define o título da página, item obrigatório para o padrão XHTML. Deve aparecer na cabeça da
página.
<link></link>
Define um relacionamento entre a página em questão e outras páginas ou recursos externos. É
comumente usado para referência arquivos favicon ou folhas de estilo. Deve aparecer na cabeça da
página.
- href referência de destino do relacionamento
- type mime-type do arquivo relacionado
- media screen|print|projection|braille|speech|all mídia do recurso
- rev, rel relacionamento da página atual com o recurso destino e vice-versa
- charset codificação de caracteres do recurso destino
- hreflang código do idioma do recurso de destino
<style></style>
Define código de programação script, diretamente ou referenciando a arquivo externo. Deve
aparecer na cabeça da página.
- type mime-type da do tipo de conteúdo, p.ex., text/css
- media screen|print|projection|braille|speech|all mídia do recurso
- title atribui um nome aos estilos, que podem, p.ex., ser referenciados via script
<script></script>
Define código de programação script, diretamente ou referenciando a arquivo externo. Deve
aparecer na cabeça da página. Deve aparecer na cabeça da página.

- type mime-type da linguagem de script utilizada, p.ex.,
text/javascript
- src caminho para o fonte de um arquivo script externo
PS: Abordaremos o uso de folhas de estilos e programação de scripts client-side nas partes seguintes
desta apostila.
<noscript></noscript>
Define conteúdo a ser exibido quando não houver suporte à execução de scripts pelo navegador
web. Deve aparecer na cabeça da página.
<frameset></frameset>
(Apenas para o DOCTYPE frameset). Define um conjunto de frames.
- cols, rows o tamanho (em porcentagem, pixels ou restante *), quantidade e orientação
dos frames. Framesets também podem ser aninhados.
<frame />
(Apenas para o DOCTYPE frameset). Define um frame, uma área retangular de uma página html
capaz de exibir outras páginas html independentemente. Devem vir dentro de um frameset.
- frameborder 0|1 indica se o frame deve ou não apresentar uma borda|
- name nome para o frame
- src caminho para a página html destino a ser carregada
- noresize noresize indica que o frame não permite ser redimensionado
- scrolling yes|no|auto indica se o frame deve exibir uma barra de rolagem
PS: Sempre é bom ressaltar que o uso de frames é controverso para muitos profissionais
(http://www.useit.com/alertbox/9612.html). Avalie se será bem aplicado ao seu caso, lembrando
que o efeito visual pode ser conseguido similarmente com folhas de estilo.
<body></body>
Define a cabeça do documento, onde devem constar informações sobre o documento, dentre as
quais uma tag <title>.
Vimos as tags básicas para definição da estrutura mínima e da cabeça do documento. No entanto, já
sabemos que o conteúdo efetivo do documento ocorre no seu corpo. Veremos então agora algumas
das tags de conteúdo e suas finalidades para dar significado semântico à estrutura do documento.

Falando de Semântica (ou porque Tableless não existe)
Como já dito, obter-se layouts adequados nos navegadores modernos é algo alcançável desde que se
tenha código de acordo com os padrões. Entretanto, obediência aos padrões envolve algo além da
sintaxe de acordo com a especificação XHTML. Envolve também semântica.

A semântica do código HTML é o principal motivo pelo qual se desaconselha práticas da época da
Guerra dos Browsers, como a de se utilizar elements tabelas do HTML para estruturação e
alinhamento de layouts. De uns tempos pra cá, ao se mencionar desenvolvimento web com
padrões, alguns desenvedores inventaram o termo “Tableless" para se referir a sites que não usam
tabelas para estruturar layouts.
Infelizmente, vê-se que o mencionar um “Site Tableless" tornou-se algo muito mais mercadológico,

para vender a idéia de sites web modernos e que muitas vezes não correspondem à realidade. Seria
mais adequado dizer-se “Site Web Semântico" até por um simples motivo: não é a eliminação de
tabelas por si só que garantirá uma melhoria no desenvolvimento e manutenção de sites, mas sim a
adequada utilização das tags para suas corretas finalidades. Ou seja, sua correta adequação
semântica (http://www.maujor.com/blog/2008/02/20/fora-tableless/).
Neste sentido, não se deve eliminar a utilização de tabelas em html, mas sim disciplinar seu uso
quando necessário, isto é, quando se precisar exibir dados tabulares. Da mesma forma, o uso de
tags diferentes da h1 para discriminação de títulos principais de um documento implica em sites
igualmente difíceis de desenvolver e manter.
Na versão 1.0 do padrão XHTML Strict existem XX tags definidas que podem ser classificadas de
diversas maneiras (p.ex., como no W3Schools: http://www.w3schools.com/tags/ref_byfunc.asp, e
no HtmlDog: http://www.htmldog.com/reference/htmltags/), mas para uma introdução mais
didática, nossa abordagem irá conter apenas três grupos: a família dos textos, a família dos
formulários e a família das listas e tabelas. (PS: Esta é uma classificação própria, inventada
apenas para fins didáticos). Veremos mais à frente que esta classificação não é o suficiente para
enquadrar todo o conjunto de tags, mas é o bastante para começarmos a conhecer o padrão.
Antes de mais nada, deve-se ter em mente que as tags definem uma hierarquia própria a partir de
sua raiz, ou seja, algumas tags só podem aparecer como filhas (contidas em) algumas determinadas
outras. Para detalhes, consulte http://www.zvon.org/xxl/xhtmlBasicReference/Output/index.html.

FAMÍLIA DOS TEXTOS
<p></p>
Apenas um parágrafo de texto :-P. É uma das tags mais importantes uma vez que não se pode
admitir texto diretamente sob a tag body, como veremos a seguir.
<br />
Quebra de linha. Deve ser usada com bastante parcimônia, sendo seu uso mais adequado para
marcar a separação de linhas dentro de um parágrafo quando isto for realmente necessário (p.ex.,
numa poesia, para delimitar versos dentro de uma estrofe).
Sub-tipo: cabeçalhos
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Definem diversos níveis de cabeçalhos (ou títulos, subtítulos, sub-subtítulos e etc) no conteúdo do
documento html, sendo h1 o cabeçalho principal.
Sub-tipo: formatação semântica
<em></em>, <strong></strong>
Definem, respectivamente, texto com ênfase e texto com mais força na entonação. (Alguns
navegadores renderizam-nos como negrito e itálico).
Sub-tipo: citação
<q></q>, <cite></cite>, <blockquote></blockquote>
Definem citações. Os dois primeiros representam citações de uma linha (sendo que com a tag <q>
é possível atribuir a origem da citação) enquanto que <blockquote> representa um bloco de texto de
citação.
Sub-tipo: siglas
<abbr></abbr>, <acronym></acronym>
Ambos definem siglas. Um acrônimo é uma abreviatura que pode ser lida sem soletração.
Sub-tipo: revisões de texto

<ins></ins>, <del></del>
Se referem a trechos de texto incluídos e removidos.
Sub-tipo: acidentes textuais
<pre></pre>, <code></code>, <var></var>, <kbd></kbd>,
<samp></samp>, <dfn></dfn>, <address></address>
Representam, respectivamente, texto pré-formatado (mantendo identação e quebras de linha), trecho
de código, referência a uma variável, referência a digitação no teclado, textos de saída no monitor,
definição de um termo e informação de contato.

FAMÍLIA DOS FORMULÁRIOS
<form></form>
Define um formulário, uma área com conjunto de campos para entrada de dados.
- action a url para a qual os dados do formulário são submetidos
- method get|post método de submissão dos dados
- enctype multipart/form-data necessário quando houver um campo input file
- accept mime-types permitidos para campos input file
- accept-charset codificações de caracter permitidos
Sub-tipo: estrutura de formulário
<fieldset></fieldset>
Agrupa um conjunto de campos logicament relacionados.
<legend></legend>
O título de um fieldset.
- accesskey uma tecla de atalho para o fieldset
<label></label>
Define o rótulo para um campo. Pode fazê-lo envolvendo o campo relacionado ou por meio do
atributo for.
- for indica o campo ao qual o rótulo se refere
- accesskey uma tecla de atalho para o campo
Sub-tipo: campos de formulário
<textarea></textarea>
Um campo para entrada de várias linhas de texto. Pode ter um valor pré-definido em seu conteúdo.
- rows, cols tamanho do elemento em linhas e colunas
- name nome do elemento
- disabled disabled usado para desabilitar o elemento
- readonly readonly torna o campo apenas leitura
- tabindex indica a ordem de acesso ao campo via teclado
<select></select>

Define um campo com lista de opções, tanto do tipo combo box quanto list box.
- size quantidade de itens exibidos inicialmente (maior que 1 para tipo list box)
- multiple multiple indica se um campo list box permite seleção múltipla
<option></option>
Define os itens para um campo select.
- selected selected determina a opção que inicialmente selecionada
- value o valor associado à opção correspondente
<optgroup></optgroup>
Agrupa um conjunto de itens de um campo select.
- label o texto que nomeia o grupo de opções
<input />
O elemento mais versátil do padrão html, podendo representar diferentes tipos de entrada de dados.
- type text|password|checkbox|radio|hidden|submit|reset|button|
image|file
- value valor associado ao campo. Obrigatório para os tipos checkbox e radio.
- checked checked indica se um campo checkbox ou radio já deve vir selecionado
- maxlength quantidade máxima de caracteres suportada pelo campo
- src para campo do tipo image, indica o caminho do arquivo de imagem
- alt para campo do tipo image, define o texto alternativo da imagem
- accept mime-types permitidos para campos input file
- readonly readonly torna o campo apenas leitura
<button></button>
Um tipo de botão um pouco mais flexível que os definidos com elementos input.
- type submit|reset|button
- value valor associado ao campo

FAMÍLIA DAS LISTAS E TABELAS
Sub-tipo: listas

<ul></ul>, <ol></ol>, <dl></dl>
Listas de elementos. Referem-se aos tipos: “unordered list” (lista não ordenada) e “ordered
list” (lista ordenada) e “definition list” (lista de definições).
<li></li>
Se refere a um item de uma lista, tanto ordenada quanto não ordenada).
<dt></dt>, <dd></dd>
Se referem aos termos e suas respectivas descrições numa lista de definições.
Sub-tipo: tabelas
<table></table>
Define um elemento tabela para exibição de dados tabulares.
- summary descrição textual da tabela
<thead></thead>, <tfoot></tfoot>, <tbody></tbody>
Definem seções dentro de uma tabela. São úteis para otimizar a visualização e acesso aos dados,
p.ex., pondo cabeçalho e rodapés fixos e barra de rolagem no conjunto de dados do corpo.
- align left|right|center|justify|char
- valign top|middle|bottom|baseline
- char, charoff relacionados ao alinhamento de dados a partir de casas decimais
<tr></tr>
Define uma linha de uma tabela.
<th></th>, <td></td>
Definem células de uma tabela, sendo respectivamente células de cabeçalho e células de dados.
- colspan para quantas colunas um merge de uma célula se expande horizontalmente
- rowspan para quantas linhas um merge de uma célula se expande verticalmente
- abbr ruma descrição do dado presente na tabela
- scope row|col indica se o cabeçalho correspondente é horizontal ou vertical

PS: Novamente esta classificação não é completa, apresentada apenas para fins didáticos. Algumas
tags muito importantes – principalmente para programadores – e que não se enquadraram nesta
classificação, como a tag <a> e <object> ficaram de fora. A consulta aos padrões é altamente
recomendada.
Além dos atributos específicos dessas famílias de tags, existe um conjunto de atributos comuns que
se aplicam a todas as tags de conteúdo. São eles:
Atributos básicos
- id Identificação única de um elemento. Usado geralmente para referência ao

elemento via programação ou folhas de estilos.
- class Define uma característica possivelmente em comum entre diversos elementos
e
a partir da qual seja possível classificá-los ou agrupá-los. Também bastante
usado para aplicação de folhas de estilos.
- style Atribui uma folha de estilos inline apenas ao próprio elemento. Seu uso
bastante desaconselhável, devendo ser usado apenas em circunstâncias bem
específicas, pois pode resultar novamente na indissociação entre apresentação
e conteúdo.
- title Texto descritivo do elemento (alguns navegadores utilizam como hint). Para
as
tags <abbr>, <acronym> e <dfn> representa o próprio termo descrito.
Atributos de internacionalização
- dir Permite alterar a direção do texto contido no elemento. Admite os valores ltr
(“left to right”) ou rtl (“right to left”), necessário para escrita de alguns
idiomas orientais.
- xml:lang Especifica o idioma do texto contido no elemento como, p.ex. en (english).
Atributos de eventos
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
Utilizados para programação script em resposta a eventos da interface.
Entretanto, como seu uso também prejudica a manutenibilidade do código, é
bem mais recomendável a utilização de scripts não-instrusivos, conforme
técnica mostrada mais à frente.

Mas afinal, pra quê isso tudo?
Bem, é claro que o uso de padrões quando eles existem é
sempre uma coisa boa. Mas se você ainda não se convenceu
disto, é provável que esteja se perguntando o mesmo que
nosso amigo Bozo. Neste caso, é importante ressaltar as
vantagens do desenvolvimento com padrões web.
Melhor manutenibilidade – desenvolver sites e aplicações de
acordo com os padrões web resulta em código mais limpo e
muito mais fáceis de manter;
Melhor utilização de recursos – páginas fora dos padrões
oferecem mais risco de levar os navegadores a estados
inesperados, o que representa maior propensão a erros. Além
Bozo, by Karlisson disso, como vimos, entrar em “quirks mode” limita nossa
www.nerdson.com utilização de recursos mais avançados dos navegadores;
Menos retrabalho – tendo a semântica em mente, com a separação entre apresentação e conteúdo,
obter-se diferentes versões de nossas páginas passa a ser algo trivial. (Por exemplo, para se ter uma
versão para impressão não há necessidade de mais tempo desenvolvimento, mas apenas uma folha

de estilos voltada para impressão que ressalte alguns elementos e oculte outros, como cores e
imagens de fundo);
Garantia de compatibilidade – desenvolver de acordo com os padrões é a única garantia que
temos de que nossos sites e aplicações web poderão funcionar corretamente por muitos anos,
mesmo em versões de navegadores web que ainda estão por vir. Desenvolver com padrões é
desenvolver para o futuro;
Visualização em múltiplas mídias – ter um site ou aplicação web adequadamente desenvolvido
nos permite oferecer ao cliente mais possibilidades de acesso à informação, mesmo em palmtops,
celulares, handhelds, tevê digital, leitores de tela e qualquer outro tipo de aparelho ou mídia com
suporte à web;
Acessibilidade – o uso de padrões possibilita que pessoas com algum grau de deficiência (seja
visual ou motora) possam interagir com os sites e aplicações web normalmente – uma preocupação
sempre relevante, especialmente em se tratando de políticas governamentais;

Por que impedir que estas pessoas utilizem nossos sites e aplicações web?

Melhor visibilidade para motores de busca – no caso de sites para Internet, o uso de padrões
expôe melhor o conteúdo de nossos sites a mecanismos de busca, o que os torna mais visíveis na
web e mais fáceis de encontrar, resultando e maior visitação;
Maior rapidez no carregamento – desenvolver com padrões resulta em páginas mais limpas e
com menos código html desnecessário, o que significa que além de escrevermos menos código,
nossas páginas carregarão mais rápido;
Além disso, pense que desenvolver com os padrões é de fato a forma correta de se desenvolver para
a web e que isso de quão avançada sejam as tecnologias de servidor que estejamos usando.

Conclusão
Com isto chegamos ao fim da primeira parte de nossa apostila sobre padrões web. Certamente não
conseguimos cobrir toda a especificação dos padrões web para desenvolvimento de sistemas.
Entretanto, esperamos ter provido informações básicas para solidificar as bases para o
desenvolvimento de sites e sistemas de acordo com os padrões web.
Outros aspectos que julgamos essenciais para o desenvolvimento web e que muitas vezes são
negligenciados, tais como uso de folhas de estilos e programação de scripts deverão ser assunto das
próximas partes desta apostila. Até lá.

Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Semelhante a Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial

Semelhante a Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial (20)

Mais de Marcelo Andrade

Mais de Marcelo Andrade (16)

Último

Último (9)

Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial