Conversia HTML în XHTML

În această secțiune, vom descoperi cum să transformați un document HTML într-un document XHTML. Vom examina fiecare dintre următoarele reguli:

Documentele trebuie să fie bine formatate
Etichetele trebuie să fie imbricate corect
Elementele trebuie să fie închise
Etichetele trebuie să fie cu litere mici
Numele atributelor trebuie să fie cu minuscule
Valorile atributelor trebuie incluse în ghilimele
Atributele nu pot fi minimizate
Atributul name este înlocuit cu atributul id (în XHTML 1.0 atât name cât și iid ar trebui să fie folosite cu aceeași valoare pentru a menține compatibilitatea inversă).
Nu sunt permise simboluri simple
Scripturile și CSS trebuie să fie eliminate (includeți-le în etichetele <![CDATA[ and ]]>) sau, de preferință, mutate în fișiere externe.

Documentele trebuie să fie bine formatate

Deoarece XHTML se conformează tuturor standardelor XML, un document XHTML trebuie să fie bine formatat conform recomandărilor W3C pentru un document XML. Mai multe dintre regulile de aici subliniază din nou acest punct. Vom lua în considerare atât exemple incorecte, cât și exemple corecte.

Etichetele trebuie să fie imbricate corect

Browserele tolerează pe scară largă etichetele imbricate prost în documentele HTML.

<b><u>
Acest text este probabil aldine și subliniat, dar în interiorul etichetelor imbricate incorect.
</b></u>

Textul de mai sus va apărea ca aldine și subliniat, chiar dacă etichetele de final nu sunt în ordinea corectă. O pagină XHTML nu se va afișa dacă etichetele sunt imbricate incorect, deoarece nu ar fi considerat un document XML valid. Problema poate fi rezolvată cu ușurință.

<b><u>
Acest text este aldine și subliniat și în interiorul etichetelor imbricate corespunzător.
</u></b>

Elementele trebuie să fie închise

Din nou, documentele XHTML trebuie considerate documente XML valide. Din acest motiv, toate etichetele trebuie să fie închise. Specificațiile HTML au enumerat unele etichete ca având etichete de final „opționale”, cum ar fi etichetele <p> și <li>.

<p>Aici este o listă:
<ul>
   <li>Item 1
   <li>Item 2
   <li>Item 3
</ul>

În XHTML, etichetele de final trebuie incluse.

<p>Aici este o listă: </p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Ce ar trebui să facem cu etichetele HTML care nu au o etichetă de închidere? Unele etichete speciale nu necesită sau implică o etichetă de închidere.

<img src="titlebar.gif" alt="Title">
<hr>
<br>
<p>Bun venit pe pagina mea web!</p>

În XHTML, trebuie respectată regula XML de a include o bară oblică de închidere în etichetă.

<img src="titlebar.gif" alt="title" />
<hr />
<br />
<p>Bun venit pe pagina mea web!</p>

Rețineți că unele dintre browserele actuale vor reda incorect o pagină dacă bara oblică de închidere nu are un spațiu înainte (<br/>). Deși nu face parte din recomandarea oficială, ar trebui să includeți întotdeauna spațiul (<br />) din motive de compatibilitate.

Iată etichetele goale comune în HTML:

area
base
basefont
br
hr
img
input
link
meta
param

Etichetele trebuie să fie cu litere mici

În HTML, etichetele pot fi scrise fie cu litere mici, fie cu litere mari. De fapt, unii autori web au preferat să scrie etichetele cu majuscule pentru a le face mai ușor de citit. XHTML necesită ca toate etichetele să fie cu litere mici.

<H1>Acesta este un exemplu de caz prost.</h1>

Această diferență este necesară deoarece XML face diferența între cazuri. XML ar citi <H1> și <h1> ca etichete diferite, provocând probleme în exemplul de mai sus.

<h1>Acesta este un exemplu de caz bun.</h1>

Problema poate fi rezolvată cu ușurință prin schimbarea tuturor etichetelor în litere mici.

Numele atributelor trebuie să fie cu minuscule

Urmând tiparul de scriere a tuturor etichetelor cu litere mici, toate numele atributelor trebuie să fie de asemenea cu litere mici.

<p CLASS="specialText">Notă importantă</p>

Etichetele corecte sunt ușor de creat.

<p class="specialText">Notă importantă</p>

Valorile atributelor trebuie incluse în ghilimele

Unele valori HTML nu necesită ghilimele în jurul lor. Ele sunt înțelese de browsere.

<table border=1 width=100%>
</table>

XHTML necesită ca toate atributele să fie incluse în ghilimele. Chiar și valorile numerice, procentuale și hexazecimale trebuie să apară între ghilimele pentru ca acestea să fie considerate parte a unui document XHTML adecvat.

<table border="1"  width="100%">
</table>

Atributele nu pot fi minimizate

HTML a permis ca unele atribute să fie scrise în scurtătură, precum selectate sau fără redimensionare.

<form>
   <input checked ... />
   <input disabled ... />
</form>

Când utilizați XHTML, minimizarea atributelor este interzisă. În schimb, utilizați sintaxa x="x", unde x este atributul care a fost minimizat anterior.

<form>
   <input checked="checked"  .../>
   <input disabled="disabled"  .../>
</form>

Urmează o listă completă de atribute minimizate:

checked
compact
declare
defer
disabled
ismap
nohref
noresize
noshade
nowrap
readonly
selected
multiple

Atributul `name` este înlocuit cu atributul `id`

Standardele HTML 4.01 definesc un atribut name pentru etichetele a, applet, frame, iframe, img, și map.

<a name="anchor">
<img src="banner.gif" name="mybanner" />
</a>

XHTML a depreciat atributul name. În schimb, este folosit atributul id. Cu toate acestea, pentru a asigura compatibilitatea cu browserele de astăzi, cel mai bine este să utilizați atât atributele name, cât și id.

<a name="anchor" id="anchor" >
<img src="banner.gif" name="mybanner" id="mybanner"  />
</a>

Pe măsură ce tehnologia avansează, în cele din urmă va fi inutil să folosiți ambele atribute și XHTML 1.1 eliminat name cu totul.

Ampersand nu sunt acceptate

Ampersand sunt ilegale în XHTML.

<a href="home.aspx?status=done&amp;itWorked=false">Home &amp; Garden</a>

În schimb, ele trebuie înlocuite cu codul de caractere echivalent &.

<a href="home.aspx?status=done&amp;amp;itWorked=false">Home &amp;amp; Garden</a>

Atributele de imagine alt sunt obligatorii

Deoarece XHTML este conceput pentru a fi vizualizat pe diferite tipuri de dispozitive, dintre care unele nu sunt capabile de imagini, atributele alt trebuie incluse pentru toate imaginile.

<img src="titlebar.gif">

Amintiți-vă că eticheta img trebuie să includă o bară oblică de închidere în XHTML!

<img src="titlebar.gif" alt="title"  />

Scripturile și CSS trebuie să fie eliminate

Scripturile interne și CSS includ adesea caractere precum ampersand și caractere și caractere mai-puțin-decât.

<script language="JavaScript">
   <!--
      document.write('Hello World!'); 
   //-->
</script>

Dacă utilizați scripturi interne sau CSS, includeți-le în etichetele <![CDATA[ and ]]>. Acest lucru le va poziționa ca date de caractere care nu ar trebui analizate. Dacă nu utilizați aceste etichete, caracterele precum & și < vor fi tratate ca entități de început de caracter (cum ar fi  ) și, respectiv, etichete (cum ar fi <b>). Acest lucru va face ca pagina dvs. să se comporte imprevizibil și vă poate invalida codul.

În plus, atributul type este obligatoriu pentru scripturi. Etichetele de comentariu <!– și –> care au fost folosite în mod tradițional pentru a ascunde JavaScript de browserele neconforme nu ar trebui să fie incluse. Standardul XML prevede că textul inclus în etichetele de comentariu poate fi exclus complet din documentele redate, ceea ce ar pierde toate scripturile incluse în etichete.

<script type="text/javascript" language="javascript">
/*<![CDATA[*/
   document.write('Hello World!');
/*]]>*/
</script>

De asemenea document.write(); nu este permis în documentele XHTML. Trebuie să utilizați metode de creare a nodurilor, cum ar fi document.createElementNS(); în schimb. În mod confuz, document.write(); va părea să funcționeze conform așteptărilor dacă documentul este difuzat incorect cu un tip MIME text/html (tipul pentru documentele HTML), în loc de application/xhtml+xml (tipul pentru documentele XHTML). Dacă tipul MIME este text/html, documentul va fi analizat ca HTML, ceea ce permite document.write();. Analizarea documentului ca HTML nu permite scopul de a-l scrie în XHTML.

Modificări similare trebuie făcute pentru foile de stil interne.

<style>
<!--
   .SpecialClass {
      color: #000000;
   }
-->
</style>

Atributul type trebuie inclus și etichetele CDATA trebuie utilizate.

<style type="text/css">
/*<![CDATA[*/
   .SpecialClass {
      color: #000000;
   }
/*]]>*/
</style>

Deoarece scripturile și CSS pot complica un document XHTML, se recomandă insistent ca acestea să fie plasate în fișiere externe .js și, respectiv, .css. Apoi pot fi conectate la acestea din documentul dvs. XHTML.

<script src="myscript.js" type="text/javascript" />

<link href="styles.css" type="text/css" rel="stylesheet" />

Este posibil ca unele elemente să nu fie imbricate

Recomandările W3C afirmă că anumite elemente pot să nu fie conținute în altele într-un document XHTML, chiar și atunci când nu sunt încălcate reguli XML prin includere. Elementele afectate sunt enumerate mai jos.