Introdução ao HTML

Ao se deparar com uma página da Web no navegador, o que você vê, 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 você vê e lê contém características de estilo. Os projetistas de modernas páginas da Web possuem acesso a centenas de fontes diferentes, diversos tamanhos de fonte, muitas cores e mesmo vários alfabetos (e.g. espanhol, japonês, russo). 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, linques clicáveis para produtos ou outras páginas no mesmo sítio, ou linques para páginas de outros sítios. Alguns sítios da Web fornecem mesmo opções para a personalização da exibição da página de modo a acomodar preferências pessoais ou deficiências como limitação visual, surdez ou daltonismo. Uma página contém frequentemente 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á a HTML (HyperText Markup Language ou, em português,Linguagem de Marcação de HiperTexto). Sem HTML não haveria página da Web alguma. HTML é o que o navegador "lê" para apresentar a página ao usuário em frente ao computador. As especificações e padrões da HTML são geridas pelo World Wide Web Consortium (W3C) e pelo Web Hypertext Application Technology Working Group (WHATWG). O WHATWG considera a 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 leiaute 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 da HTML, para definir a apresentação.

Este artigo fornece uma introdução à HTML. Se você já se perguntou 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 da HTML

No final dos anos 80, Tim Berners-Lee trabalhava como físico no CERN (a Organização Européia de Pesquisa Nuclear) 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 à texto puro, usando tecnologias como email, FTP (Protocolo de Transferência de Arquivos) e fóruns de discussão baseados na Usenet. A invenção da 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. A HTML distingue 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). A 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 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 da 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 que indicam 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, isso 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 arquivo 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 avança com maiores detalhes sobre os conceitos introduzidos nesta seção. No entanto, se você quiser ver a HTML em ação, faça uso do Mozilla Thimble, um editor on-line interativo que auxilia você 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

A 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 é uma parte 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 muito simples, mas completa, se parece com isso:

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

Como você pode ver, o elemento <html> cerca o resto do documento, e o elemento <body> cerca o conteúdo da página. 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 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 Notepad, Notepad++ ou Sublime Text, muito embora a maioria dos produtores de HTML prefiram usar um editor especializado que destaque a sintaxe e mostre o DOM. Nomes de tags podem ser escritos tanto em com letras maiúsculas como 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 à 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 você esquecer de finalizá-las.

Eis aqui um exemplo simples:

<p>Isso é 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 també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 corretamente 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 ele está aninhado.

Alguns elementos não contém qualquer texto ou 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 da 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 em 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 aspas simples (') como 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, isso provavelmente não significa o que você acha que significa.)

Neste exemplo, o valor deveria ser "foo bar", mas como não se usou aspas no código, é interpretado como se fôsse:

<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 tem um significado 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 referência ao 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 Estrito

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 você precisa 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").

A HTML também possui um mecanismo para embutir comentários que não são exibidos quando a página é renderizada em um 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. Você pode copiar este código em um editor de textos, salvá-lo como meuprimeirodocumento.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-BR">
<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>