Semantic HTML merupakan elemen yang memiliki sebuah arti yang dimana artinya ini menjelaskan secara langsung untuk browser yang mengacu kepada sumbernya di situs W3Schools.

Praktiknya ada beberapa contoh elemen atau elemen non-semantic misalnya saja tag <div> dan <span> yang dimana tag ini tidak memberi tahukan apapun tentang isi konten.

Berbeda dengan elemen semantic misalnya seperti <form>, <table> dan <article> yang memiliki definisi dengan jelas terhadap isi dari kontennya.

Jadi Apa Itu Semantic HTML ?

Mengenai apa itu semantic HTML bisa disimpulkan bahwa semantic HTML ini merupakan elemen HTML yang memperkenalkan makna dari pada hanya sekedar tampilannya saja.

Misalnya saja tag <p> bahwa teks yang didalam tag ini adalah paragraf. Ini adalah salah satu contoh tag semantic dan berupa sebuah penunjukan/presentasi bahwa teks tersebut adalah paragraf dan web browser pun tau cara menampilkannya.

Baik, agar lebih mengerti saya berikan contoh lainnya dari tag semantic HTML diantaranya adalah yang termasuk kedalam header yaitu <h1> sampai ke <h6>, <blockquote>, <em> dan <code>.

Sebenarnya ada banyak tag semantic selain yang saya sebutkan diatas yang dapat kamu gunakan untuk membangun situs web yang sesuai dengan standar.

Macam-macam tag semantic HTML

Kenalan dulu dengan apa itu semantic di html sangat penting dalam menunjang pembelajaran dan tidak kalah penting juga teman-teman mengetahui macam-macam tag yang banyak digunakan di semantic HTML.

Berikut ini adalah macam-macam semantic HTML tag yang Kami sajikan dalam bentuk tabel dan harus teman-teman ketahui.

Nama TagKeterangan
<abbr>Singkatan
<acronym>Akronim
<blockquote>Kutipan panjang
<dfn>Definisi
<address>Alamat
<cite>Kutipan
<code>Referensi kode
<tt>Teks teletype
<div>Divisi logis
<span>Wadah gaya inline generik
<del>Teks yang dihapus
<ins>Teks yang dimasukkan
<em>Tekanan
<strong>Penekanan kuat
<h1>Judul tingkat pertama
<h2>Judul tingkat ke-dua
<h3>Judul tingkat ke-tiga
<h4>Judul berita tingkat ke-empat
<h5>Judul berita tingkat ke-lima
<h6>Judul tingkat ke-enam
<hr>Tematik break
<kbd>Teks yang akan dimasukkan oleh pengguna
<pre>Teks pra-format
<q>Kutipan inline pendek
<samp>Output sampel
<sub>Subskrip
<sup>Superscript
<var>Variabel atau teks yang ditentukan pengguna

Contoh & Perbedaan Semantic HTML dengan Non-Semantic HTML

Kode dibawah ini adalah Semantic HTML

Semantic HTML

Kode dibawah ini adalah Non-Semantic HTML

Non-Semantic HTML

Penjelasan dari kedua kode diatas

  • Judul pada bagian kode semantic (gambar pertama) menggunakan elemen yang sesuai yaitu dengan menggunakan Heading level 5 yang ditulis dengan tag h5, sedangkan pada bagian koden non-semantic (gambar kedua) judul menggunakan elemn tag Bold atau ditulis dengan elemn <b>, yang dimana secara fungsi sudah jelas berbeda dan tidak ada arti apapun (seperti bagian kode semantic yang dimana memang fungsinya digunakan untuk judul).
  • List yang semantic itu menggunakan elemen <li> yang di lapisi tag unordered list yaitu <ul>, sedangkan kode yang non-semantic itu menggunakan line break (<br>) dan menambahkan gambar bullet seperti pada bagian kode html <img src=’o.jpg”>.

Mana yang menurut kamu yang lebih mudah ? jawab di kolom komentar ya !

Kesimpulan

Berdasarkan penjelasan dan contoh-contoh diatas dapat kita simpulkan secara bersamaan bahwa istilah semantic pada HTML adala penggunaan elemn HTML yang benar untuk mempermudah, mempersingkat dan memperkuat makna konten pada halaman web.

Jadi, bukan hanya sekedar mendefinisikan tampilannya saja. Semantic HTML yang benar dapat membantu agar website kita mudah terindex mesin pencari juga, screen reader, dan menyederhanakan coding.