Memahami TAG area HTML

TokoDaring.Com – Memahami TAG area HTML. Tag <area> dalam HTML digunakan untuk menentukan area yang dapat diklik dalam peta gambar. Bila digabungkan dengan tag <map>, tag ini memungkinkan Anda membuat wilayah interaktif dalam gambar, sehingga memberikan pengalaman yang lebih menarik dan fungsional bagi pengguna.

Artikel Seri HTML Lainnya:

Tag <canvas> HTML: Digunakan untuk menggambar grafik melalui skrip

Memahami TAG area HTML

Tulisan blog ini akan membahas struktur, kasus penggunaan, dan praktik terbaik untuk menggunakan tag <area>, dengan contoh dan Tanya Jawab Umum untuk memandu Anda dalam penerapannya. Sehingga anda dapat mengerti dan Memahami TAG area HTML sepenuhnya dengan benar.

Apa itu Tag <area>?

Tag <area> menentukan area tertentu dalam peta gambar, yang dapat diklik atau berinteraksi dengan pengguna. Peta gambar terdiri dari satu gambar dan beberapa area yang ditentukan yang berfungsi sebagai hotspot. Hotspot ini dapat ditautkan ke halaman yang berbeda, memicu fungsi, atau menampilkan tooltip.

Elemen <area> digunakan bersama dengan tag <map> untuk membuat wilayah interaktif ini. Tag ini membantu pengembang membuat gambar lebih dinamis dengan mengubah berbagai bagian gambar menjadi tautan yang dapat diklik.

Sintaks Dasar, Dalam contoh ini, area tertentu pada gambar dapat diklik. Setiap elemen <area> menentukan bentuk dan ukuran area ini menggunakan atribut shape dan coords:

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Region 1">
  <area shape="circle" coords="337,300,44" href="link2.html" alt="Region 2">
</map>

Atribut Tag <area>

Tag <area> dilengkapi dengan beberapa atribut yang menentukan bentuk, ukuran, dan fungsi setiap area dalam peta gambar. Memahami atribut ini adalah kunci untuk menerapkan tag dengan benar.

• shape: Atribut ini menentukan bentuk area yang dapat diklik. Atribut ini dapat mengambil nilai seperti rect (persegi panjang), circle, atau poly (poligon).
• coords: Koordinat menentukan ukuran dan penempatan area dalam gambar. Koordinat ini bervariasi tergantung pada bentuknya.
• Untuk rect, koordinat menentukan dua titik: sudut kiri atas dan kanan bawah.
• Untuk circle, Anda menentukan titik tengah dan radius.
• Untuk poly, Anda menentukan serangkaian titik yang menguraikan bentuk.
• href: Atribut ini menyediakan URL halaman yang akan dibuka saat area diklik. Fungsinya mirip dengan href dalam tag jangkar (<a>).
• alt: Atribut alt menyediakan teks alternatif untuk aksesibilitas, yang menjelaskan wilayah bagi pembaca layar dan saat gambar tidak dimuat.

Penggunaan atribut ini memastikan bahwa setiap area dalam peta gambar berfungsi sebagaimana mestinya, baik itu mengarahkan pengguna ke halaman lain atau memicu interaksi.

Cara Membuat Peta Gambar Interaktif

Untuk membuat peta gambar interaktif, pertama-tama Anda memerlukan gambar, lalu tentukan wilayah yang dapat diklik dalam gambar tersebut menggunakan tag <area>. Setiap area dapat memiliki fungsi yang berbeda, dan Anda dapat menyesuaikannya dengan menentukan bentuk dan koordinat tertentu.

Berikut cara menentukan bentuk yang berbeda.

• Persegi Panjang, Koordinat 34,44,270,350 menentukan persegi panjang pada gambar, di mana 34,44 mewakili sudut kiri atas dan 270,350 mewakili sudut kanan bawah:

  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Region 1">

• Lingkaran, Di sini, nilai 100,100 menentukan pusat lingkaran, dan 50 adalah jari-jarinya:

  <area shape="circle" coords="100,100,50" href="page2.html" alt="Region 2">

• Poligon, Atribut coords mendefinisikan beberapa titik yang dihubungkan dengan garis untuk membuat bentuk khusus:

  <area shape="poly" coords="100,200,300,200,250,400" href="page3.html" alt="Region 3">

Dengan bentuk dan koordinat ini, Anda dapat menentukan beberapa area yang dapat diklik yang mengarahkan pengguna ke berbagai halaman web atau memicu tindakan JavaScript khusus.

Manfaat Menggunakan Tag <area>

Tag <area> menawarkan beberapa keuntungan bagi pengembang yang ingin menciptakan pengalaman pengguna yang lebih interaktif.

• Grafik Interaktif: Dengan menentukan area tertentu dalam gambar, Anda dapat menyediakan fungsionalitas tambahan dan melibatkan pengguna secara lebih efektif. Peta gambar sangat berguna dalam skenario saat pengguna perlu mengklik berbagai bagian grafik, seperti peta geografis.
• Navigasi yang Disempurnakan: Daripada menggunakan beberapa gambar dan tautan, Anda dapat menggunakan satu gambar dan menentukan berbagai wilayah yang dapat diklik, menyederhanakan tata letak dan navigasi Anda.
• Aksesibilitas: Dengan menambahkan teks alt deskriptif ke setiap <area>, Anda memastikan bahwa pengguna penyandang disabilitas dapat memahami peta gambar dan fungsinya, sehingga situs Anda lebih inklusif.

Menggunakan tag <area> juga membantu menjaga desain situs web Anda tetap bersih dan teratur sekaligus mempertahankan fungsionalitas yang tinggi.

Praktik Terbaik untuk Tag <area>

Untuk memastikan bahwa peta gambar Anda dapat diakses dan berfungsi, ikuti praktik terbaik berikut:

• Desain Responsif: Pastikan peta gambar Anda responsif. Gambar dan area terkaitnya harus diubah ukurannya dengan benar saat dilihat di perangkat yang berbeda, memastikan bahwa area yang dapat diklik tetap selaras dengan bagian gambar yang benar.
• Penggunaan Teks alt Deskriptif: Selalu sertakan atribut alt untuk mendeskripsikan setiap area peta gambar. Ini meningkatkan aksesibilitas bagi pengguna yang mengandalkan pembaca layar atau yang gambarnya dinonaktifkan di browser mereka.
• Pengujian di Seluruh Perangkat: Penting untuk menguji peta gambar di perangkat dan browser yang berbeda untuk memastikan bahwa area yang dapat diklik tetap berfungsi. Perangkat layar sentuh dapat menangani peta gambar secara berbeda, jadi penyesuaian mungkin diperlukan.

Dengan mengikuti panduan ini, Anda dapat membuat peta gambar yang dapat diakses dan responsif yang meningkatkan pengalaman pengguna.

Artikel tutorial HTML lainnya, lihat kategori artikel Coding For Fun.

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG area HTML

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG area HTML.

Referensi: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area.