Semantic HTML
Semantic HTML telah menjadi komponen vital dalam toolbox setiap web developer. Bukan sekedar kode, semantic HTML adalah bahasa yang membantu mesin dan manusia sama-sama memahami esensi dan struktur konten web. Mulai dari meningkatkan aksesibilitas bagi penyandang disabilitas sampai membantu mesin pencari mengindeks halaman dengan lebih akurat, penggunaan semantic HTML berguna sebagai cara kita mendesain dan berinteraksi dengan web.
Apa itu Semantic HTML?
Semantic HTML adalah konsep dalam pengembangan web yang berfungsi menyediakan makna atau arti lebih dalam kode HTML. Dalam semantic HTML, masing-masing elemen memiliki nama yang mencerminkan arti dari kontennya, bukan hanya presentasinya. Semantic membantu mesin pencari dan perangkat pembaca layar (screen reader) untuk memahami struktur dan konten dari halaman web dengan lebih maksimal. Artinya, jika kamu ingin membuat kode yang mudah dipahami, tidak hanya oleh manusia tapi juga oleh mesin, semantic HTML adalah solusi yang tepat.
Perbedaan semantic dan non-semantic HTML
Mungkin kamu bertanya-tanya, “Apa perbedaan antara semantic HTML dan non-semantic HTML?”
Perbedaan keduanya cukup sederhana. Semantic HTML menggunakan elemen yang menggambarkan arti dari konten, seperti < article >, < section >, dan < nav >. Sedangkan non-semantic HTML menggunakan elemen seperti < div > dan < span > yang tidak mengungkapkan informasi apa pun tentang kontennya. Untuk memahami lebih jelas, mari kita lihat contoh kode berikut:
Semantic HTML:
<nav>
<ul>
<li><a href="home.html">Beranda</a></li>
<li><a href="about.html">Tentang</a></li>
</ul>
</nav>
Non-semantic HTML:
<div>
<ul>
<li><a href="home.html">Beranda</a></li>
<li><a href="about.html">Tentang</a></li>
</ul>
</div>
Pada contoh semantic HTML, kita menggunakan tag < nav > yang secara eksplisit menunjukkan ini adalah bagian navigasi. Sedangkan pada contoh non-semantic HTML, kita menggunakan tag < div > yang tidak memberikan informasi apa pun tentang kontennya.
Mengapa Harus Pakai Elemen Semantik?
Ada beberapa alasan pentingnya memakai elemen semantik, yaitu:
1. Aksesibilitas
Elemen-elemen semantic dalam HTML memudahkan screen reader dan teknologi bantuan lainnya untuk menginterpretasikan konten halaman web. Sebagai contoh, menggunakan tag seperti < header >, < footer >, dan < nav > akan membantu screen reader mengidentifikasi dan mengakses bagian-bagian penting dalam sebuah halaman. Hal ini membantu audiens yang memiliki keterbatasan visual atau gangguan lainnya untuk mengakses dan menjelajahi website lebih mudah.
2. Untuk SEO (Search Engine Optimization)
Semantic HTML juga berperan penting dalam SEO. Mesin pencari seperti Google memahami struktur halaman web melalui elemen-elemen semantic dan menilai relevansinya dengan topik yang dicari audiens. Contohnya, menggunakan tag < h1 > untuk judul utama akan memberi tahu mesin pencari bahwa teks di dalamnya adalah informasi penting dari halaman tersebut. Informasi ini dapat meningkatkan ranking halaman dalam hasil pencarian, sehingga menarik lebih banyak pengunjung ke website.
3 Pemeliharaan kode
Penggunaan elemen-elemen semantic dalam HTML membantu rekan-rekan developer yang mungkin akan bekerja pada kode tersebut di masa depan. Elemen-elemen seperti < article >, < section >, dan < aside > membuat struktur kode lebih jelas dan logis. Kemudahan ini memungkinkan mereka memahami, mengubah, atau memperluas kode tanpa harus menghabiskan lebih banyak waktu menelusuri dan memahami strukturnya.
4. Kemudahan dalam pengembangan tim
Kode yang ditulis dengan semantic HTML lebih mudah dipahami oleh anggota tim lainnya. Ketika setiap elemen memiliki arti yang jelas, kolaborasi antara anggota tim menjadi lebih lancar, sehingga mengurangi risiko kesalahan interpretasi dan mempercepat proses pengembangan.
5. Kompatibilitas dengan device dan browser lain
Elemen semantic membantu dalam menjaga konsistensi tampilan dan fungsionalitas di berbagai device dan browser. Fungsi ini mengurangi waktu dan upaya yang dibutuhkan untuk uji kompatibilitas, membantu dalam menciptakan pengalaman pengguna yang seragam.
Jenis-jenis Elemen Semantic HTML untuk Struktur
Berikut jenis-jenis elemen semantic HTML untuk struktur:
Jenis-jenis Elemen Semantic HTML untuk Teks
Selain struktur, ada juga jenis-jenis elemen semantic HTML untuk teks:
Cara Menggunakan Elemen Semantic HTML
Berikut cara menggunakan elemen semantic HTML:
1 Menentukan struktur halaman
- Header < header >: header merupakan bagian paling atas di suatu page. Tentukan header halaman atau bagian yang berisi logo, judul, dan navigasi.
<header>
<h1>Judul Situs</h1>
<nav>
<a href="#">Beranda</a> | <a href="#">Kontak</a>
</nav>
</header>
- Navigasi < nav >: jika ada menu navigasi, gunakan tag < nav > untuk mengelompokkan link.
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
- Konten utama < main >: gunakan tag < main > untuk bagian isi di halaman.
<main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
</main>
2 Mengelompokkan konten terkait
Langkah selanjutnya, kelompokkan konten terkait dalam suatu bagian dengan < section >.
<section>
<h3>Sub Bagian</h3>
<p>Deskripsi sub bagian...</p>
</section>
3 Menambahkan teks dengan elemen semantic
- Judul dan paragraf (< h1 > - < h6 >,
gunakan elemen ini untuk judul dan paragraf. Disarankan untuk menggunakan heading text secara berurutan (seperti dari < h1 >, kemudian < h2 >, lanjut ke < h3 > dan seterusnya) karena akan memengaruhi SEO. Urutan yang benar membantu mesin pencari memahami struktur konten dengan lebih baik. Jika ingin mengubah size tulisan (misalnya membuat teks yang biasanya berada di < h2 > menjadi lebih kecil) kamu dapat menggunakan CSS daripada harus melompati urutan heading, agar tetap menjaga struktur semantiknya.
- Kutipan (< blockquote >, < q >): gunakan untuk menyertakan kutipan dalam teks.
4 Menambahkan media dan informasi tambahan
Jika diperlukan, gunakan < figure > dan < figcaption > untuk gambar yang memerlukan keterangan tambahan.
<figure>
<img src="gambar.jpg" alt="Deskripsi Gambar">
<figcaption>Keterangan gambar</figcaption>
</figure>
5. Menambahkan footer (< footer >)
Langkah terakhir, tambahkan footer untuk informasi tambahan, kontak, atau hak cipta. Footer biasanya terdapat pada bagian paling bawah pada suatu page.
<footer>
<p>© 2023 Perusahaan Kami</p>
</footer>
bisakah semantic HTML dengan CSS dan JavaScript digabungkan?
Pada dasarnya, kamu dapat menggunakan CSS untuk mengatur tampilan elemen semantic dan JavaScript untuk menambahkan fungsionalitas, sama seperti kamu akan melakukannya dengan elemen HTML lainnya.
Bisakah menggunakan semantic HTML dengan framework seperti React atau Angular?
Kamu bisa menggunakan semantic HTML dalam pengembangan dengan framework modern seperti React atau Angular. Hal ini membantu meningkatkan struktur dan aksesibilitas kodemu.
Apakah ada alat untuk menguji semantic HTML?
Ada beberapa alat, seperti W3C Markup Validation Service atau alat aksesibilitas yang dapat membantu menguji dan memastikan bahwa kode HTML milikmu semantik dan sesuai dengan standar.
Penutup
Semantic HTML adalah tentang penggunaan elemen HTML yang memberikan makna eksplisit, bukan hanya struktur, untuk konten yang mereka kelilingi.
Lebih dari sekedar kode, semantic HTML adalah pendekatan yang mampu meningkatkan aksesibilitas, memudahkan mesin pencari untuk mengindeks, serta menyediakan fondasi kokoh dalam pemeliharaan kode yang lebih efisien.