D27: XHTML i CSS. Introducció als estàndards i accessibilitat web

Regles per a la validació correcta de la sintaxi del llenguatge XHTML

Hi ha una sèrie de regles que un document XHTML ha de complir sempre per ser un document vàlid. És molt important tenir-les presents. Són les següents:

Un document XHTML requereix una declaració del tipus de document per a ser correctament interpretat pels navegadors, i, per tant, susceptible de ser validat.

Aquesta declaració es coneix com a DTD i apareix al pròleg del document dins la clàusula del tipus de document (<!DOCTYPE> ), i seria com un tipus especial de regla gramatical i de sintaxi que quasevol dodument basat en XHTML ha de respectar.

La declaració del DTD ha de ser sempre la primera línia del document XHTML i el seu contingut ha de ser el següent:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
Sense aquesta declaració un document XHTML no és vàlid, ja que el navegador o dispositiu desconeixerà quines són les regles que l'han d'ajudar a interpretar-lo correctament.
Un document XHTML ha de tenir totes les etiquetes, atributs i valors en minúscules. Per exemple s'haurà de posar <body> enlloc de <BODY>, o <h2> enlloc de <H2>, i per tant, per exemple, <table>, <Table> i <TABLE> seran interpretats com a elements diferents.
Un document XHTML, a diferència de l'HTML, requereix la presència de l'etiqueta <html>, i, a més, aquesta ha d'incloure els atributs xmlns, xml:lang i lang:
- L'atribut xmlns conté el valor: "http://www.w3.org/1999/xhtml".
- Els atributs xml:lang i lang corresponen a l'idioma específic del document, que en aquest cas serà ca (català).
L'etiqueta <html> del vostre document quedaria, doncs, de la següent manera:
```
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
```
Tots els elements de marcat d'un document XHTML s'han de tancar amb l'etiqueta corresponent i tots els atributs han de quedar entre cometes. Fixeu-vos en els següents exemples:
Correcte:
```
Lorem ipsum dolor, consectetuer adipiscing elit.
```
Incorrecte:
```
Lorem ipsum dolor, consectetuer adipiscing elit.
```
En l'exemple vàlid s'han tancat tots els elements.

En l'exemple no vàlid hi ha l'etiqueta , que tanca el paràgraf, però falta l'etiqueta  que ha de tancar el fragment emfatitzat amb cursiva que hi ha dins el paràgraf, i que s'ha obert amb l'etiqueta .

De la mateixa manera que tots els elements de marcat del document XHTML s'han de tancar amb l'etiqueta corresponent, els valors d'un atribut han d'anar sempre entre cometes. Veieu el següent exemple:
Correcte:
```
Lorem ipsum dolor sit amet
```
Incorrecte:
```
Lorem ipsum dolor sit amet 
```
Els elements buits com el salt de línia   han de complir també aquesta norma. Així, l'etiqueta  , vàlida en HTML, serà vàlida en XHTML afegint-li una barra inclinada abans del signe de tancament:  . Altres elements buits que resulten afectats per aquesta norma són: <col />, <img />, <input />, <link /> i <meta />. Veieu el següent exemple:
Correcte:
```
<img src="exemple.png" alt="exemple" title="exemple" width="200" height="156" />
```
Incorrecte:
```
<img src="exemple.png" alt="exemple" title="exemple" width="200" height="156">
```
Els elements del document XHTML han d'estar anidats correctament, és a dir les etiquetes que obren i tanquen els diferents elements han d'estar en l'ordre correcte. Veieu un exemple:
Correcte:
```
Lorem ipsum dolor sit amet, consectetuer adipiscing elit .
```
S'ha començat amb l'etiqueta , seguida d'un element en línia  que, més endavant, es tancarà amb  i, per acabar, es tancarà l'inici del paràgraf amb l'etiqueta .
Incorrecte:
```
Lorem ipsum dolor sit amet, consectetuer adipiscing elit .
```
El segon exemple és el mateix que el primer però amb un error d'anidament visible: l'etiqueta que tanca l'element d'èmfasi  és posterior a la de paràgraf , la qual cosa és un error d'anidament.

D'altra banda, la declaració del tipus de document XHTML especifica un conjunt de regles d'anidació dels elements. Segons aquestes regles no tots els elements poden ser anidats per altres elements:
- Un element a no pot contenir altres elements a.
- L'element pre no pot contenir els següents elements: img, object, big, small, sub, sup, font, applet o basefont.
- Un element button no pot contenir els següents elements: input, select, textarea, label, button, form, fieldset, iframe o isindex.
- Un element label no pot contenir altres elements label.
- Un element form no pot contenir altres elements form.

Tornar a l'inici de la pràctica

Mòdul 2: Els llenguatges XHTML i CSS

Regles per a la validació correcta de la sintaxi del llenguatge XHTML