Istilah "web semantik" saat ini digunakan dengan semakin meluas. Namun, bagi banyak orang, mereka tidak menyadari sepenuhnya tentang esensi dari semantik yang sangat dipuji ini. Pada dasarnya, semantik memungkinkan informasi yang dibutuhkan atau diinginkan dapat diekstrak dari jumlah data yang besar.
Sebuah contoh konkret dapat menjelaskan pentingnya semantik. Foto digital adalah hal yang bagus. Secara langsung setelah pengambilan foto, Anda dapat menampilkannya melalui internet ke seluruh dunia. Apa yang berlaku di lingkungan pribadi juga telah lama berlaku di lingkup profesional. Agensi gambar, museum, perpustakaan, dan fotografer menawarkan foto, lukisan, atau versi digital dari karya tulis berharga melalui basis data gambar profesional. Di situs web yang bersangkutan, terdapat kotak pencarian yang memungkinkan platform itu dapat dicari. Contoh yang paling populer untuk mesin pencari gambar di web 2.0 pasti adalah Flickr.
Mereka yang telah menggunakan mesin pencari gambar seperti itu pasti mengetahui batasan-batasannya: Ketika Anda memasukkan istilah kol, misalnya, Anda akan melihat foto-foto dari berbagai bidang. Jadi, mesin pencari gambar Yahoo! menampilkan foto kolibri, seorang pemain tenis bernama Kohl, dan mantan Kanselir Helmut Kohl.
Pada titik ini, salah satu kekurangan dari WWW klasik menjadi jelas: Saat ini, informasi yang disediakan dapat dipahami oleh manusia, namun tidak dapat diinterpretasikan dengan benar oleh mesin – dalam contoh yang ditunjukkan, yaitu mesin pencari.
Mesin hanya dapat membaca informasi jika memang informasi tersebut tersedia. Dan di situlah letaknya pentingnya semantik.
Struktur Dokumen
Pada versi HTML sebelumnya, tidak ada cara untuk struktur dokumen secara semantik. Ketika seseorang ingin menyusun struktur halaman web, mereka hanya memiliki judul dan paragraf teks sebagai pilihan yang tersedia. Berikut adalah contoh klasik untuk struktur halaman web:
<h1> Judul </h1> <p> Paragraf </p> <h2> Subjudul </h2> <p> Paragraf di dalam subjudul </h2> <h3>
HTML menyediakan elemen struktur dokumen seperti h1 hingga h6. Namun, struktur yang sangat dalam tidak dapat dibuat dengan elemen tersebut. Karena elemen seperti h7 atau h8 tidak disediakan dalam HTML. Di sinilah HTML5 berperan dengan memperkenalkan beberapa elemen struktur tambahan.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Elemen-elemen ini akan dijelaskan dalam tutorial ini. Namun, sebelumnya perlu dicatat: Jangan harapkan elemen-elemen ini memberikan penampilan yang menakjubkan secara visual. Untuk membuat halaman web berbasis elemen semantik tampak menarik, CSS harus digunakan. Tentang itu akan kita bahas nanti.
Anda mungkin sudah familiar dengan beberapa elemen semantik, meskipun pada pandangan pertama mungkin tidak terlihat terkait dengan semantik. Berikut adalah contoh elemen seperti itu:
<progress min="0" max="100" value="40"></progress>
Dengan elemen ini, sebuah bilah kemajuan akan dihasilkan. (Elemen progress telah dijelaskan secara lengkap dalam seri ini).
Elemen ini menjelaskan betapa mudahnya membuat konten yang dapat dikaitkan dengan konteks yang sesuai. Bagi perangkat lunak, hal ini akan langsung dikenali bahwa itu adalah latar kemajuan. Sedangkan solusi yang menggunakan JavaScript untuk membuat bilah kemajuan belum tentu begitu.
Struktur Elemen Semantik
Pada dokumen HTML "biasa", div digunakan untuk struktur konten. Untuk dapat memformatnya menggunakan CSS, div-element diberi kelas atau ID. Prinsip ini juga digunakan dalam HTML5. Sebenarnya, survei yang dilakukan oleh Google telah menunjukkan bahwa di banyak dokumen, kelas yang sama selalu digunakan.
Sebagai contoh:
<div class="nav"></div>
Banyak pengembang menggunakan, misalnya, nav untuk menempatkan navigasi di dalam elemen div. Namun, dalam HTML5, hal tersebut tidak terlihat seperti itu:
<nav>Konten</nav>
Dengan elemen nav, jelas bahwa ini bukan hanya daftar hyperlink. Sesungguhnya, elemen ini menggambarkan sebuah blok berisi informasi tentang navigasi situs web dalam suatu konteks tertentu.
Strukturisasi Modern
Bagaimana sebenarnya struktur dokumen HTML biasanya? Pada dasarnya, struktur ini mirip tidak peduli konten apa yang akhirnya ada di halaman tersebut. Umumnya, area berikut ini termasuk:
• Header
• Menu Utama
• Isi
• Footer
Sebuah situs web yang menggunakan div-element untuk struktur mungkin terlihat seperti ini:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Cari</div>
<div id="nav">Menu Utama</div>
</div>
<div id="content">
<h1>Ini adalah konten</h1>
<div class="section">
<h2>Subjudul</h2>
<h3>Bagian</h3>
<!-- Di sini berisi konten -->
</div>
<div class="section">
<h2>Subjudul</h2>
<!-- Di sini berisi konten -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Menu Bawah</div>
</div>
<div id="footer">Bagian Kaki</div>
</body>
Mungkin Anda sudah familiar dengan konstruksi div seperti ini. Agar strukturnya logis bagi pengembang, mereka memberikan kelas atau ID yang sesuai dengan area div, yang memiliki nama yang "berbicara". Sehingga bagi pengembang, misalnya jelas bahwa konten yang terkait dengan bagian kaki halaman berada di area div dengan ID footer. Permasalahannya: Nama-nama tersebut mungkin memberikan petunjuk tentang struktur situs web, namun secara semantik, situs web tersebut belum sepenuhnya terstruktur secara baik. Dan di sinilah elemen-elemen HTML baru berperan. Karena elemen-elemen ini pertama kalinya memungkinkan strukturasi yang sesungguhnya dari dokumen atau situs web.
Untuk pemahaman yang lebih baik, mari kita lihat dokumen HTML5 berikut:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Cari</div>
<nav>Menu Utama</nav>
</header>
<article>
<h1>Ini adalah konten</h1>
<section>
<h2>Subjudul</h2>
<h3>Bagian</h3>
<!-- Di sini berisi konten -->
</section>
<section>
<h2> Subjudul</h2>
<!-- Di sini berisi konten -->
</section>
</article>
<aside>
<nav>Menu Bawah</nav>
</aside>
<footer>Bagian Kaki</footer>
</body>
Tentu saja, saya akan membahas elemen-elemen yang digunakan di tutorial berikutnya. Namun, hanya dengan melihat contoh ini saja, Anda dapat melihat manfaat dari penggunaan elemen-elemen ini. Dengan ini, bisa diidentifikasi dengan jelas bagian-bagian halaman dengan elemen-elemen khusus yang memang ditujukan untuk bagian tersebut. Semua yang terkait dengan kepala halaman dapat dimasukkan ke dalam elemen header.
Selain itu, mulai sekarang elemen section dan article telah tersedia, yang memungkinkan struktur isi halaman yang jauh lebih baik. Seperti yang Anda lihat, penting untuk memahami secara mendalam kemungkinan-kemungkinan yang dimiliki oleh HTML5 dalam hal struktur semantik dokumen.
