Tag-uri și atribute HTML pe care trebuie neapărat să le știi
Fiecare developer web este familiarizat cu HTML. Fie că ești front-end sau back-end developer, și în ciuda noilor tehnologii și framework-uri disponibile, ai nevoie de o bună cunoaștere a limbajului HTML.
Întotdeauna este mai bine să folosești funcționalitățile HTML, cum ar fi tagurile sau atributele, în loc să încerci să obții același rezultat folosind Javascript, de exemplu. Unele dintre aceste funcționalități le poți regăsi mai jos:
1. Lazy loading image
Această proprietate HTML loading=”lazy” poate crește performanța site-ului tău web și responsivitatea acestuia. Folosind acest atribut, imaginea este încărcată numai atunci când utilizatorul derulează și imaginea devine vizibilă. În caz contrar, ea nu se încarcă.
Trebuie să adăugi această proprietate la fișierul imagine. Iată un exemplu:
<img src="image.jpg" alt="" loading="lazy" width="100" height="100" />
2. Picture tag
Ca web developer, trebuie să găsești întotdeauna soluții pentru a îmbunătățești viteza site-ului web. Dacă site-ul se încarcă foarte greu, vizitatorii își vor pierde răbdarea și vor iesi de pe site. O problemă în mod special este dimensiunea imaginilor pe care le încărci pe site și nevoia de a avea imagini diferite pe dispozitivele desktop și mobile. De asemenea, unele imagini care funcționează pe desktop nu sunt atât de ușor de utilizat pe mobil.
Și pentru această problemă, HTML vine în ajutor! Eticheta
<picture>
<source media="(max-width:767px)" srcset="image1.jpg">
<source media="(min-width:768px)" srcset="image2.jpg">
<img src="image2.jpg" alt="" />
</picture>Codul de mai sus permite încărcarea unor imagini diferite în funcție de dimensiunea ecranului. Această etichetă este similară cu etichetele
3. Input suggestions
În calitate de utilizator, este foarte util să primești sugestii relevante și utile atunci când cauți ceva anume. Pentru a realiza acest lucru, poți să utilizezi eticheta
Singurul lucru de reținut este că atributul ID al acestei etichete trebuie să fie același cu atributul listei de câmpuri de intrare.
<label for="country">Select your country:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="Romania">
<option value="Germany">
<option value="Denmark">
<option value="Norway">
<option value="Greece">
</datalist>4. Document refresher
Dacă vrei să redirecționezi utilizatorul către o nouă pagină după o perioadă de inactivitate, poți face acest lucru folosind HTML simplu. Poți realiza acest lucru utilizând http-equiv=”refresh” în eticheta , după cum vezi mai jos:
<meta http-equiv="refresh" content="4" URL='https://google.com' />Valoarea atributului content reprezintă secundele. Cu toate acestea, aceasta este o soluție de ultimă instanță, chiar dacă Google susține cătratează actualizarea meta ca pe orice altă actualizare.
5. URL de bază
Poți seta un URL de bază pentru site-ul web pentru a simplifica scrierea codului. Vezi exemplul de mai jos:
<head> <base href="https://innobyte.com/" target="_blank"> </head> <body> <img src="careers" alt="Careers"> <a href="team">Team</a> </body>
Codul de mai sus va genera o imagine care va redirecționa către https://innobyte.com/careers/, și o etichetă ancoră care va redirecționa către https://innobyte.com/team/. Astfel, în loc să introduci de două ori URL-ul domeniului, poți utiliza eticheta <base> pentru a-ți ușura munca. ^_^
Eticheta <base> trebuie să aibă o proprietate “href” sau o proprietate țintă.
