Introdução ao HTML

Ao se deparar com uma página da Web no navegador, o que tu vês, na perspectiva mais simples possível, são apenas palavras. É raro encontrar uma página da Web que contenha apenas texto puro. Mais do que meramente palavras, o que tu vês e lês contêm características de estilo. Os projetistas de páginas modernas da Web possuem acesso a centenas de fontes diferentes, com diversos tamanhos, muitas cores e mesmo vários alfabetos (e.g. espanhol, japonês, russo, etc.). Os navegadores modernos podem exibir a maioria deles de maneira precisa. Páginas da Web podem conter imagens, videoclipes e músicas de fundo. Podem incluir menus do tipo drop-down, caixas de busca, links clicáveis para produtos ou outras páginas no mesmo sítio, ou links para páginas de outros sítios. Alguns sítios da Web chegam até mesmo a fornecerem opções à personalização da exibição das páginas, de modo a acomodar preferências pessoais ou deficiências como limitação visual, surdez ou daltonismo. Páginas contêm freqüentemente caixas de conteúdo que se movem (rolam) enquanto o restante da página mantém-se imóvel.

Uma gama de tecnologias (como CSS, JavaScript, Flash, AJAX, JSON) pode ser usada para definir os elementos de uma página da Web. Contudo, na base da estrutura de uma página da Web está o HTML (HyperText Markup Language ou, em português, Linguagem de Marcação de HiperTexto). Sem HTML não haveria nenhuma página da Web. HTML é o que o navegador "lê" para apresentar a página ao usuário em frente ao computador. As especificações e padrões do HTML são geridas pelo World Wide Web Consortium (W3C) e pelo Web Hypertext Application Technology Working Group (WHATWG). O WHATWG considera o HTML um "padrão vivo", em constante evolução; ao passo que o W3C trabalha tanto com o padrão estabelecido quanto com a sua evolução. A versão mais atual do padrão HTML é o HTML5 e a sua evolução é o HTML 5.1.

O criador de uma página da Web pode usar CSS para definir a aparência e o layout dos elementos constituintes da página (blocos de texto, imagens, etc.). Atualmente as melhores práticas de desenvolvimento para a Web encorajam o uso das CSS, em vez do uso do HTML, para definir a apresentação.

Este artigo fornece uma introdução ao HTML. Se tu já se perguntaste o que acontece nos bastidores do seu navegador ao explorar esse mar de páginas que é a Web, este artigo é um bom ponto de partida para aprender.

Uma breve história do HTML

No final dos anos 80, Tim Berners-Lee trabalhava como físico no CERN (a Organização Européia de Pesquisas Nucleares) e idealizava uma maneira através da qual cientistas pudessem compartilhar documentos por meio da Internet. Antes de sua invenção, a comunicação pela Internet era limitada a textos puros, usando tecnologias como e-mail, FTP (Protocolo de Transferência de Ficheiros) e fóruns de discussão baseados na Usenet. A invenção do HTML baseava-se num modelo em que o conteúdo era armazenado em um servidor central e podia ser transferido e visualizado em uma estação de trabalho local por meio de um navegador. Ela simplificou o acesso a conteúdos e permitiu a disponibilização de conteúdos "enriquecidos" (pela sofisticação da formatação tipográfica e possibilidade de exibição de imagens, por exemplo).

O que é HTML?

HTML é uma linguagem de marcação. A palavra marcação era usada por editores que marcavam manuscritos (geralmente com uma caneta azul) para fornecer instruções para revisões. O termo mantém-se em uso, contudo, com um significado um pouquinho diferente. Uma linguagem de marcação, no sentido em que se relaciona com os navegadores, é uma linguagem com uma sintaxe específica que fornece instruções ao navegador sobre como exibir uma página. O HTML distingüe e separa o "conteúdo" (palavras, imagens, áudio, vídeo, e assim por diante) de sua "forma de apresentação" (as instruções sobre como determinado tipo de conteúdo deve ser exibido). O HTML usa um conjunto pré-definido de elementos para identificar os diversos tipos de conteúdo. Os elementos, por sua vez, contém uma ou mais tags (etiquetas) que contêm ou expressam um determinado conteúdo. Tags são envoltas por parênteses angulares e a tag de fechamento (isto é, que indica o fim do conteúdo) tem o nome antecedido por uma barra "/".

Por exemplo, o elemento parágrafo consiste das tags de inicialização "<p>" e de finalização "</p>". O seguinte exemplo mostra um parágrafo contido dentro do elemento parágrafo do HTML:

<p>Estou começando a aprender HTML.</p>

Quando este conteúdo for exibido pelo navegador, deve apresentar-se como algo assim:

Estou começando a aprender HTML.

O navegador usa as tags como se fossem sinalizadores sobre o modo como deve ser exibido o conteúdo contido por elas.

Elementos que contêm conteúdo podem geralmente também conter outros elementos. Por exemplo, o elemento de ênfase ("<em>") pode ser colocado dentro de um elemento de parágrafo, para adicionar ênfase a uma palavra ou frase:

<p>Estou <em>começando</em> a aprender HTML.</p>

Quando exibido, isto se apresentará como:

Estou começando a aprender HTML.

Alguns elementos não contêm outros elementos. Por exemplo, a tag para imagem ("<img>") simplesmente especifica o nome do ficheiro do conteúdo (uma imagem) como um atributo:

<img src="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 teríamos:

<img src="smiley.jpg"/>

O resto deste artigo aprofunda com maiores detalhes sobre os conceitos introduzidos nesta seção. No entanto, se tu quiseres ver o HTML em ação, faça uso do Mozilla Thimble, um editor online interativo que te auxilia na aprendizagem da escrita de marcação HTML. Dê uma olhada também em Elementos HTML para uma lista de todos os elementos disponíveis e uma descrição do uso de cada um.

Elementos - os "tijolos" de uma página da Web

O HTML consiste de um conjunto de elementos. Um elemento define o significado semântico do seu conteúdo. Elementos incluem tudo entre duas tags de elementos que casam entre si, incluindo as próprias tags. Por exemplo, o elemento "<p>" indica um parágrafo; o elemento "<img>" indica uma imagem. Veja a página dos Elementos HTML para uma lista completa.

Alguns elementos possuem um significado bastante preciso, como em "isto é uma imagem", "isto é um título" ou "isto é uma lista ordenada". Outros são menos específicos, como em "isto é uma seção da página" ou "isto é um fragmento de texto". Outros ainda são usados por razões técnicas, como em "isto é informação de identificação para a página que não deve ser exibida". De qualquer forma, de um jeito ou de outro, todos os elementos HTML possuem um valor semântico.

A maioria dos elementos podem conter outros elementos, formando uma estrutura hierárquica. Uma página da Web bem simples, mas completa, se parece com isto:

<html>
  <body>
    <p>Estou dando os meus primeiros passos em HTML.</p>
  </body>
</html>

Como tu podes ver, o elemento <html> cerca o resto do documento, e o elemento <body> cerca o conteúdo da página. Essa estrutura é freqüentemente pensada como sendo uma árvore com ramos (neste caso, os elementos <body> e <p>) crescendo a partir de um tronco (<html>). Esta estrutura hierárquica é chamada de DOM: o Modelo de Objeto de Documentos.

Tags

Documentos HTML são escritos na forma de texto puro. Podem ser escritos em qualquer editor de texto que permita salvar conteúdo como texto puro, tal como Notepad2, Notepad++ ou Sublime Text, muito embora a maioria dos criadores de HTML prefiram usar um editor especializado que destaque a sintaxe e mostre o DOM (IDEs). Nomes de tags podem ser escritos tanto em letras maiúsculas como em minúsculas. Contudo, o W3C (o consórcio global que mantém o padrão HTML) recomenda o uso de letras minúsculas (e o XHTML exige que sejam sempre letras minúsculas).

O HTML atribui significado especial a qualquer coisa que comece com o sinal de menor ("<") e termine com o sinal de maior (">"). Tais marcações são chamadas de tags. Certifique-se de sempre fechar cada tag, já que embora algumas sejam fechadas por padrão, outras podem produzir erros inesperados se tu esqueceres de finalizá-las.

Eis aqui um exemplo simples:

<p>Isto é um texto dentro de um parágrafo.</p>

Neste exemplo existe uma tag de início e uma tag de fim. Tags de fim são iguais às tags de início, mas porém contêm uma barra logo após o sinal de menor. A maioria dos elementos em HTML são escritos usando tanto tags de início como de fim. Tags de início e de fim devem estar correctamente aninhadas, isto é, tags de fim devem ser posicionadas na ordem contrária das tags de início. O aninhamento apropriado é uma regra que deve ser obedecida para que se possa escrever código válido.

Este é um exemplo de código válido:

<em>Eu <strong>realmente</strong> quis dizer aquilo</em>.

Este é um exemplo de código inválido:

<em>Eu <strong>realmente</em> quis dizer aquilo</strong>.

Observe que, no exemplo válido, a tag de fim para cada elemento aninhado é sempre colocada antes da tag de fim do elemento no qual está aninhado.

Alguns elementos não contêm nenhum texto nem qualquer outro elemento. Estes são os elementos vazios e não precisam de tags de encerramento. Eis um exemplo:

<meta charset="utf-8">

Muitas pessoas marcam elementos vazios usando uma barra no final da tag (prática obrigatória em XHTML).

<meta charset="utf-8" />

Em HTML esta barra possui um significado que não é implementado no Firefox, de modo que não deve ser usada. Elementos vazios não devem ser fechados na sintaxe do HTML propriamente dita.

Atributos

A tag de início pode conter informações adicionais, como no exemplo precedente. Tais informações são 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 são atributos booleanos e podem ser abreviados especificando-se somente o seu nome ou deixando o seu valor em branco. Assim, os seguintes 3 exemplos têm o mesmo significado:

<input required="required">

<input required="">

<input required>

Valores de atributos que consistem de uma única palavra ou número podem ser escritos imediatamente após o sinal de igualdade (=), dispensando-se o uso de aspas. Por outro lado, se o valor for constituído por duas ou mais palavras, o uso de aspas é obrigatório. Tanto as aspas simples (') quanto as aspas duplas (") são permitidas. Muitos desenvolvedores optam sempre pelo uso de aspas, de forma a deixar o código menos ambíguo e para evitar erros. No seguinte exemplo comete-se um erro:

<p class=foo bar> (Cuidado! Isto provavelmente não significa o que tu achas que significa.)

Neste exemplo, o valor deveria ser "foo bar". Mas como não se usou as aspas no código, é interpretado como se fora:

<p class="foo" bar="">

Referências a caracteres com nome

Referências a caracteres com nome (também chamados de entidades) são usadas para imprimir caracteres que têm um significado especial em HTML. Por exemplo, o HTML interpreta os sinais de menor e maior como delimitadores de tags. Quando tu quiseres exibir um sinal de menor num texto, tu podes usar uma referência ao seu nome do caractere. Há quatro referências comuns a caracteres que se deve conhecer:

• > denota o sinal de maior (>);
• < denota o sinal de menor (<);
• & denota o sinal do ê comercial (&);
• " denota o sinal de aspas duplas (").

Há muito mais entidades; mas estas quatro são as mais importantes, pois representam caracteres que possuem um significado especial em HTML.

Doctype e comentários

Além das tags, conteúdo de textos e entidades, um documento HTML deve conter uma declaração doctype na primeira linha. A declaração doctype não é uma tag HTML; é uma instrução ao navegador sobre qual versão de HTML está sendo usada para escrever a página.

No padrão HTML 4.01, o doctype refere-se a uma DTD (Definição de Tipo de Conteúdo), já que este padrão foi baseado na SGML. Existem três diferentes declarações doctype em HTML 4.01.

HTML 4.01 Estricto

Esta DTD contém todos os elementos HTML e atributos, mas NÃO INCLUI elementos de apresentação ou elementos obsoletos (como font). Conjunto de frames não são permitidos.

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

HTML 4.01 de Transição

Esta DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação ou obsoletos (como font). Conjuntos de frames não são permitidos.

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

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

No HTML 5, há apenas uma declaração que é escrita assim:

<!DOCTYPE html>

O doctype tem uma história longa e intrincada, mas, por ora, tudo que tu precisas saber é que este doctype pede ao navegador para interpretar o código HTML e CSS de acordo com os padrões W3C e não fazer de conta que é código para o Internet Explorer dos anos 90. (Ver "quirks mode").

O HTML também possui um mecanismo para embutir comentários que não são exibidos quando a página é renderizada no navegador. Isso é útil para explicar uma seção de marcação, ou deixar notas para outras pessoas que forem trabalhar na página, ou deixar lembretes para si mesmo. Comentários em HTML são delimitados por símbolos na seguinte forma:

<!-- Esse texto é um comentário -->

Um documento pequeno, porém completo

Para mostrar tudo isso junto, eis um pequeno exemplo de um documento HTML. Tu podes copiar este código em um editor de textos, salvá-lo como meu_primeiro_documento.html e abri-lo em um navegador. Tenha certeza de salvá-lo usando a codificação de caracteres UTF-8. Como este documento não usa estilos, parecerá um bocado simples, mas saiba que é apenas um simplório começo.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <title>Um pequeno documento</title>
</head>
<body>
  <h1>Cabeçalho principal do meu documento</h1>
  <!-- Note que isso é um "h" + o número "um", não "h" + a letra "éle" -->
  <p>Vejam! Estou escrevendo código <abbr title="Linguagem de Marcação de Hipertexto">HTML</abbr>!</p>
</body>
</html>