Variante de sintaxă HTML5

Când creăm un document HTML5, putem folosi două stiluri diferite: HTML și XML.

Stilul HTML presupune următoarele aspecte:

Tagurile de început pot lipsi pentru unele elemente
Tagurile de închidere pot lipsi pentru unele elemente
Numai elementele goale (void elements) (de exemplu, br, img, link) pot fi închise cu ajutorul unui slash />
Nu contează cazul (majusculă/minusculă) pentru numele tagurilor și atributelor
Valorile atributelor nu trebuie neapărat să fie închise în ghilimele
Unele atribute pot să nu aibă valori (checked și disabled)
Caracterele speciale nu sunt escape-uite
Documentul trebuie să aibă elementul DOCTYPE

Aceasta este așa-numita "stil permisiv", bazat pe relaxări în crearea documentului.

Documentul HTML5 poate fi descris și folosind sintaxa XML. Acest stil este denumit "XHTML". Este utilizat dacă antetul content-type este setat ca application/xml+xhtml. Pentru acest stil sunt caracteristice următoarele reguli:

Fiecare element trebuie să aibă un tag de început
Elementele ne-goale (non-void elements) cu un tag de început trebuie, de asemenea, să aibă un tag de sfârșit
Orice element poate fi închis cu un slash />
Numele tagurilor și atributelor sunt case-sensitive, de obicei sunt folosite litere mici
Valorile atributelor trebuie să fie închise în ghilimele
Atributele fără valori nu sunt permise (checked="checked" în loc de doar checked)
Caracterele speciale trebuie să fie escape-uite

Să comparăm cele două abordări. Abordarea HTML5:

<!DOCTYPE html>
<html>
   <head>
       <meta charset=utf-8>
       <title>Titlul</title>
   </head>
   <body>
       <p>Conținutul documentului HTML5<br>
       <input type=button value=Apasă >
   </body>
</html>

Și un exemplu similar folosind abordarea XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta charset="utf-8">
       <title>Titlul</title>
   </head>
   <body>
       <p>Conținutul documentului HTML5<br />
       <input type="button" value="Apasă" /></p>
   </body>
</html>

Când folosim sintaxa XHTML, trebuie să specificăm și spațiul de nume pentru document: <html xmlns="http://www.w3.org/1999/xhtml">.

Alegerea unui stil specific pentru scrierea documentelor HTML depinde de preferințele programatorului sau ale designerului web. Adesea se folosește un stil mixt, care împrumută reguli din ambele stiluri.

Totodată, trebuie să luăm în considerare că prezența tagurilor de început și de sfârșit reduce probabilitatea ca elementul să fie interpretat greșit de browser.

De asemenea, închiderea valorilor atributelor în ghilimele poate preveni erori potențiale. Astfel, atributul class poate accepta mai multe valori la rând. De exemplu: <div class="navmenu bigdesktop">. Dar, dacă omitem ghilimelele, ca valoare va fi utilizată "navmenu", iar "bigdesktop" browserul va încerca să interpreteze ca un atribut separat.

Dacă există îndoieli cu privire la corectitudinea markup-ului HTML creat, acesta poate fi verificat cu ajutorul validatorului de la adresa https://validator.w3.org:

Putem introduce codul paginii web în câmpul text și, după apăsarea butonului "Check" de jos, validatorul fie ne va afișa erorile cu roșu, fie ne va informa cu verde că nu există erori și codul a trecut validarea.