11 Tag HTML yang Tidak Biasa untuk Meningkatkan Keterampilan Pengembangan Web Anda

,

Dan yang mewakili struktur dan konten halaman web Anda. Namun, bahasa HTML menawarkan lebih banyak lagi!

Dengan menjelajahi tag unik ini, Anda dapat meningkatkan fungsionalitas aplikasi web Anda, menjadikannya menonjol dari yang lain.

1. dan

Bayangkan Anda memiliki informasi atau konten ekstensif yang tidak ingin membuat pembaca kewalahan dengan segera. Itu Dan tag datang untuk menyelamatkan!

Tag ini bekerja sama untuk membuat bagian yang dapat diperluas dengan judul atau ringkasan yang dapat diklik oleh pengguna situs web Anda untuk ditampilkan. Secara default, konten di dalam elemen detail tidak akan ditampilkan, sehingga halaman Anda tetap rapi dan teratur.

Pengunjung Anda dapat dengan mudah mengklik ringkasan untuk mengakses informasi tersembunyi.

 <details>
  <summary>Click to reveal more information</summary>
  <p>This content will be hidden by default but will appear when the user
  clicks the summary.</p>
</details> 

Dengan tag ini, Anda dapat menyembunyikan sebagian besar teks, kode, atau informasi lainnya, memberikan pengalaman yang mudah digunakan sambil mempertahankan desain yang bersih. Mereka bahkan dapat membantu Anda menyempurnakan keterampilan Anda sebagai perancang antarmuka.

2.

Itu tag memungkinkan Anda menyorot bagian tertentu dari konten Anda, membuatnya menonjol secara visual. Saat Anda menggunakan elemen, browser biasanya menerapkan warna latar belakang kuning ke teks di dalamnya, menarik perhatian pembaca ke sana.

Fitur ini sangat berguna saat Anda ingin menekankan kata kunci, frasa penting, atau hasil pencarian di halaman web Anda.

 <p>
  You can use the <mark>mark</mark> tag to highlight important words or
  phrases.
</p> 

Misalnya, jika situs web Anda memiliki fungsi pencarian, Anda dapat menggunakan tag untuk menyorot kueri penelusuran yang cocok dengan hasil, sehingga memudahkan pengguna menemukan informasi yang relevan.

3.

Pernahkah Anda menghadapi situasi di mana konten menjadi usang atau tidak lagi relevan, tetapi Anda tetap ingin menampilkannya untuk tujuan historis atau menunjukkan perubahan dari waktu ke waktu?

Masukkan menandai! Itu berarti dicoret dan merender konten apa pun di dalam elemen dengan garis di tengah.

 <p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p> 

Dalam contoh ini, stok Habis teks akan ditampilkan dengan garis melewatinya, menunjukkan bahwa status stok produk telah berubah.

4.

Saat Anda ingin menambahkan makna semantik ke tanggal dan waktu di konten Anda, itu tag sangat berguna.

Menggunakan tanggal Waktu Anda dapat menentukan versi tanggal atau waktu yang dapat dibaca mesin, yang membantu browser, mesin telusur, dan pembaca layar memahami konteksnya.

 <p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p> 

Dengan menggunakan tag, Anda memberi konten Anda lebih banyak struktur dan membuatnya dapat diakses oleh lebih banyak pengguna, termasuk mereka yang memiliki keterbatasan fisik yang menggunakan pembaca layar.

5.

Mengelola teks dalam berbagai bahasa di halaman web Anda terkadang bisa menjadi tantangan, terutama jika setiap bagian memerlukan pemformatan yang berbeda.

Itu tag datang untuk menyelamatkan dengan mengisolasi bagian teks yang harus diperlakukan berbeda oleh browser karena persyaratan bahasa yang berbeda.

 <p>
  <bdi>5,000</bdi> people attended the conference.
</p> 

Dalam contoh ini, elemen membungkus nomor 5.000. Ini memastikan bahwa, jika teks di sekitarnya menggunakan bahasa yang berbeda atau memerlukan pemformatan yang berbeda, itu tidak akan mengganggu nomornya.

6. , ,

Untuk tipografi Asia Timur, di mana panduan pengucapan, furigana, atau anotasi lain biasanya digunakan di atas atau di bawah karakter, , Dan tag ikut bermain.

 <p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p> 

Dalam contoh ini, elemen berisi karakter 漢 (Kanji), dan elemen berisi pengucapan か ん (kan). Itu elemen menyediakan tanda kurung mundur untuk browser yang tidak mendukung anotasi ruby.

7.

Ketika Anda memiliki kata-kata panjang yang dapat merusak tata letak Anda, itu tag ada di sini untuk membantu. Ini menyarankan peluang untuk jeda baris (peluang jeda kata) dalam kata yang panjang, di mana browser dapat memilih untuk membungkus teks.

 <p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p> 

Pada contoh di atas, URL panjang menyertakan a elemen yang memungkinkan browser membaginya menjadi dua baris jika perlu, mempertahankan tata letak konten di sekitarnya.

8. _dan

Untuk notasi ilmiah atau matematika, rumus kimia, atau catatan kaki, Anda dapat menggunakan Dan tag untuk teks subskrip dan superskrip, masing-masing.

 <p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p> 

Contoh ini menggunakan tag untuk menampilkan 2 di dalam H2O sebagai subskrip, sedangkan tag menampilkan eksponen dalam teorema Pythagoras.

9.

Perlu merepresentasikan pengukuran skalar dalam rentang yang diketahui, seperti penggunaan disk, peringkat, atau nilai ujian? Itu tag telah membantu Anda.

Menggunakan nilai, minDan maks atribut, Anda dapat menentukan masing-masing nilai saat ini, nilai minimum, dan nilai maksimum pengukuran.

 <meter value="75" min="0" max="100">75%</meter> 

Dalam contoh ini, elemen mewakili nilai ujian dari 75%.

10.

Saat Anda perlu membuat kotak dialog atau overlay jendela untuk modals atau interaksi pop-up modal yang berperilaku baik,

tag adalah cara untuk pergi. Anda dapat menggunakan membuka atribut untuk menampilkan kotak dialog secara default.

 <dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog> 

Dalam contoh ini, kotak dialog sederhana berisi paragraf dan tombol tutup muncul saat halaman dimuat, terima kasih kepada membuka atribut. Anda dapat menyesuaikan konten dan perilaku kotak dialog menggunakan JavaScript untuk interaksi lebih lanjut.

11.

Menggunakan tag untuk mengelompokkan opsi terkait dalam a elemen tarik-turun. Ini memungkinkan Anda untuk mengatur dan mengkategorikan opsi untuk navigasi dan pemilihan yang lebih mudah.

• Itu tag adalah elemen penampung yang terkait dengan grup tag dalam a elemen.
• Ini membantu mengatur opsi dengan membuat pengelompokan atau kategorisasi visual dalam menu tarik-turun.
• Itu tag memerlukan atribut label, yang menentukan nama atau judul grup opsi.
• Itu dapat berisi satu atau lebih tag sebagai elemen turunannya, yang mewakili opsi individual dalam grup.

Misalnya:

 <select>
  <optgroup label="Asia">
    <option value="kr">South Korea</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select> 

Contoh ini mengelompokkan dropdown pilih menjadi dua bagian: AsiaDan Eropa. Setiap grup berisi tag yang mewakili berbagai negara di wilayah tersebut.

Tingkatkan Kemahiran Anda dalam Pengembangan Web

Mempelajari tag HTML yang kurang dikenal ini dapat sangat meningkatkan keterampilan pengembangan web Anda. Meskipun kurangnya pengakuan, mereka menawarkan fitur berharga untuk konteks tertentu.

Menambahkan tag ini ke keahlian Anda akan meningkatkan interaktivitas, aksesibilitas, dan merampingkan proses pengembangan web. Ingat, meskipun mungkin tidak dikenal, mereka memiliki pengaruh yang signifikan pada perjalanan Anda sebagai pengembang web.