Notificări
Șterge tot
sept. 30, 2021 6:23 pm
Elemente și atribute HTML5
Un document HTML5, ca orice document HTML, este alcătuit din elemente, iar elementele sunt alcătuite din etichete. De obicei, elementele au etichete de început și de sfârșit, care sunt încadrate între paranteze unghiulare. De exemplu:
<div>Textul elementului div</div>
Se definește un element div care are o etichetă de deschidere <div> și o etichetă de închidere </div>. Între aceste etichete se află conținutul elementului div. În acest caz, conținutul este textul simplu „Textul elementului div”.
Elementele pot consta, de asemenea, dintr-o singură etichetă, cum ar fi elementul <br />, care are funcția de întrerupere de linie.
<div> Textul <br /> elementului div </div>
Astfel de elemente se mai numesc și elemente nule (void elements). Deși am folosit o bară finală, aceasta este opțională în conformitate cu specificațiile și este echivalentă cu utilizarea unei etichete non-oblice: <br>
Fiecare element din eticheta de deschidere poate avea atribute. De exemplu:
<div style = "color: red;"> Buton </div> <input type = "button" value = "Click">
Aici sunt definite două elemente: div și input. Elementul div are un atribut de stil. După semnul egal, valoarea atributului este scrisă între ghilimele: style = "color: red;". În acest caz, valoarea „color: red;” indică faptul că culoarea textului va fi roșie.
Al doilea element este un element de intrare format dintr-o singură etichetă și are două atribute: type (indică tipul elementului - buton) și value (definește textul butonului)
Există atribute globale sau generale pentru toate elementele, cum ar fi style, și există unele specifice care se aplică anumitor elemente, cum ar fi type.
În plus față de atributele obișnuite, există și atribute booleene (boolean attributes). Atribute ca acestea nu pot avea valoare. De exemplu, un buton poate avea atributul dezactivat:
<input type = "button" value = "Apăsați" disabled>
Atributul disabled indică faptul că acest element este dezactivat.
HTML5 are un set de atribute globale care se aplică oricărui element HTML5:
- accesskey: definește o cheie pentru acces rapid la un element
- class: specifică clasa CSS de aplicat elementului
- contenteditable: determină dacă conținutul elementului poate fi editat
- contextmenu: definește meniul contextual pentru un element care este afișat când faceți clic dreapta pe un element
- dir: setează direcția textului într-un element
- draggable: determină dacă elementul poate fi glisat
- dropzone: stabilește dacă datele zonei drop-down pot fi copiate atunci când se trece la un element
- hidden: ascunde elemental
- id: identificator unic pentru element. Elementele de pe o pagină web nu trebuie să aibă identificatori duplicat
- lang: definește limba elementului
- spellcheck: indică dacă se va utiliza sau nu o verificare ortografică pentru acest element
- style: setează stilul unui element
- tabindex: Determină ordinea în care puteți naviga prin elemente folosind tasta TAB
- title: setează o descriere opțională pentru element
- translate: determină dacă conținutul elementului trebuie tradus
Dar, de regulă, din întreaga listă, trei sunt cele mai des utilizate: class, id și style.
Atribute personalizate
Spre deosebire de versiunea anterioară a limbajului de markup, HTML5 a adăugat atribute personalizate. Acum dezvoltatorul sau creatorul paginii web poate defini singur orice atribut, prefixându-l cu prefixul de date. De exemplu:
<input type = "button" value = "Faceți clic pe" data-color = "red">
Aici se definește atributul date-color, care are valoarea „red”. Deși nu există un astfel de atribut pentru acest element, nici în html în general. Îl definim noi înșine și îi setăm orice valoare.
Citate simple sau duble
Nu este neobișnuit să găsiți cazuri în care atât ghilimelele simple, cât și cele duble sunt utilizate în definiția valorilor atributelor în html. De exemplu:
<input type = 'button' value = 'Click'>
Atât ghilimelele simple, cât și cele duble sunt acceptabile în acest caz, deși ghilimelele duble sunt mai frecvent utilizate. Cu toate acestea, uneori valoarea atributului în sine poate conține ghilimele duble, caz în care este mai bine să puneți întreaga valoare în ghilimele simple:
<input type = "button" value = 'Butonul “Hello World”'>