Kullanıldığında gerçekten işi kolaylaştıran az bilinen 12 HTML elementi!

2 hafta önce , Okuma süresi 3 dakika.

Bu yazıda, HTML kullanılarak yapılabilecek bazı harika şeylere bir göz atacağız. Bazı html elementlerine bakalım, varlığından bile haberdar olmayabilirsiniz.
Kullanıldığında gerçekten işi kolaylaştıran az bilinen 12 HTML elementi!

Merhabalar, bu yazıda sizlere çok sık kullanılmayan ancak kullanıldığında harikalar yaratan 12 HTML etiketinden bahsedeceğim. 

Bunları projelerimde sıklıkla kullanıyorum. Çoğu web uygulamalasında denk gelmiyorum yada aynı etiketin yaptığı/yapacağı işi başka başka yollarla çözüldüklerini görüyorum. Halbuki bu etiketlerin kullanıldığında çok karmaşık gibi görülen baız süreçlerin çok basit olduğunu sizde görecek ve bana hek vereceksiniz. 

Hazırsak başlayalım; 

1. <figure>

Bu element, bir fotoğrafı eklemek için kullanılabilir. <figcaption>. elemanını kullanabilir. 

Örnek : 

<figure>
  <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" alt="Person using lack laptop computer on brown wooden table" style="width:100%">
  <figcaption>Person using lack laptop computer on brown wooden table</figcaption>
</figure>

2. <audio>

Başka bir eklenti kullanmaya gerek kalmadan bir web sayfasına ses kaynakları eklemenin bir yolunu sağlar. ⁣ Müzik veya ses akışı kadar ses çalmak için kullanılır. Mp3, wav ve ogg'yi destekler. ⁣ Öğeyi desteklemeyen tarayıcılara gösterilmek üzere etiketin içine bir yedek metin eklenir. ⁣ Varsayılan olarak, tarayıcı herhangi bir denetim göstermez. ⁣ Kullanıcıların çalma, duraklatma, ses seviyesini ayarlama vb. Yeteneklerini eklemek için 'kontroller' özelliği kullanılabilir.

<audio controls>
  <source src="music.mp4" type="audio/mp4">
  <source src="mucis.ogg" type="audio/ogg">
</audio>

3. <video>

Bu, video oynatma için bir medya oynatıcı yerleştirmenize olanak tanır. Youtube veya vimeo videoları yerleştirmeden bir video döngüsü veya video akışı oynatmak için kullanılır. Mp4, webm ve ogg'yi destekler.

Örneğin, videonuzu AWS S3'e yükleyebilir ve <video>web sitenize yerleştirmek için etiketi kullanabilirsiniz .

Ayrıca genişlik, yükseklik, otomatik oynatma, döngü, kontroller vb. Gibi belirli nitelikleri de belirtebilirsiniz.

<video width="960" height="540" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

4. <progress>

<progress>elementi, bir görevin ilerlemesini temsil eder. Bu etiketi genellikle <meter> etiketi ile karıştırabiliyorlar burada birisi durum diğeri ise nitelik gösterir. 

<progress value="57" max="100">
</progress>

5. <meter>

Verileri belirli bir aralıktaki (bir gösterge) ölçmek için ölçüm öğesini kullanabilirsiniz.

Bu, minimum ve maksimum değerlerle veya bir yüzde ile elde edilebilir.

<meter value="7" min="0" max="10">7 out of 10</meter>

<meter value="0.4">40%</meter>

6. <data>

Öğenin içeriğinin makine tarafından okunabilir çevirisini belirtir. Ayrıca, insan tarafından okunabilir bir metin sağlar.

<ul>
  <li>
    <data value="010">Dogs</data>
  </li>
  <li>
    <data value="011">Cats</data>
  </li>
</ul>

7. <datalist>

<datalist> elementi, formun giriş alanında otomatik tamamlama özelliği sağlamak için kullanılır. ⁣ Kullanıcının girmesi için önceden tanımlanmış öneriler kümesini belirtir.

<input type="text" list="days" placeholder="Choose a Day">
<datalist id="days">
  <option value="Monday"></option>
  <option value="Tuesday"></option>
  <option value="Wednesday"></option>
  <option value="Thursday"></option>
  <option value="Friday"></option>
  <option value="Saturday"></option>
  <option value="Sunday"></option>
</datalist>

8. <noscript>

<noscript> element bir öğenin içindeki içerik , yalnızca JavaScript devre dışı bırakıldığında tarayıcı tarafından oluşturulur. JavaScript olmadan çalışmayı durduracak bileşenler için bir geri dönüş mekanizması sağlar.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

9. <detail>

<⁣detail> HTML tagı kendi seçtikleri bir kullanıcılar gizleyebileceğinizi konu veya görünümü hakkında ek bilgi sağlamak için gerekli olduğunda etiket katlanabilir bölümleri yapmak için kullanılır. ⁣ Ayrıntıları <summary>genişletmek veya daraltmak için tıklanabilecek başlığı belirten etiketi kullanır.

<details>
  <summary>Click To Open</summary>
  Hey, I am natively collapsable section. My content remains hidden till you click on summary.
</details>

10. <wbr>

<wbr> elementi, kelime molası için kelime çok uzun zaman kullanılan fırsatı gösteriyorsa ve tarayıcı rastgele yerde kırmak istemiyorum, sen want.⁣ sözden yardımcı olur.

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

11. <mark>

<mark> elementi herhangi bir CSS olmadan web sayfanıza bazı güzel vurgulamalar eklemek için kullanılan çok basit ve kullanışlı bir yerel etikettir.

<p>HTML can do <mark> MAGIC </mark>.</p>

12. <ins>ve <del>

<ins> öğesi, belgeye eklenen metinleri,  <del> ise belgeden silinen metin için kullanılır.

<p>Jatin is a
  <del>spider man</del>
  <ins>web developer</ins>
  from India.
</p>
#html