Cum se adaugă un atribut la o etichetă HTML

Limbajul HTML include o serie de elemente. Acestea includ frecvent utilizate componentele site-ului web precum paragrafe, titluri, linkuri și imagini. Există, de asemenea, o serie de elemente mai noi care au fost introduse cu HTML5, inclusiv antet, nav, subsol și multe altele. Toate aceste elemente HTML sunt utilizate pentru a crea structura unui document și pentru a-i da sens. Pentru a adăuga și mai multă semnificație elementelor, le puteți da atribute.

O etichetă de deschidere HTML de bază începe cu caracterul <. acesta este urmat de numele etichetei cele din urm completa eticheta cu caracterul>. De exemplu, eticheta de paragraf de deschidere ar fi scrisă astfel:

Pentru a adăuga un atribut la Etichetă HTML, mai întâi puneți un spațiu după numele etichetei (în acest caz acesta este „p”). Apoi ați adăuga numele atributului pe care doriți să îl utilizați, urmat de un semn egal. În cele din urmă, valoarea atributului ar fi plasată între ghilimele. De exemplu:


Etichetele pot avea mai multe atribute. Ați separa fiecare atribut de celelalte cu un spațiu.


Elemente cu atribute necesare

instagram viewer

Unele elemente HTML necesită de fapt atribute dacă doriți ca acestea să funcționeze conform intenției. Elementul imagine și elementul link sunt două exemple în acest sens.

element de imagine necesită atributul „src”. Acest atribut îi spune browserului ce imagine doriți să utilizați în acea locație. Valoarea atributului ar fi o cale a fișierului către imagine. De exemplu:

Sigla companiei noastre

Veți observa că am adăugat un alt atribut acestui element, „alt” sau atributul text alternativ. Acesta nu este din punct de vedere tehnic un atribut necesar pentru imagini, dar este o bună practică să includeți întotdeauna acest conținut pentru accesibilitate. Textul listat în valoarea atributului alt este ceea ce se va afișa dacă un imaginea nu se încarcă pentru un anumit motiv.

Un alt element care necesită atribute specifice este ancora sau eticheta de legătură. Acest element trebuie să includă atributul „href”, care înseamnă „referință hipertext”. Acesta este un mod fantezist de a spune „unde acest link ar trebui să meargă. "La fel ca elementul imagine trebuie să știe ce imagine trebuie încărcată, eticheta link trebuie să știe unde ar trebui la. Iată cum poate arăta o etichetă de link:


Acel link ar aduce acum o persoană pe site-ul web specificat în valoarea unui atribut. În acest caz, este pagina principală a Dotdash.

Atribute ca CSS Hooks

O altă utilizare a atributelor este atunci când sunt utilizate ca „cârlige” pentru Stiluri CSS. Deoarece standardele web dictează faptul că ar trebui să păstrați structura paginii (HTML) separată de stilurile sale (CSS), utilizați aceste cârlige de atribute în CSS pentru a dicta modul în care pagina structurată va fi afișată pe web browser. De exemplu, ați putea avea această bucată de marcaj în documentul HTML.


Dacă doriți ca această diviziune să aibă o culoare de fundal negru (# 000) și o dimensiune a fontului de 1,5em, ați adăuga aceasta la CSS:

.featured {background-color: # 000; dimensiunea fontului: 1,5em;}

Atributul clasei „prezentate” acționează ca un cârlig pe care îl folosim în CSS pentru a aplica stiluri acelei zone. Am putea folosi și un atribut ID aici, dacă dorim. Ambele clase și ID-uri sunt atribute universale, ceea ce înseamnă că pot fi adăugate la orice element. De asemenea, pot fi vizate ambele cu stiluri CSS specifice pentru a determina aspectul vizual al acelui element.

În ceea ce privește Javascript

În cele din urmă, utilizarea atributelor pe anumite elemente HTML este, de asemenea, ceva ce puteți utiliza în Javascript. Dacă aveți un script care caută un element cu un atribut ID specific, acesta este încă o altă utilizare a acestei piese comune a limbajului HTML.