11 etichete HTML neobișnuite pentru a vă îmbunătăți abilitățile de dezvoltare web

Recomandări cheie

• Utilizați și etichetați pentru a crea secțiuni extensibile, oferind o experiență ușor de utilizat și menținând un design curat.
• Evidențiați conținut important cu eticheta, atrăgând atenția asupra cuvintelor cheie, expresiilor sau rezultatelor căutării de pe pagina dvs. web.
• Adăugați semnificație semantică la date și ore folosind eticheta, îmbunătățind accesibilitatea pentru utilizatorii cu dizabilități care folosesc cititoare de ecran.

În calitate de dezvoltator web, ar trebui să cunoașteți bine etichetele HTML comune, cum ar fi, , și care reprezintă structura și conținutul paginilor dvs. web. Cu toate acestea, limbajul HTML oferă mult mai mult!

Explorând aceste etichete unice, puteți îmbunătăți funcționalitatea aplicațiilor dvs. web, făcându-le să iasă în evidență din mulțime.

1.

și

Imaginați-vă că aveți informații sau conținut extins cu care nu doriți să copleșiți imediat un cititor. The și etichetele vin în ajutor!

Aceste etichete lucrează împreună pentru a crea o secțiune extensibilă cu un titlu sau un rezumat pe care utilizatorii site-ului dvs. pot da clic pentru a le dezvălui. În mod implicit, conținutul din elementul de detalii nu se va afișa, păstrând pagina dvs. îngrijită și organizată.

Vizitatorii dvs. pot face clic cu ușurință pe rezumat pentru a accesa informațiile ascunse.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Cu aceste etichete, puteți ascunde secțiuni mari de text, cod sau alte informații, oferind o experiență ușor de utilizat, păstrând în același timp un design curat. Ele vă pot ajuta chiar să vă rafinați abilități ca designer de interfețe.

2.

The eticheta vă permite să evidențiați anumite părți ale conținutului dvs., făcându-le să iasă în evidență vizual. Când utilizați element, browserele aplică de obicei o culoare galbenă de fundal textului din interior, atrăgând atenția cititorului asupra acestuia.

Această funcție este utilă în special atunci când doriți să subliniați cuvinte cheie, expresii importante sau rezultatele căutării pe pagina dvs. web.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

De exemplu, dacă site-ul dvs. are funcționalitate de căutare, puteți utiliza eticheta pentru a evidenția potrivirile interogării de căutare în rezultate, facilitând găsirea de informații relevante pentru utilizatori.

3.

Ați întâlnit vreodată situații în care conținutul devine depășit sau nu mai este relevant, dar doriți totuși să-l afișați în scopuri istorice sau să indicați modificări în timp?

Introduceți etichetă! Inseamna barat și redă orice conținut în cadrul elementului cu o linie prin mijloc.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

În acest exemplu, epuizat textul va fi afișat cu o linie prin el, indicând faptul că starea stocului produsului s-a schimbat.

4.

Când doriți să adăugați semnificație semantică datelor și orelor din conținutul dvs., eticheta este la îndemână.

Folosind datetime atribut, puteți specifica o versiune a datei sau orei care poate fi citită de mașină, care ajută browserele, motoarele de căutare și cititorii de ecran să înțeleagă contextul.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Prin folosirea eticheta, oferiți conținutului dvs. mai multă structură și îl faceți accesibil pentru o gamă mai largă de utilizatori, inclusiv pentru cei cu dizabilități care folosesc cititoare de ecran.

5.

Gestionarea textului în mai multe limbi pe pagina dvs. web poate fi uneori dificilă, mai ales atunci când fiecare parte necesită o formatare diferită.

The eticheta vine în ajutor prin izolarea unei părți a textului pe care browserul ar trebui să o trateze diferit din cauza cerințelor de limbă diferite.

<p>
<bdi>5,000bdi> people attended the conference.
p>

În acest exemplu, elementul înfășoară numărul 5,000. Acest lucru asigură că, dacă textul din jur este într-o limbă diferită sau necesită o formatare diferită, nu va interfera cu numărul.

6. , ,

Pentru tipografia din Asia de Est, unde ghidurile de pronunție, furigana sau alte adnotări sunt utilizate în mod obișnuit deasupra sau dedesubtul caracterelor,, , și etichetele intră în joc.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

În acest exemplu, elementul conține caracterul 漢 (Kanji) și elementul conține pronunția かん (kan). The elementele oferă paranteze de rezervă pentru browserele care nu acceptă adnotări ruby.

7.

Când aveți cuvinte lungi care vă pot rupe aspectul, eticheta este aici pentru a vă ajuta. Acesta sugerează o oportunitate pentru o întrerupere de linie (oportunitate de întrerupere a cuvântului) într-un cuvânt lung, în care browserul poate alege să încapsuleze textul.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

În exemplul de mai sus, adresa URL lungă include a element care permite browserului să-l despartă în două rânduri dacă este necesar, păstrând aspectul conținutului din jur.

8. _și

Pentru notații științifice sau matematice, formule chimice sau note de subsol, puteți utiliza și etichete pentru textul indicelui și respectiv indicelui.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Acest exemplu folosește eticheta pentru a afișa 2 în H2O ca indice, în timp ce etichetele afișează exponenții din teorema lui Pitagora.

9.

Trebuie să reprezentați măsurători scalare într-un interval cunoscut, cum ar fi utilizarea discului, evaluările sau scorurile la examen? The eticheta te-a acoperit.

Folosind valoare, min, și max atribute, puteți defini valoarea curentă, valoarea minimă și, respectiv, valoarea maximă a măsurătorii.

<metervalue="75"min="0"max="100">75%meter>

În acest exemplu, elementul reprezintă un punctaj de examen de 75%.

10.

Când ai nevoie creați o casetă de dialog sau o suprapunere de fereastră pentru modali sau interacțiuni pop-up modale bine comportate, cel eticheta este calea de urmat. Puteți folosi deschis atribut pentru a afișa caseta de dialog în mod implicit.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

În acest exemplu, o casetă de dialog simplă care conține un paragraf și un buton de închidere arată când pagina se încarcă, datorită deschis atribut. Puteți personaliza conținutul și comportamentul casetei de dialog folosind JavaScript pentru interacțiuni mai avansate.

11.

Folosește etichetați pentru a grupa opțiunile asociate în cadrul unui element derulant. Vă permite să organizați și să clasificați opțiunile pentru o navigare și o selecție mai ușoare.

• Theeticheta este un element container care grupează înrudite etichete în cadrul unui element.
• Ajută la organizarea opțiunilor prin crearea de grupări vizuale sau categorizări în meniul drop-down.
• The eticheta necesită un atribut etichetă, care specifică numele sau titlul grupului de opțiuni.
• Poate conține unul sau mai multe etichete ca elemente secundare, reprezentând opțiunile individuale din cadrul grupului.

De exemplu:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Acest exemplu grupează meniul derulant de selectare în două secțiuni: Asia, și Europa. Fiecare grup conține etichete care reprezintă diferite țări din acea regiune.

Îmbunătățiți-vă competențele în dezvoltarea web

Învățarea acestor etichete HTML mai puțin cunoscute vă poate îmbunătăți considerabil abilitățile de dezvoltare web. În ciuda lipsei de recunoaștere, ele oferă caracteristici valoroase pentru contexte specifice.

Adăugarea acestor etichete la setul dvs. de abilități îmbunătățește interactivitatea, accesibilitatea și eficientizează procesul de dezvoltare web. Amintiți-vă, deși s-ar putea să ne cunoașteți, ele au un impact semnificativ asupra călătoriei dvs. ca dezvoltator web.