HTML - Microdata: A Panduan Pemula

Hai هناك، pengembang web masa depan! Hari ini, kita akan melangkah ke dalam dunia menarik HTML Microdata. Jangan khawatir jika Anda baru dalam hal ini - saya akan menjadi panduan yang ramah bagi Anda, dan kita akan berjalan langkah demi langkah. Pada akhir panduan ini, Anda akan terpesona oleh betapa banyak yang Anda pelajari!

Apa Itu Microdata?

Sebelum kita mendalam, mari mulai dari dasar. Microdata adalah cara untuk menambahkan arti ekstra ke konten HTML Anda. Itu seperti memberikan halaman web Anda sebuah bahasa rahasia yang mesin pencari dan program komputer lainnya dapat memahami. Keren, kan?

Menggunakan Microdata dalam dokumen HTML

Sekarang, mari kita kerjakan kode! Ini adalah contoh sederhana tentang bagaimana kita dapat menggunakan Microdata:

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<span itemprop="telephone">(123) 456-7890</span>
</div>

mariuraikan ini:

• itemscope memberitahu browser bahwa <div> ini mengandung Microdata.
• itemtype menentukan jenis item yang kita deskripsikan (dalam hal ini, seorang Orang).
• itemprop memberi label pada informasi tertentu (nama, judul pekerjaan, telepon).

Pikirkan seperti mengisi formulir tentang orang. Setiap itemprop seperti sebuah field dalam formulir itu.

Atribut Global

Microdata memperkenalkan beberapa atribut baru yang dapat digunakan pada setiap elemen HTML. Mari lihat mereka dalam tabel praktis:

Atribut	Deskripsi
itemscope	Menandai bahwa HTML mengandung Microdata
itemtype	Menentukan vocabulari (misalnya, schema.org)
itemprop	Menentukan properti dari item
itemid	Menyediakan identifikasi unik untuk item
itemref	Mengacu pada properti yang bukan turunan dari itemscope

Jenis Data Properti

Ketika kita menggunakan Microdata, kita dapat menentukan jenis data yang berbeda. Ini adalah tabel lain yang menunjukkan jenis data umum:

Jenis Data	Contoh
Text	<span itemprop="name">John Doe</span>
Number	<span itemprop="age">30</span>
Date	<time itemprop="birthDate" datetime="1990-05-15">May 15, 1990</time>
URL	<a href="http://example.com" itemprop="url">My Website</a>

dukungan API Microdata

Sekarang, ini adalah tempat yang benar-benar menarik! Browser yang mendukung Microdata memiliki API (Application Programming Interface) khusus yang memungkinkan JavaScript untuk berinteraksi dengan Microdata pada halaman.

Ini adalah contoh sederhana:

var items = document.getItems("http://schema.org/Person");
for (var i = 0; i < items.length; i++) {
var name = items[i].properties["name"][0];
console.log("Menemukan orang: " + name);
}

Kode ini menemukan semua item "Orang" pada halaman dan mencatat nama mereka ke konsol. Itu seperti memiliki fungsi pencarian super-powered untuk HTML Anda!

Mendefinisikan Vocabulari Microdata

Terakhir tapi bukan paling kurang, mari bicarakan vocabulari. Vocabulari seperti sebuah kamus untuk Microdata. Itu menentukan properti apa saja yang dapat dimiliki item. Vocabulari yang paling banyak digunakan adalah Schema.org, yang didukung oleh mesin pencari besar.

Ini adalah contoh menggunakan vocabulari Schema.org untuk sebuah film:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Direktur: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science Fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Dalam contoh ini, kita mendeskripsikan sebuah film beserta namanya, direktur, genre, dan tautan ke trailer-nya. Mesin pencari dapat menggunakan informasi ini untuk menampilkan rich snippets dalam hasil pencarian.

Kesimpulan

Dan begitulah, teman-teman! Kita telah menjelajahi negeri HTML Microdata, dari konsep dasar hingga penggunaan yang lebih lanjut. Ingat, Microdata tentang menambahkan arti ke HTML Anda, membuatnya mudah bagi mesin untuk memahami konten Anda.

Saat Anda terus menjalankan perjalanan pengembangan web Anda, Anda akan menemukan bahwa Microdata adalah senjata rahasia di dalam peralatan Anda. Itu membantu mesin pencari memahami konten Anda lebih baik, mungkin meningkatkan visibilitas situs Anda. Dan itu adalah cara bagus untuk mengstrukturkan data Anda dalam format standar.

Terus latih, terus jelajahi, dan terutama, bersenang-senanglah dengan itu! Siapa tahu? Situs berikutnya Anda bangun dengan Microdata mungkin saja yang mengubah dunia. Selamat berkoding!

Credits: Image by storyset