Bu yazımda çok fazla kullanılmayan Html etiketleri ve özelliklerinden (attribute) bahsetmek istiyorum. Bunlar: Input list, Picture Source Media Tag, Base Url, Lazy Loading Image
Input List – DataList
Bir input list oluşturup bir datalist e bağlayarak inputa girilebilecek değerler için kullanıcıya öneride bulunabilirsiniz. Bu sayede kullanıcıların gireceği değerler belli bir formatta ve standartda olmuş olacaktır.
<label>Arabalar</label>
<input list="cars" id="txtCars" name="txtCars">
<datalist id="cars">
<option>Toyota</option>
<option>Honda</option>
<option>Renault</option>
<option>Mazda</option>
<option>Fiat</option>
</datalist>
Picture Tag
Picture etiketi birden fazla resmi aynı etiket altında gruplayarak ekran boyutlarına göre farklı farklı gösterebilirsiniz.
<picture>
<source media="(min-width: 620px)" title="orta" srcset="https://via.placeholder.com/630">
<source media="(min-width: 420px)" title="kucuk" srcset="https://via.placeholder.com/430">
<img decoding="async" style="width: auto" title="diger" src="https://via.placeholder.com/800">
</picture>
Base URL
Eğer web sitenizde yada web uygulamanızda tüm Url adresleriniz aynı temel adresi kullanıyorsa bu etiket işinize çok yaracaktır. Örneğin web sitenizdeki resimler ve sayfalarınız için aynı base adresi kullanarak bir çok defa tekrar tekrar yazmaktan kurtulabilirsiniz. Base etiketinin href yada target özniteliğini (attribute) kullanarak yazabilirsiniz.
<html>
<head>
<base href="http://ismailaktas.com" target="_blank">
</head>
<body>
<a href="/home">Anasayfa</a>
<a href="/about">Hakkımda</a>
</body>
</html>
Lazy Loading Image – Resimleri Gerektiğinde Göster
Bu etiket ile web sitenizdeki tüm resimlerin sayfa açılırken yüklenmesini değil; scroll ile kaydırdığınızda yada resme konum olarak yaklaştığınızda yüklenmesi sağlayabilirsiniz. Bu sayede belkide hiç görüntülenmeyecek resimlerin yüklenmesinin de önüne geçebilirsiniz.
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1800"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2200"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/3000"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1500"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2500"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1300"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1400"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1500"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1010"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2300"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/1400"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2500"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2700"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2600"><br>
<img decoding="async" loading="lazy" src="https://via.placeholder.com/2350"><br>
“Çok Kullanılmayan Faydalı HTML Etiketleri” hakkında 2 yorum
Thanks for the good article, I hope you continue to work as well.
Thanks for your reply. I will do my best.