Muhtemelen hiç kullanmadığınız birkaç HTML etiketi

HTML web sayfası kodlarken bilmeniz gereken ilk dildir. Ne kadar basit ve kolay olsa da, alıştığımız etiketlerden ve özelliklerden başkasını bazen çok geç fark edebiliyoruz.

Bu nedenle belki birilerinin karşısına çıkar diye, benim de, ya her gün yazıyorum ama yeni bir şeyler veya bilmediğim etiketler var mı acaba diyerek araştırıp, vay anasını bunu daha önce neden hiç kullanmadım dediğim birkaç etiketi paylaşıyorum.

1. <details>
   Bu etiket <summary> etiketi ile birlikte kullanılır. Bootstraptan alıştığımız accordion mantığı ile çalışır.
   Örnek kod:

   <details>
     <summary>Epcot Center</summary>
     <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </details>
   
   <details>
     <summary>Epcot Center</summary>
     <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </details>

   – Başlığa tıklayın

   Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

   – İkinci başlığa tıklayın

   Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

2. <datalist>
   Bu etiket javascript ile yapılan “auto complete” yani otomatik tamamlama eklentilerinin en basit hali diyebiliriz. input elemanı ile birlikte çalışır ve daha önceden belirlenen liste içerisinde filtreleme işlemi yapar.
   Örnek kod:

   <label>  
    Lütfen aşağıdan bir ülke adını seçin:<br />  
    <input type="text" id="country" list="countries">  
    <datalist id="countries">  
    <option value="Azerbaycan">  
    <option value="Amerika">  
    <option value="Özbekistan">   
    <option value="Türkiye">   
    <option value="Macaristan">   
    <option value="Yunanistan">   
    <option value="Kanada">   
    </datalist>  
   </label>

   
   Lütfen aşağıdan bir ülke adını seçin:
   
   
   
3. <meter> etiketi bir gösterge sunmanızı sağlar. Mesela örnekte gösterildiği gibi bir alanın doluluk oranını gösterebilirsiniz.
   Örnek kod:

   <label for="disk_c">Disk usage C:</label>
   <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
   
   <label for="disk_d">Disk usage D:</label>
   <meter id="disk_d" value="0.6">60%</meter>

   Disk usage C:
   2 out of 10
   Disk usage D:
   60%

Zannediyorum şimdilik bu üç etiketi kullanarak kendi tasarımınıza uygunlaştırmak için CSS ile güzelleştirebilirsiniz. Daha sonrakı yazılarımda birkaç yeni HTML etiketi daha paylaşacağım.