Introdução a Linguagens de Marcação: HTML, XHTML, SGML, XML

Prof. Célio Guimarães
Instituto de Computação - Unicamp

Atualizado em 06-Jun-05.

O objetivo deste resumo é apresentar alguns conceitos básicos  e a terminologia comum  usados na descrição dessas quatro importantes linguagens de marcação , a fim de facilitar ao leitor o estudo mais detalhado dos ótimos tutoriais que existem na Internet e incluídos na página da disciplina.

HTML (Hypertext Markup Language)  é uma Linguagem de Marcação ("Markup Language")  voltada para:

HTML é derivada da linguagem pioneira de marcação   SGML (Standard Generalized Markup Language) e foi criada por Tim Berners Lee (o idealizador da WWW) específicamente para a composição e apresentação de documentos na Web. A evolução cronológica dessas linguagens foi a seguinte:

SGML → HTML 1.0 → HTML xx → XML → HTML 4.01 → XHTML.

Um documento estruturado  é composto por conteúdo (texto, figuras, etc) e informação sobre o papel do conteúdo no documento, ou seja, como êle está estruturado. Por exemplo: um artigo técnico é usualmente composto por um "título", "autores", "resumo", diversas "seções" e uma "bibliografia", nesta ordem. Cada um dos componentes (ou "elementos") indicados entre aspas acima, representa uma  parte estrutural do documento.

Um documento estruturado  pode ser apresentado ao usuário de diferentes formas, por exemplo, numa impressão em papel, na tela de um navegador com janelas gráficas (Windows, XWindows, etc), na tela simplificada de um notebook ou de um telefone celular ou até em algum equipamento multimídia. Pode também ser enviado para processamento por algum software especializado como um Gerenciador de Banco de Dados.

Os requisitos para estruturação de um documento são ortogonais aos requisitos necessários para sua apresentação. Este é um dos principais problemas da linguagem HTML onde ambos estão misturados e que recentemente foi atacado em duas frentes:

É importante lembrar que HTML, XHTML, XML e SGML são padrões internacionais originados na www.org, sancionados pelas organizações ANSI e ISO, e, portanto, independentes de fabricantes de hardware ou software.

Estrutura de documentos HTML

Um documento HTML é um conjunto (mais precisamente uma hierarquia) de   elementos :
Um elemento é demarcado (usualmente) por 2 tags:

Conteúdo de um elemento: Elementos sem conteúdo e sem tag final são ditos "elementos vazios". Por exemplo: <br>, <hr>, <img>
Tais elementos tornam complexa a análise sintática de um documento HTML por parte do browser. Por esta razão em XHTML êles devem conter o tag final seja na forma compacta: <br /> ou explícitamente: <br></br>.

Atributo: um atributo define uma característica ou propriedade de um elemento; é sempre incluído no tag inicial de um elemento, usando a sintaxe: nome_do_ atributo="valor".
Um elemento pode ter vários atributos, separados por espaço(s) em branco. Ao contrário de HTML, em XHTML todo atributo deve ter um valor, mesmo que seja vazio ("") e o valor deve ser sempre delimitado por aspas duplas. Por exemplo: 

<img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="left">

Entidade: uma entidade é um nome associado a alguma parte do documento (ou de um outro documento).

Uma entidade tem papel semelhante a uma macro que quando "referenciada" tem o seu nome substituído pelo texto que a define.
A "referência a uma entidade" ("entity reference") obedece à notação:  &nome-da-entidade;

Entidades podem ser "internas" ou "externas" ao documento. HTML só suporta entidades internas predefinidas. Elas servem para nomear caracteres especiais, geralmente usados para marcação no texto HTML como: 

"<",  ">",  "&",  "
e que são inseridos como conteúdo respectivamente, pelas referências: 
&lt;  &gt;  &amp;  &quot;

Há várias outras entidades em HTML.
As adaptações necessárias para transformar um documento em HTML 4.01 para um documento XHTML são pequenas e podem ser vistas neste guia sucinto para XHTML.

Histórico da linguagem SGML

SGML foi criada no final da década de 60 pelos pesquisadores da IBM C. Goldfarb, E. Mosher e R. Lorie, com o objetivo de construir um sistema portável (i.é, independente de sistema operacional, formatos de arquivos, etc) para o intercâmbio e manipulação de documentos. Eles optaram por um sistema de "Marcação Generalizada" (Generalized Markup), com dois objetivos básicos:

Em outras palavras, "marcação generalizada não restringe documentos a uma única aplicação, estilo de formatação ou sistema de processamento". Esta quotação foi retirada diretamente da citada referência, "Introduction to Generalized Markup". Desde a sua concepção, portanto, SGML foi uma evolução sobre os sistemas vigentes de editoração eletrônica com funções de processamento complexas embutidas na marcação do documento (e que foram denominados por Goldfarb de sistemas de marcação procedural; o exemplo clássico de um sistema desse tipo é o sistema de preparação de textos matemáticos TeX, desenvolvido por D. Knuth no final da década de 70).

É interessante observar que SGML surgiu aproximadamente na mesma época da Internet e do sistema Unix, e, portanto, muito antes do uso generalizado dessas duas tecnologias.

Goldfarb provou em 1974 que um analisador sintático (parser) é capaz de validar um documento SGML sem realmente processá-lo. Em 1986 SGML tornou-se um padrão internacional e foi adotada por várias empresas de porte como padrão para intercâmbio e armazenamento de documentos. Duas linguagens de marcação baseadas em SGML e largamente utilizadas são: DocBook (projetada para marcação de documentação técnica) e TEI - Text Encoding Initiative (projetada para marcação de textos literários).

Como SGML não possui um conjunto pre-definido de tags e de elementos, ela é na verdade uma meta-linguagem para descrever (mais precisamente especificar) linguagens de marcação. Ela não possui uma semântica pre-definida.

A sintaxe de uma linguagem específica de marcação definida através de SGML é especificada através de construções coletadas num documento denominado DTD (Document Type Definition)(ou incluídas diretamente no documento SGML), onde aparecem "declarações de elementos", que especificam para cada elemento da linguagem todas as possiveis marcações válidas para o elemento, como por exemplo, a ordem e obrigatoriedade de elementos num documento, quantidade,etc, e declarações de atributos, que especificam, por exemplo, tipos de valores de atributos, valores default, etc.

O DTD define, portanto, uma gramática para a linguagem de marcação do documento. A declaração de um elemento e de seus atributos no DTD utiliza a notação gramatical EBNF  (Extended Backus-Naur Form) que é bastante críptica para não especialistas em linguagens de programação e compiladores.

Uma curiosidade histórica:

Embora a definição de um documento usando tags iniciais e finais para cada elemento seja uma forma rigorosa e direta de compor um documento como uma herarquia de elementos (árvore), no trabalho citado,Goldfarb comenta: "caso o usuário tenha que digitar todos os tags, o preço seria totalmente inaceitável, pois, conhecendo a estrutura do documento (formalmente definida através do DTD), é possivel eliminar um grande número de tags finais". "Ele (usuário) relutaria em incorrer no trabalho e custo de entrar um tag final explícito para cada elemento, simplesmente para compartilhar seu conhecimento com o sistema"
O trabalho cita como exemplo, a descrição de um elemento  figura, composto dos elementos corpo da figura e título (caption) da figura que poderia ser expressa em SGML assim: 

<fig id=angelfig>
  <figbody>
    <artwork depth=24p>
    </artwork>
  </figbody>
  <figcap>Three Angels Dancing
  </figcap>
</fig>
Após a apresentação do DTD para este documento, o trabalho propõe a seguinte descrição para o elemento figura, "com 40% de redução na marcação": 
<fig id=angelfig>
  <figbody>
    <artwork depth=24p>
  <figcap>Three Angels Dancing
</fig>
Não é de estranhar portanto, que HTML, diretamente inspirada em SGML, tenha excluído tags finais de um número razoável de seus elementos.

Todo documento SGML deve possuir um DTD (que define a sua gramática) de forma que o documento possa ser validado por um analisador sintático (parser). Um documento SGML é dito "válido" quando obedece às regras do seu DTD (esta definição se estendeu posteriormente para XML). DTDs serão exemplificados a seguir quando descrevermos XML.

XML - origem, objetivos, conceitos básicos

XML (Extensible Markup Language) é uma meta-linguagem de marcação criada a partir de SGML (é uma forma restrita de SGML), com os seguintes objetivos básicos: XML não possui um conjunto pre-definido de tags ou elementos. Por isto, como SGML, XML é uma meta-linguagem para descrição de linguagens de marcação: num documento XML, tags (mais precisamente elementos), para definir o significado dos dados, podem ser definidos livremente de acordo com o domínio dos dados e da aplicação.
XML não provê mecanismos para apresentação de dados nem para ligação entre documentos. Tais recursos são disponibilizados por outras especificações de linguagens como, por exemplo, XSL (Extensible Style Language) para estilos, e Xlink para especificação de links entre documentos.
XML tornou-se um padrão internacional em 1998. Desde então várias linguagens de marcação seguindo o padrão XML foram criadas e estão sendo padronizadas no âmbito da w3.org. Recentemente, pequenas adaptações a HTML 4.01 para seguir os requisitos de XML, deram origem à linguagem XHTML.

Ao contrário de SGML, XML não requer um DTD para cada documento (embora seja altamente desejável, já que o DTD define uma gramática para os elementos e atributos do documento). A análise sintática para validação de documentos SGML pode ser muito complexa e foi uma das principais razões para XML adotar e exigir a forma mais simples e verbosa de aninhamento completo e explícito de todos os elementos de um documento XML, além de requisitos rígidos para definição de valores de atributos, etc. Nesse caso o documento é dito "bem formado" (well formed) e requisitos para isto estão detalhados na especificação XML 1.0 e um resumo pode ser visto no documento anexo sobre XHTML.
Se o documento XML possui um DTD associado (ou incluído no próprio documento, conforme veremos) e segue a gramática especificada pelo DTD, então êle é dito válido. A validação de um documento garante que os dados esejam completos, colocados na ordem correta no documento e com os valores apropriados dos atributos. Vários pacotes de software livres estão sendo disponibilizados para verificar a boa formação e a "validação" de documentos XML.

Composição de um documento XML

Um documento XML é composto pelos seguintes tipos de marcação (a maioria deles também é suportada por HTML e XHTML):

Um exemplo de documento XML com seu DTD embutido

Este exemplo foi adaptado deste tutorial XML da IBM e descreve um documento para um "livro de endereços" (AddressBook) que contém um ou mais elementos "pessoa" (person), onde cada pessoa possui um nome (name) e um endereço de correio eletrônico (email). Por sua vez o nome da pessoa é composto do sobrenome (family) e do pre-nome (given).
Observe que o DTD do documento começa com a marcação <!DOCTYPE e termina com a marcação ]>. Este DTD poderia estar num arquivo externo, digamos,"ab.dtd" (pode inclusive ser referenciado através de uma URL) e neste caso o DOCTYPE seria incluído logo após a primeira linha com o formato:
<!DOCTYPE addressBook SYSTEM "ab.dtd" >  ou, por exemplo:
<!DOCTYPE addressBook SYSTEM "http://www.networking.ibm.com/xml/ab.dtd">
A raiz do documento é o elemento: <addressBook>
As linhas iniciais estão numeradas apenas para facilitar a explicação a seguir. 


1.<?xml version="1.0" encoding="iso-8859-1"?>
2.<!DOCTYPE addressBook [
3.<!ELEMENT addressBook (person)+>
4.<!ELEMENT person (name,email*)>
5.<!ATTLIST person gender (male|female) #IMPLIED>
6.<!ELEMENT name (family,given)>
7.<!ELEMENT family (#PCDATA)>
8.<!ELEMENT given (#PCDATA)>
9.<!ELEMENT email (#PCDATA)>
10.]>
<addressBook>
  <person gender="male">
    <name>
      <family>Wallace</family> <given>Bob</given>
    </name>
    <email>bwallace@megacorp.com</email>
  </person>

  <person gender="female">
    <name>
      <family>Tuttle</family> <given>Claire</given>
    </name>
    <email>ctuttle@megacorp.com</email>
  </person>
</addressBook>
A parte XML do documento é auto-explicativa e mostra o aninhamento apropriado dos elementos. Observe que a indentação aumenta a legibilidade do documento. Vamos explicar agora o DTD correspondente (maiores detalhes podem ser vistos no tutorial recomendado. V. pode inclusive validar seus documentos XML nesse "site").
linha 2:
o nome após DOCTYPE deve ser o nome do elemento raiz, no caso, addressBook.
linha 3:
o elemento addressBook deve conter um ou mais sublementos person (indicado pelo símbolo +)
linha 4:
o elemento person deve ter um subelemento name e zero ou mais subelementos email (indicado pelo *), nesta ordem.
linha 5:
o atributo gender do elemento person deve ter um dos dois valores male ou female. #IMPLIED significa que o atributo é opcional. Se fosse obrigatório deveriamos colocar: #REQUIRED. É possivel especificar também que o atributo tem um valor fixo: #FIXED 'valor' ou um valor default.
linha 6:
o elemento name deve ter os dois atributos family e given, nesta ordem;
linhas 7,8 e 9:
os elementos family, given e email são cadeias de caracteres do conjunto de caracteres especificados para o documento.
linha 10:
marcação para fim do DTD.
Observe que entre as linhas 2 e 10 não é seguida a sintaxe de elementos XML mas sim a de documentos DTD, que estão no formato EBNF (Extended Backus Naur Form)

Guia sucinto para escrever documentos em XHTML

Abaixo um exemplo de documento minimal seguindo o padrão XHTML. Observe que o elemento raiz html contém os elementos head e body e o elemento head deve obrigatoriamente conter um elemento title: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p>
</body>
</html>

As três classes de documentos XHTML

Elementos descontinuados do padrão XHTML:

Valid XHTML 1.0!