7 A estrutura global dun documento HTML

Índice

  1. Introdución à estrutura dun documento HTML
  2. Información sobre a versión de HTML
  3. O elemento HTML
  4. O cabezallo do documento
    1. O elemento HEAD
    2. O elemento TITLE
    3. O atributo title
    4. Dados META
  5. O corpo do documento
    1. O elemento BODY
    2. Identificadores de elementos: os atributos id e class
    3. Elementos de nível de bloco e de liña
    4. Agrupamento de elementos: os elementos DIV e SPAN
    5. Títulos: os elementos H1, H2 , H3, H4 , H5, H6
    6. O elemento ADDRESS

7.1 Introdución à estrutura dun documento HTML

Un documento HTML 4 compon-se de tres partes:

  1. unha liña que contén Información sobre a versión de HTML ,
  2. unha sección de cabezallo declarativa (delimitada polo elemento HEAD ),
  3. un corpo, que contén os conteúdos efectivos do documento. O corpo pode-se implementar co elemento BODY ou co elemento FRAMESET .

Poden aparecer espazos en branco (espazos, saltos de liña, tabuladores e comentários) antes ou depóis de cada sección. As seccións 2 e 3 deberian-se delimintar co elemento HTML .

Velaqui un exemplo dun documento HTML simples:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>O meu primeiro documento HTML</TITLE>
</HEAD>
<BODY>
<P>Olá mundo!
</BODY>
</HTML>

7.2 Información sobre a versión de HTML

Un documento HTML válido declara que versión de HTML se usa no documento. A declaración de tipo de documento nomea a definición do tipo de documento (DTD) en uso no documento (ver [ISO8879] ).

A HTML 4.01 especifica tres DTD, de xeito que os autores deben incluir unha das seguintes declaracións do tipo de documento nos seus documentos. As DTDs varian nos elementos que aceitan.

O URI de cada declaración do tipo de documento permite que os axentes de usuário baixen a DTD e os conxuntos de entidades que precisen. Os seguintes URI (relativos) referen-se a DTD e conxuntos de entidades da HTML 4:

A relación entre os identificadores públicos e os ficheiros pode-se especificar usando un ficheiro de catálogo que siga o formato recomendado polo Oasis Open Consortium (ver [OASISOPEN] ). Inclue-se un ficheiro de catálogo de exemplo para HTML 4.01 ao comezo da sección sobre información de referéncia SGML para HTML. As últimas duas letras da declaración indican o idioma da DTD. Para HTML, sempre é inglés ("EN").

Nota. No relativo à versión da HTML 4.01, o Grupo de traballo de HTML compromete-se a seguir as seguintes directrices:

Isto significa que nunha declaración do tipo de documento, os autores poden usar con seguranza un identificador de sistema que faga referéncia à última versión dunha DTD de HTML 4. Os autores tamén poden escoller usar un identificador de sistema que faga referéncia a unha versión específica (caducada) dunha DTD de HTML cando se requira validación para esa DTD en concreto. W3C esforzará-se para facer que os documentos de arquivo permanezan disponíbeis de maneira indefinida no seu enderezo orixinal na sua forma orixinal.

7.3 O elemento HTML

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;) -- elemento raiz do documento -->
<!ATTLIST HTML
%i18n; -- lang, dir --
>

Etiqueta inicial: opcional, Etiqueta final: opcional

Definicións dos atributos

version = cdata [CN]
Desaprovado. O valor deste atributo especifica que versión de DTD de HTML governa o documento actual. Este atributo foi desaprovado por ser redundante coa información sobre a versión que fornece a declaración do tipo de documento.

Atributos que se definen noutro sítio

Após a declaración do tipo de documento, o resto dun documento HTML vai contido no elemento HTML . Asi, un documento HTML típico ten esta estrutura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...O cabezallo, corpo, etc. vai aqui... </HTML>

7.4 O cabezallo do documento

7.4.1 O elemento HEAD

<!-- %head.misc; definido anteriormente como "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- cabezallo do documento -->
<!ATTLIST HEAD
%i18n; -- lang, dir --
profile %URI; #IMPLIED -- dicionário con nome de información META --
>

Etiqueta inicial: opcional, Etiqueta final: opcional

Definicións dos atributos

profile = uri [CT]
Este atributo especifica a localización de un ou máis perfis de dados META, separados por espazos en branco. Para extensións futuras, os axentes de usuário deberian considerar que o valor é unha lista mesmo se esta especificación só considera o primeiro URI como significante. Tratan-se os perfis máis abaixo, na sección sobre dados META .

Atributos que se definen noutro sítio

O elemento HEAD contén información sobre o documento actual tal e como o título, palabras chave que lles poden resultar úteis aos motores de pesquisa e outros dados que non se consideran conteúdo do documento. Os axentes de usuário normalmente non mostran os elementos que aparecen en HEAD como conteúdo. Poden, porén, facilitar a información do HEAD através doutros mecanismos.

7.4.2 O elemento TITLE

<!-- O elemento TITLE non se considera parte do fluxo do texto.
Deberia-se mostrar, por exemplo, como título da páxina ou
título da xanela. Require-se exactamente un por documento.
-->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- título do documento -->
<!ATTLIST TITLE %i18n>

Etiqueta inicial: requerida, Etiqueta final: requerida

Atributos que se definen noutro sítio

Todo documento HTML debe ter un elemento TITLE na sección HEAD .

Os autores deberian usar o elemento TITLE para identificar os conteúdos dun documento. Dado que os usuários con frecuéncia consultan os documentos fora de contexto , os autores deberian fornecer títulos ricos en contexto. Asi, en vez dun título como "Introdución", que non fornece moito fondo contextual, os autores deberian fornecer un título como "Introdución à apicultura medieval" no seu lugar.

Por motivos de acesibilidade, os axentes de usuários deben facer que o conteúdo do elemento TITLE estexa sempre disponíbel para os usuários (incluídos os elementos TITLE que aparecen en molduras). O mecanismo para levá-lo a cabo dependo do axente de usuário (p.ex.: un texto, falado).

Os títulos poden conter entidades de caracteres (para caracteres acentuados, caracteres especiais, etc.), mais non poden conter outro código (incluídos comentários). Velaqui un título de documento de exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un estudo de dinámica de populacións</TITLE>
... outros elementos do cabezallo ... </HEAD> <BODY> ... corpo do documento ... </BODY> </HTML>

7.4.3 O atributo title

Definicións dos atributos

title = text [CS]
Este atributo oferece información consultiva sobre o elemento co que se usa.

Ao contrário do elemento TITLE , que fornece información sobre todo o documento e só pode aparecer unha vez, o atributo title pode anotar calquer cantidade de elementos. Consulte a definición dun elemento para comprobar que aceita este atributo.

Os valores do atributo title poden ser mostrados polos axentes de usuário de maneiras diferentes. Por exemplo, os navegadores visuais con frecuéncia mostran o título como unha "suxestión de ferramenta" (mensaxe corta que aparece cando o mecanismo apontador se detén sobre un obxecto. Os axentes de usuário auditivos poden ler a información do título nun contexto semellante. Por exemplo, colocar o atributo nun vínculo permite que os axentes de usuário (visuais e non visuais) lle expliquen aos usuários a natureza do recurso vinculado:un

...texto... 
Velaqui unha foto <A href="http://unsitio.com/tremendo.gif" title="Eu facendo submarinismo"> miña facendo submarinismo durante o verao. </A> ...máis texto...

O atributo title desempeña un papel adicional cando se usa co elemento LINK para designar unha  folla de estilo externa . Consulte a sección sobre vínculos e follas de estilo para máis detalles.

Nota. Para mellorar a calidade dos sintetizadores de voz para os casos en que se tratan mal coas técnicas padrón, as versións futuras da HTML poderán incluir un atributo para codificar información fonémica e prosódica.

7.4.4 Os dados META

Nota. O Marco de descricións de recursos do W3C  (ver [RDF10] ) converteu-se nunha Recomendación do W3C en febreiro de 1999. O RDF permite que os autores especifiquen datos META sobre os documentos HTML e outros recursos acesíbeis através dunha rede para que os poidan ler as máquinas.

A HTML permite que os autores especifiquen dados meta (informacións sobre un documento a parte do conteúdo do documento) de várias maneiras.  

Por exemplo, para especificar o autor dun documento, pode-se usar o elemento META como segue:

<META name="Author" content="Dave Raggett">

O elemento META especifica unha propriedade (aqui "Author", autor) e asigna-lle un valor (aqui "Dave Raggett").

Esta especificación non define un conxunto de propriedades legais dos dados meta. O significado nunha propriedade e o conxunto de valores legais para esa propriedade deberia-se definir nun léxico de referéncia chamado perfil . Por exemplo, un perfil designado para axudar-lles aos motores de pesquisa a indexar documentos poderia definir propriedades tais como "autor", "copyright", "palabras-chave", etc.

Especificación dos dados meta 

En xeral, especificar os dados meta implica dous pasos:

  1. Declarar unha propriedade e un valor para esa propriedade. Pode-se facer de duas maneiras:
    1. Desde dentro do documento, co elemento META .
    2. Desde fora do documento, vinculando cos dados meta através do elemento LINK (ver a sección sobre tipos de vínculos ).
  2. Referir-se a un perfil no que se definan a propriedade e os seus valores legais. Para designar un perfil, use-se o atributo profile do elemento HEAD .

Observe-se que, dado que se define un perfil para o elemento HEAD , o mesmo perfil se aplica a todos os elementos META e LINK do cabezallo do documento.

Non se require que os axentes de usuário aceiten os mecanismos de dados meta. Para os que si os queiran aceitar, esta especificación non define como se deberian interpretar os dados meta.

O elemento META t 

<!ELEMENT META - O EMPTY               -- metainformación xenérica-->
<!ATTLIST META
%i18n; -- lang, dir, para usar co conteúdo --
http-equiv NAME #IMPLIED -- nome do cabezallo de resposta HTTP --
name NAME #IMPLIED -- nome da metainformación --
content CDATA #REQUIRED -- información asociada --
scheme CDATA #IMPLIED -- forma seleccionada do conteúdo --
>

Etiqueta inicial: requerida, Etiqueta final: proibida

Definicións dos atributos

Para os atributos seguintes, os valores permitidos e a sua interpretación dependen do perfil :

name = name [CS]
Este atributo identifica o nome dunha propriedade. Esta especificación non lista os valores legais deste atributo.
content = cdata [CS]
Este atributo especifica o valor dunha propriedade. Esta especificación non lista os valores legais deste atributo.
scheme = cdata [CS]
Este atributo nomea un esquema que se usará para interpretar o valor da propriedade (ver a sección sobre perfis para máis detalles).
http-equiv = name [CI]
Este atributo pode-se usar en lugar do atributo name. Os servidores de HTTP usan este atributo para reunir información para os cabezallos das mensaxes de resposta HTTP. 

Atributos que se definen noutro sítio

O elemento META pode-se usar para identificar as propriedades dun documento (p.ex. autor, data de caducidade, lista de palabras chave, etc) e asignar-lles valores a esas propriedades. Esta especificación non define un conxunto normativo de propriedades.

Cada elemento META especifica un par propriedade/valor. O atributo name identifica a propriedade e o atributo content especifica ao valor da propriedade.

Por exemplo, a declaración seguite dá-lle un valor à propriedade Author:

<META name="Author" content="Dave Raggett">

O atributo lang pode-se usar con META para especificar o idioma do valor do atributo content . Isto permite que os sintetizadores de voz apliquen regras de pronúncia dependentes do idioma.

Neste exemplo, declara-se que o nome do autor é francés:

<META name="Author" lang="fr" content="Arnaud Le Hors">

Nota. O elemento META é un mecanismo xenérico para especificar meta-dados. Porén, alguns elementos e atributos HTML xa usan certos tipos de meta-dados e os autores poden-nos usar en vez de META para especificar eses tipos: o elemento TITLE , o elemento ADDRESS os elementos INS e DEL , o atributo title e o atributo cite .

Nota. Cando unha propriedade especificada cun elemento META toma un valor que é un URI , alguns autores prefiren especificar o meta-dado mediante o elemento LINK . Asi, a seguinte declaración de meta-dados:

<META name="DC.identifier"
content="http://www.ietf.org/rfc/rfc1866.txt">

tamén se poderia escreber:

<LINK rel="DC.identifier"
type="text/plain"
href="http://www.ietf.org/rfc/rfc1866.txt">
META e os cabezallos HTTP

O atributo http-equiv pode-se usar en vez do atributo name e ten unha significación especial cando os documentos se recuperan mediante o Protocolo de transferéncia de hipertexto (HTTP). Os servidores de HTTP poden usar o nome de propriedade especificado co atributo http-equiv para crear un cabezallo de estilo [RFC822] na resposta HTTP. Consulte a especificación ( [RFC2616] ) para máis detalles sobre cabezallos HTTP válidos.

A seguinte declaración META :

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

resultará no cabezallo HTTP:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Isto poden-no usar as cahés para determinar cando coller unha cópia nova do documento do documento asociado.

Nota. Alguns axentes de usuário aceitan o uso de META para refrescar a páxina actual após un número de segundos especificado, coa opción de substituí-lo por un URI diferente. Os autores non deberian usar esta técnica para reenviar os usuários a páxinas diferentes, xa que isto fai a páxina inacesíbel para alguns usuários. No seu luagar, a redirección de páxina automática deberia-se facer usando redireccións do lado do servidor.

META e motores de pesquisa

Un uso frecuente de META é especificar as palabras chave que un motor de pesquisa poida usar para mellorar a calidade dos resultados da procura. Cando vários elementos  META fornecen información dependente do idioma sobre un documento, os motores de pesquisa poden filtrar polo atributo lang para mostrar os resultados da procura usando as preferéncias de idioma do usuário. Por exemplo,

<-- Para falantes de inglés americano -->
<META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<-- Para falantes de inglés británico -->
<META name="keywords" lang="en"
content="holiday, Greece, sunshine">
<-- For falantes de francés -->
<META name="keywords" lang="fr"
content="vacances, Gr&egrave;ce, soleil">

A efectividade de tais motores de pesquisa tamén se pode ver incrementada mediante o uso do elemento LINK para especificar vínculos a traducións do documento noutros idiomas, vínculos a versións do documento noutros médios (p.ex. PDF) e, cando o documento é parte dunha colección, vínculos ao ponto de início adecuado para ollar a colección.

Proporciona-se máis axuda na sección sobre como axudar aos motores de pesquisa a indexar o seu sítio web.

META e PICS
Platforma para a selección de conteúdo de Internet (Platform for Internet Content Selection , PICS, especificada en [PICS] ) é unha infraestrutura para asociar etiquetas (meta-dados) con conteúdo de Internet. Deseñada orixinalmente para axudar aos pais e docentes a controlar o que os nenos poden aceder na Internet, tamén facilita outros usos para as etiquetas, incluída a asinatura do código, privacidade e xestión de direitos da propriedade intelectual.

Este exemplo ilustra como se pode usar unha declaración META para incluir unha etiqueta PICS 1.1:

<HEAD>
<META http-equiv="PICS-Label" content='
(PICS-1.1 "http://www.gcf.org/v2.5"
labels on "1994.11.05T08:15-0500"
until "1995.12.31T23:59-0000"
for "http://w3.org/PICS/Overview.html"
ratings (suds 0.5 density 0 color/hue 1))
'>
<TITLE>... título do documento ...</TITLE>
</HEAD>
META e información por omisión

O elemento META pode-se usar para especificar a información por omisión dun documento nos seguintes casos:

O exemplo seguinte especifica que a codificación de caracteres dun documento é ISO-8859-5

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> 

Perfis dos dados Meta  

O atributo profile de HEAD especifica a localización dun perfil de meta-dados. O valor do atributo profile é un URI. Os axentes de usuário poden usar este URI de duas maneiras:

Este exemplo refire-se a un perfil hipotético que define propriedades úteis para indexar documentos. As propriedades definidas por este perfil - incluídas "author", "copyright", "keywords", e "date" --teñen os seus valores asignados por declaracións META posteriores.

 <HEAD profile="http://www.acme.com/profiles/core">
<TITLE>Como completar portadas de memoranda</TITLE>
<META name="author" content="John Doe">
<META name="copyright" content="&copy; 1997 Acme Corp.">
<META name="keywords" content="corporate,guidelines,cataloging">
<META name="date" content="1994-11-06T08:49:37+00:00">
</HEAD>

No momento de redactar esta especificación, é práctica habitual usar os formatos de datas descritos en [RFC2616] , sección 3.3. Dado que estes formatos son difíceis de procesar, recomendamos que os autores usen o formato de datas [ISO8601] . Para máis información, vexa as seccións sobre os elementos INS e DEL .

O atributo scheme permite que os autores lles fornezan aos axentes de usuário máis contexto para a interpretación correcta dos meta-dados. Às veces, esta información adicional pode ser fundamental, como cando os dados meta se especifican en diferentes formatos. Por exemplo, un autor poderia especificar unha data no formato (ambígüo) "10-9-97"; significa 9 de outubro de 1997 ("americano") ou 10 de setembro de 1997? O valor do atributo scheme   "Month-Day-Year" eliminaria a ambigüidade deste valor de data.

Outras veces, o atributo scheme pode fornecer-lles información útil mais non fundamental aos axentes de usuário.

Por exemplo, a declaración scheme seguinte pode axudar-lle a un axente de usuário a determinar que o valor da propriedade "identifier" é un número do código ISBN:

<META scheme="ISBN"  name="identifier" content="0-8230-2355-9">

Os valores do atributo scheme dependen do nome da propriedade e o  perfil asociado.

Nota. Un perfil de exemplo é o Dublin Core ("Núcleo Dublin", ver [DCORE] ). Este perfil define un conxunto de propriedades recomendadas para descricións bibliográficas electrónicas e pretende-se que forneza a interoperatibilidade entre modelos de descrición díspares.

7.5 O corpo do documento

7.5.1 O elemento BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corpo do documento -->
<!ATTLIST BODY
%attrs; -- %coreattrs, %i18n, %events --
onload %Script; #IMPLIED -- o documento carregou-se --
onunload %Script; #IMPLIED -- o documento eliminou-se --
>

Etiqueta inicial: opcional , Etiqueta final: opcional

Definicións dos atributos

background = uri [CT]
Desaprovado. O valor deste atributo é un URI que indica unha fonte de imaxe. A imaxe habitualmente ocupa o fondo en mosaico (nos navegadores visuais).
text = color [CI]
Desaprovado. Este atributo indica a cor do texto (nos navegadores visuais).
link = color [CI]
Desaprovado. Este atributo indica a cor do texto que sinala vínculos de hipertexto non visitados (nos navegadores visuais).
vlink = color [CI]
Desaprovado. Este atributo indica a cor do texto que sinala vínculos de hipertexto visitados (nos navegadores visuais).
alink = color [CI]
Desaprovado. Este atributo indica a cor do texto que sinala vínculos seleccionados polo usuário (nos navegadores visuais).

Atributos que se definen noutro sítio

O corpo dun documento contén o conteúdo dun documento. O conteúdo pode ser representado por un axente de usuário de vários modos. Por exemplo, nos navegadores visuais, pode-se pensar o corpo como unha tela sobre a que aparece o conteúdo: texto, imaxes, cores, gráficos, etc. Nos axentes de usuário sonoros, os mesmos conteúdos poden ser falados. Dado que agora as follas de estilo son a maneira preferida de especificar a apresentación dun documento, os atributos de representación BODY están desaprovados .

EXEMPLO DESAPROVADO:
O fragmento de HTML seguinte ilustra o uso dos atributos desaprovados . Indica que a cor de fondo da tela é branca, a cor do texto  negra e a cor dos vínculos vermellos nun princípio, fúcsia cando se activan e marrón cando xa se visitaron.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Estudo de dinámica de populacións</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... corpo do documento... </BODY> </HTML>

Usando  follas de estilo , lograria-se o mesmo efecto deste xeito:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Estudoo de dinámica de populacións</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... corpo do documento... </BODY> </HTML>

O uso de follas de estilo externas (vinculadas) oferece-lle a flexibilidade de modificar a apresentación sen revisar o código do documento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Estudo de dinámica de populacións</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
... corpo do documento... </BODY> </HTML>

Molduras e corpos HTML. Os documentos que conteñen molduras substituen o elemento BODY polo elemento FRAMESET . Consulte a sección sobre molduras para máis información.

7.5.2 Identificadores de elementos: os atributos id e class

Definicións dos atributos

id = name [CS]
Este atributo asigna-lle un nome a un elemento. Este nome debe ser único no documento.
class = cdata-list [CS]
Este atributo asigna-lle un nome de clase ou conxunto de nomes de clase a un elemento. Pode-se-lle asignar o mesmo nome ou nomes de clase a calquer número de elementos. Vários nomes de clase deben estar separados con espazos en branco.
O atributo id asigna-lle un identificador único a un elemento (que pode ser verificado cun procesador de SGML). Por exemplo, os parágrafos seguintes distinguen-se polos seus valores id :
<P id="omeuparagrafo"> Este é un parágrafo cun nome único.</P>
<P id="oteuparagrafo"> Este e tamén un parágrafo cun nome único.</P>

O atributo id cumpre vários papéis en HTML:

O atributo class , por outra parte, asigna-lle un ou máis nomes de clase a un elemento; pode-se dicer que o elemento pertence a estas clases. Pode-se compartillar un nome de clase entre vários usos dun elemento. O atributo class ten vários papéis en HTML:

No exemplo seguinte, o elemento SPAN usa-se en conxunción cos atributos id e class para etiquetar mensaxes do documento. As mensaxes aparecen tanto en versión inglesa como galega.

<!-- Mensaxes en inglés -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="aviso" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="erro" lang="en">Bad syntax for variable name</SPAN>
<!-- Mensaxes en galego -->
<P><SPAN id="msg1" class="info" lang="gl">Vari&aacute;bel declarada duas veces</SPAN>
<P><SPAN id="msg2" class="aviso" lang="gl">Vari&aacute;bel sen declarar</SPAN>
<P><SPAN id="msg3" class="erro" lang="gl">Sintaxe err&oacute;nea no nome da vari&aacute;bel</SPAN>

As regras de estilo CSS seguintes dirian-lles aos axentes de usuário que mostrasen información adicional en verde, mensaxes de aviso en amarelo e mensaxes de erro en vermello:

SPAN.info    { color: green }
SPAN.aviso { color: yellow }
SPAN.erro { color: red }

Observe-se que o "msg1" galego e o "msg1" inglés non poden aparecer no mesmo documento, xa que compartillan o mesmo valor id value. Os autores poden tamén usar o atributo id para refinar a apresentación de mensaxes individuais, facer deles áncoras de destino, etc.

Pode-se-lle asignar un identificador e información de clase a case todos os elementos de HTML.

Supoña, por exemplo, que estamos a escreber un documento sobre unha linguaxe de programacion. O documento incluirá moitos exemplos pré-formatados. Usamos o elemento PRE para formatar os exemplos. Tamén lle asignamos unha cor de fondo (verde) a todos os casos de elemento PRE pertencente à clase "exemplo".

<HEAD>
<TITLE>... título do documento ...</TITLE>
<STYLE type="text/css">
PRE.examplo { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="examplo" id="examplo-1">
...código de exemplo aqui... </PRE> </BODY>

Ao indicar o atributo id para este exemplo, podemos (1) crear un hipervínculo a el e (2) anular a información de estilo de clase con información de estilo do elemento.

Nota. O atributo id compartilla o mesmo espazo que o atributo name cando se usa para nomes de áncoras. Consulte a sección sobre áncoras con id para máis información.

7.5.3 Elementos de nível de bloco e de liña

Di-se de certos elementos HTML que poden aparecer en  BODY que son de "nível de bloco" mentres que outros son "de liña" (tamén coñecidos como "nível do texto"). A distinción basea-se en várias ideas:

Modelo de conteúdo
Habitualmente, os elementos de nível de bloco poden conter elementos de liña e outros elementos de nível de bloco. Habitualmente, os elementos de liña poden conter só dados e outros elementos de liña. Inerente a esta distinción estrutural está a idea de que os elementos de bloco crean estruturas "mais grandes" que os elementos de liña.
Formatado
Por omisión, os elementos de nível de bloco se formatan de maneira diferente que os elementos de liña. Habitualmente, os elementos de nível de bloco comezan en liñas novas, os elementos de liña non. Para información sobre espazo en branco, saltos de liña e formatado de blocos, consulte a sección sobre o  texto .
Direccionalidade
Por razóns técnicas relacionadas co algoritmo de texto bidireccional [UNICODE] os elementos de nível de bloco e de liña difiren na maneira en que herdan a información sobre a direccionalidade. Para máis detalles, vexa a sección sobre herdanza da dirección do texto .

As follas de estilo fornecen o meio para especificar a representación de elementos arbitrários, incluído se se há de mostrar un elemento como bloco ou na liña. Nalguns casos, tais e como o estilo na liña de elementos dunha lista, isto pode ser apropriado, mais en xeral, desaconsella-se que os autores anulen a interpretación convencional dos elementos HTML deste xeito.

A alteración das peculiaridades de apresentación tradicionais dos elementos de nível de bloco e de liña tamén ten o seu impacto no algoritmo de texto bidireccional.Vexa a sección sobre o efecto das follas de estilo na bidireccionalidade para máis información.

7.5.4 Agrupamento de elementos: os elementos DIV e SPAN

<!ELEMENT DIV - - (%flow;)*            -- contentor xenérico de idioma/estilo -->
<!ATTLIST DIV
%attrs; -- %coreattrs, %i18n, %events --
>
<!ELEMENT SPAN - - (%inline;)* -- contentor xenérico de idioma/estilo -->
<!ATTLIST SPAN
%attrs; -- %coreattrs, %i18n, %events --
>

Etiqueta inicial: requerida, Etiqueta final: requerida

Atributos que se definen noutro sítio

Os elementos DIV e SPAN , en conxunción cos atributos id e class , oferecen un mecanismo xenérico para adicionar estrutura aos documentos. Estes elementos definen o conteúdo como na liña ( SPAN ) ou de nível de bloco ( DIV ) mais non impoñen outras peculiariades representacionais no conteúdo. Asi, os autores poden usar estes elementos en conxunción con follas de estilo , o atribuo lang , etc. para acomodar a HTML às suas próprias necesidades e gostos. 

Supoña, por exemplo, que queremos xerar un documento HTML baseado nun banco de dados de información de clientes. Dado que a HTML non inclui elementos que identifiquen obxectos tais como "cliente" "número de teléfono", "enderezo electrónico", etc., usamos DIV e SPAN para conseguir os efectos estruturais e representativos desexados. Poderiamos usar o elemento TABLE como segue para estruturar a información:

<!-- Exemplo de dados do banco de dados de clientes: -->
<!-- Nome: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="cliente">
<P><SPAN class="cliente-titulo">Client information:</SPAN>
<TABLE class="cliente-dados">
<TR><TH>Apelidos:<TD>Boyera</TR>
<TR><TH>Nome:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="cliente">
<P><SPAN class="client-titulo">Client information:</SPAN>
<TABLE class="cliente-dados">
<TR><TH>Apelids:<TD>Lafon</TR>
<TR><TH>Nome:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Máis tarde podemos adicionar declaracións de follas de estilo con facilidade para afinar a apresentación destas entradas de banco de dados.

Para outro exemplo de uso, consulte o exemplo na sección sobre os atributos class e id .

Os axentes visuais normalmente colocan un salto de liña antes e depóis dos elementos DIV , por exemplo:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

que normalmente se mostra asi:

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Títulos: Os elementos H1 , H2 , H3 , H4 , H5 , H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
Hai seis níveis de títulos, desde H1 (o máis importante)
a H6 (o menos importante).
-->

<!ELEMENT (%heading;) - - (%inline;)* -- título -->
<!ATTLIST (%heading;)
%attrs; -- %coreattrs, %i18n, %events --
>

Etiqueta inicial: requerida, Etiqueta final: requerida

Atributos que se definen noutro sítio

Un elemento título descrebe brevemente o tema da sección que introduce. A información de título poden-na usar os axentes de usuário, por exemplo, para construir un índice dun documento automaticamente.

Hai seis níveis de títulos en HTML, sendo H1 o máis importante e H6 o menos. Os axentes de usuário normalmente mostran os títulos máis importantes en tamaños de letra máis grandes que os menos importantes.

O exemplo seguinte mostra como usar o elemento DIV para asociar un título coa sección do documento que lle segue. Facé-lo permite definir un estilo para a sección (cor do fondo, tipo de letra, etc.) con follas de estilo.

<DIV class="seccion" id="elefantes-da-selva" >
<H1>Elefantes da selva</H1>
<P>Nesta sección, trataremos os pouco coñecidos elefantes da selva.
...esta sección continua... <DIV class="subseccion" id="habitat-da-selva" > <H2>Hábitat</H2> <P>Os elefantes da selva non viven nas árvores, senon nelas. ...esta sub-sección continua... </DIV> </DIV>

Esta estrutura pode ir decorada con información de estilo tal e como:

<HEAD>
<TITLE>... título do documento ...</TITLE>
<STYLE type="text/css">
DIV.seccion { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Seccións numeradas e referéncias
A HTML non fai que se xeren  números de sección dos cabezallos. Esta facilidade poden-na oferecer, porén, os axentes de usuário. Pronto, as linguaxes de follas de estilo como CSS permitiran-lle aos autores controlar a xeración de números de sección (úteis, para referéncias para diante nos documentos impresos, como en "Vexa a sección 7.2"). 

Algunha xente considera que saltar os níveis de títulos é unha má prática. Aceitan H1 H2 H1 mais non aceitan H1 H3 H1 xa que se salta o nível de tíulo H2.

7.5.6 O elemento ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- información sobre o autor -->
<!ATTLIST ADDRESS
%attrs; -- %coreattrs, %i18n, %events --
>

Etiqueta inicial: requerida, Etiqueta final: requerida

Atributos que se definen noutro sítio

O elemento ADDRESS pode ser usado polos autores para fornecer información de contacto ou parte importante dun documento como un formulário. Este elemento aparece con frecuéncia ao comezo ou o final do documento.

Por exemplo, unha páxina no sítio web do W3C relacionada con HTML poderia incluir a seguinte información de contacto:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
persoas de contacto para a <A href="Activity">Actividade da W3C HTML</A><BR>
$Date: 1999/12/24 23:07:14 $
</ADDRESS>