Kategoriler
Kodlama

Bilmediğiniz 12 HTML etiketi

Muhtemelen varlığından bile haberdar olmadığınız 12 HTML etiketini inceliyoruz.

  • Volkan Yılmaz
  • Yazı tarihi 10 Eylül 2020
12 HTML Tags You Dont Know
Muhtemelen varlığından bile haberdar olmadığınız 12 HTML etiketini inceliyoruz.

HTML(Hypertext Markup Language) Web sayfalarını tasarlamak için kullanılan bir programlama dilidir.

Bu yazıda, HTML kullanılarak yapılabilecek bazı harika şeylere göz atacağız. Bazı html etiketlerine bakalım, muhtemelen varlığından bile haberdar olmadığınız bazı html etiketlerine bakalım.

Hadi başlayalım 💪

<figure>

Bu, bir fotoğrafı işaretlemek için kullanılabilir, <figcaption> elemanı içerebilir. Ö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>

<audio>

<audio> öğesi, başka bir eklenti kullanmaya gerek kalmadan bir web sayfasına ses dosyası eklemenin bir yoludur. 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 -controls- özelliği kullanılabilir.

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

<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 veya herhangi bir yere yükleyebilir bu etiketle sayfaya yerleştirebilirsiniz, 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>

<progress>

<progress> etiketi, bir görevin ilerlemesini temsil eder. <meter>(bir gösterge gösterir) etiketiyle karıştırılmamalıdır. Value ve maks değerlerini içerir.

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

<meter>

Belirli bir aralıktaki verileri(bir gösterge) ölçmek için meter öğ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>

<data>

Öğenin içeriğinin makine tarafından okunabilir( machine-readable) ç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>

<datalist>

<datalist>, 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="Bir gün seçin">
<datalist id="days">
  <option value="Pazartesi"></option>
  <option value="Salı"></option>
  <option value="Çarşamba"></option>
  <option value="Perşembe"></option>
  <option value="Cuma"></option>
  <option value="Cumartesi"></option>
  <option value="Pazar"></option>
</datalist>

See the Pen Datalist Tag by Jatin Rao (@jatinrao)

<noscript>

<noscript> 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 yedek mekanizmayı sağlar.

<noscript><h2>Tarayıcınızda JavaScript devre dışıdır.</h2></noscript>

<detail>

<detail> gizleyebileceğiniz konu veya görünümü hakkında ek bilgi sağlamak için, gerekli olduğunda bu etiket katlanabilir. <summary> ile genişletmek veya daraltmak için tıklanabilecek bir başlıkla ayrıntıları belirtir.

<details>
  <summary>Tıklayıp açınız</summary>
  Hey, açılıp kapanabilen bir bölümüm. İçeriğim siz tıklayana kadar gizli kalır.
</details>

<wbr>

<wbr> 🍞 eğer kelime çok uzun ise kullanılabilir ve kelimeyi devam ettirir.

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

<mark>

<mark> herhangi bir CSS sitili kullanmadan 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>

<ins> ve <del>

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

<p>Volkan is a
  <del>spider man</del>
  <ins>web developer</ins>
  from Turkey.
</p>

Bonuslar:

<address>: iletişim bilgilerini göstermek için.

<time>: zaman içinde belirli bir dönemi temsil eder.

<var>: x & y gibi matematiksel değişkenleri belirtmek için.

Referans kaynaklar: