Elemente și atribute HTML5

Înainte de a trece direct la crearea paginilor web în HTML5, să examinăm blocurile fundamentale, cărămizile din care este construită o pagină web. Un document HTML5, ca orice document HTML, este compus din elemente, iar elementele sunt compuse din taguri. De obicei, elementele au un tag de deschidere și unul de închidere, care sunt incluse între paranteze unghiulare. De exemplu:

<div>Textul elementului div</div>

Aici este definit elementul div, care are un tag de deschidere <div>și unul de închidere </div>. Între aceste taguri se află conținutul elementului div. În acest caz, conținutul este un text simplu: "Textul elementului div".

Elementele pot fi de asemenea compuse dintr-un singur tag, de exemplu, elementul br, funcția căruia este să treacă la rândul următor.

<div>Text <br /> elementul div</div>

Asemenea elemente sunt denumite și elemente goale (void elements). Deși am folosit slashul de închidere, prezența lui conform specificației nu este obligatorie și este echivalentă cu utilizarea tagului fără slash: <br>.

Fiecare element în interiorul tagului de deschidere poate avea atribute. De exemplu:

<div style="color:red;">Buton</div>
<input type="button" value="Apasă">

Aici sunt definite două elemente: div și input. Elementul div are atributul style. După semnul egal, în ghilimele, se scrie valoarea atributului: "style=color:red;". În acest caz, valoarea "color:red;" indică faptul că culoarea textului va fi roșie.

Al doilea element, elementul input, compus dintr-un singur tag, are două atribute: type (indică tipul elementului - buton) și value (definește textul butonului).

Există atribute globale sau comune pentru toate elementele, ca de exemplu, style, și există specifice, aplicabile anumitor elemente, ca de exemplu, type.

Pe lângă atributele obișnuite, există și atribute booleane sau logice (boolean attributes). Asemenea atribute pot să nu aibă valoare. De exemplu, la un buton se poate seta atributul disabled:

<input type="button" value="Apasă" disabled>

Atributul disabled indică faptul că acest element este dezactivat.

Atribute globale

În HTML5 există un set de atribute globale aplicabile oricărui element HTML5:

• accesskey: definește o tastă pentru acces rapid la element
• class: stabilește clasa CSS care va fi aplicată elementului
• contenteditable: determină dacă conținutul elementului poate fi editat
• contextmenu: definește meniul contextual pentru element, care apare la click dreapta pe element
• dir: stabilește direcția textului în element
• draggable: determină dacă elementul poate fi tras
• dropzone: specifică dacă datele transportate pot fi copiate la transportul pe element
• hidden: ascunde elementul
• id: identificator unic al elementului. Pe o pagină web, elementele nu trebuie să aibă identificatori repetați
• lang: specifică limba elementului
• spellcheck: indică dacă pentru element va fi utilizată verificarea ortografică
• style: definește stilul elementului
• tabindex: determină ordinea de navigare prin elemente folosind tasta TAB
• title: oferă o descriere suplimentară elementului
• translate: specifică dacă conținutul elementului ar trebui tradus

Dar, ca regulă, din toată această listă cele mai frecvent utilizate sunt trei: class, id și style.

Atribute personalizate

Spre deosebire de versiunea anterioară a limbajului de marcare, în HTML5 au fost adăugate atribute personalizate (custom attributes). Acum, dezvoltatorul sau creatorul paginii web poate defini orice atribut, adăugându-i prefixul data-. De exemplu:

<input type="button" value="Apasă" data-color="roșu">

Aici este definit atributul data-color, care are valoarea "red". Deși pentru acest element, nici în HTML în general, nu există un asemenea atribut. Noi îl definim singuri și îi stabilim orice valoare.

Utilizarea ghilimelelor simple sau duble

Nu este rar să întâlnim cazuri în care, la definirea valorilor atributelor în HTML, se folosesc atât ghilimele simple, cât și cele duble. De exemplu:

<input type='button' value='Apasă'>

Și ghilimelele simple, și cele duble sunt acceptabile în acest caz, deși mai frecvent se folosesc cele duble. Totuși, uneori valoarea atributului poate conține ghilimele duble, și în acest caz este mai bine să plasăm întreaga valoare între ghilimele simple:

<input type="button" value='Buton "Salut lume"'>