Tahukah Anda, Pengertian Semantic HTML, Apa itu Semantic Elements dan Markup? Macam-Macam Tag, Manfaat, Contoh dan Perbedaannya dengan Non-Semantic serta Kenapa itu Penting? Benar, ketika Anda belajar tentang HTML dan web, atau mungkin kalian juga sudah mengenal banyak tentang berbagai akronim yang terdapat dalam pengembangan atau front-end development. Anda mungkin menemukan bahwa Anda menemukan satu kata spesifik berulang kali yang sering kali tidak terdefinisi yaitu adalah kata itu semantic atau semantik.

Perlu kalian ketahui, sebuah prinsip penting dalam web design adalah ide untuk menggunakan elemen HTML untuk menunjukkan apa sebenarnya mereka, daripada bagaimana mereka dijelaskan agar dapat muncul di browser secara default. Betul, ini dikenal sebagai cara kerja penggunaan HTML semantic (semantik). Terkait hal tersebut, dalam postingan kali ini, Kami akan membahas tentang apa itu pengertian semantic HTML serta apa yang membedakan mereka dengan non-semantic secara lebih detail dan lengkap. Baiklah langsung saja, berikut ini adalah ulasannya!

Pengertian Semantic HTML

Juga dikenal dengan semantic tag atau element, semantik atau semantic HTML adalah elemen atau tag yang memiliki sebuah arti, elemen semantik dengan jelas menjelaskan langsung artinya untuk browser dan pengembang berdasarkan simpulan Kami yang mengacu pada sumber Situs W3Schools.

Terkait praktiknya sendiri, beberapa contoh dari elemen atau non-semantic element adalah seperti tag <div> dan <span> di mana mereka tidak memberi tahu apa-apa tentang isi konten mereka.

Untuk eelemen atau semantic elements, yaitu seperti <form>, <table>, dan <article> yang mendefinisikan dengan jelas tentang isi kontennya.

Apa itu Semantik atau Semantic Elements?

Jadi, apa itu sebenarnya yang dimaksud dengan semantik atau semantic elements ini? Seperti yang sudah Kami jelaskan di atas istilah ini sama dengan semantic HTML, namun lebih merujuk kepada penggunaan elemennya.

Semantik atau semantic elements adalah elemen HTML yang memperkenalkan makna ke halaman web daripada hanya sekedar presentasi.

Sebagai contoh misalnya, seperti tag <p> yang menunjukkan bahwa teks terlampir adalah paragraf. Ini merupakan tag semantik dan berupa sebuah presentasi karena orang tahu apa paragraf itu dan web browser (baca pengertian web browser di sini) tahu cara menampilkannya.

Contoh lainnya dari tag semantic HTML atau HTML semantik ini termasuk tag dalam header yaitu <h1> hingga <h6>, <blockquote>, <code> dan <em>.

Ada banyak lagi tag HTML semantik yang dapat digunakan saat Anda membangun situs web yang sesuai standar dan itu akan Kami jelaskan pada bagian macam-macam tagnya.

Apa Semantic Markup?

Kemudian, ada juga istilah semantic markup, pada dasarnya istilah ini mempunyai makna dan arti yang sama dengan semantic HTML di atas.

Menurut sumber dari Situs Dictionary, semantik merujuk pada penafsiran yang benar tentang arti kata atau kalimat.

Menggunakan kata secara semantik berarti menggunakannya dengan cara yang selaras dengan makna kata tersebut. Ketika kita menyalahgunakan kata, kita tidak menggunakannya secara semantik.

Dalam Hyertext Markup Language (HTML) ada banyak tag yang memiliki makna semantik.

Dimana, elemen itu sendiri menyampaikan beberapa informasi tentang jenis konten yang terkandung di antara tag pembuka dan penutup.

Misalnya, ketika browser menemukan tajuk <h1> dia mengartikan tag itu berarti bahwa isi dari elemen “h1” merupakan sebuah judul dan tajuk paling penting dari bagian yang berisi elemen tersebut.

Arti semantik dari tag “h1” adalah bahwa tag ini digunakan untuk mengidentifikasi bagian header yang paling utama dan penting dari halaman web atau bagian tertentu.

Macam-Macam Tag Semantic HTML

Dalam membahas mengenai apa itu pengertian semantik atau semantic HTML, adalah merupakan hal yang penting bagi kalian untuk mengetahui apa saja macam-macam tagnya yang tersedia, terutama sejak dirilisnya HTML5.

Meskipun hampir setiap tag HTML4 dan semua tag HTML5 memiliki makna semantik, perlu kalian ketahui bahwa beberapa tag pada dasarnya memang bersifat semantik.

Misalnya seperti HTML5 (baca pengertian HTML5 di sini) yang telah mendefinisikan kembali makna tag <b> dan <i> menjadi semantik.

Tag <b> tidak menyampaikan kepentingan dan pesan ekstra, melainkan hanya teks yang biasanya dicetak tebal.

Tag <i> juga tidak menyampaikan arti penting atau penekanan tambahan, melainkan mendefinisikan teks yang biasanya diterjemahkan italics.

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

Nama Tag	Keterangan
<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

Manfaat Semantic HTML

Setelah kita mengetahui apa pengertian semantik atau semantic HTML element, tentunya kita juga harus mengetahui apa sebenarnya manfaat dari segi penggunaannya bukan?

Manfaat utama dalam menulis HTML semantik berasal dari apa yang seharusnya menjadi tujuan halaman website dalam berkomunikasi.

Dengan menambahkan tag semantic (semantik) ke dokumen Anda, Anda memberikan informasi tambahan tentang dokumen itu, yang membantu dalam komunikasi.

Secara khusus, tag semantik memperjelas kepada browser apa arti dari suatu halaman dan isinya.

Kejelasan itu juga dikomunikasikan dengan search engine (mesin pencari), dan memastikan bahwa halaman yang tepat dikirimkan untuk permintaan yang tepat.

Tag semantic HTML memberikan informasi tentang konten dari tag tersebut yang melampaui apa yang terlihat pada halaman.

Teks yang tertutup dan dibungkus dalam tag <code> langsung dikenali oleh browser sebagai beberapa jenis bahasa pengkodean.

Alih-alih mencoba me-render kode itu, browser memahami bahwa Anda menggunakan teks itu sebagai contoh kode untuk keperluan artikel atau tutorial online.

Menggunakan tag semantik memberi Anda lebih banyak kait untuk menata konten Anda.

Mungkin sekarang ini Anda lebih suka menampilkan contoh kode dalam style (gaya) default browser, tetapi besok, Anda ingin menampilkannya dengan warna latar abu-abu.

Dan mungkin nanti Anda ingin menentukan keluarga font Mono-Spaced yang tepat atau tumpukan font yang digunakan untuk sampel anda.

Anda dapat dengan mudah melakukan semua hal ini dengan menggunakan markup semantik dan CSS (baca pengertian CSS di sini) yang diterapkan dengan cerdas.

Contoh Semantic HTML dan Perbedaannya dengan Non-Semantic

Selain membahas tentang arti semantik atau semantic HTML, di sini Kami juga akan menjelaskan tentang bagaimana contoh dan perbedaannya dengan non-semantic tag atau element.

Sebelumnya, perlu kalian ketahui bahwa dalam Hypertext Markup Language (HTML), elemen tingkat teks seperti <strong>, <em>, dan <cite>, akan menambahkan informasi semantik dalam konten ungkapan, untuk secara eksplisit menunjukkan penekanan stres, kepentingan yang kuat, dan kutipan.

Dalam contoh sederhana seperti gambar di atas, kedua blok kode membuat elemen dengan cara yang sama, secara visual.

Selain itu, keduanya akan memvalidasi sebagai HTML yang benar, karena tidak ada elemen ilegal atau kesalahan sintaksis.

Namun, konten dalam gambar bagian kiri menambahkan konteks dan makna yang dapat dimengerti browser atau mesin untuk setiap bagian konten.

Di bawah ini adalah penjelasan dari gambar contoh dan perbedaannya dengan non-semantic HTML di atas:

• Judul paga gambar bagian kiri diwakili oleh elemen yang sesuai, yaitu adalah judul tingkat-5 (lima) yang ditulis dengan elemen <h5>, sedangkan pada bagian kanannya (non-semantic) itu dituliskan dengan elemen <b>, di mana tag tersebut tidak menyampaikan kepentingan apapun (seperti bagian kiri yang menyampaikai judul).
• Paragraf (Ada lima keuntungan utama menggunakan semantik atau semantic HTML) diwakili dengan elemen paragraf <p>. Ini juga membuktikan bahwa beberapa elemen dasar HTML baik itu HTML5 adalah semantik,
• Item daftar terkait dikelompokkan menggunakan elemen <li> yang dikelilingi dengan tag unordered list yaitu <ul>, bukannya dengan menambahkan line break dengan <br> dan menambahkan gambar titik besar seperti pada bagian kanan <img src="o.jpg">.

Cara Menggunakan Semantik atau Semantic HTML Tag

Lalu, bagaimana cara untuk menggunakan semantik atau semantic HTML tag yang baik dan benar?

Ya, saat Anda ingin menggunakan tag semantik dengan benar terutama untuk menyampaikan makna daripada hanya untuk tujuan presentasi ada beberapa hal yang perlu kalian perhatikan.

Selain Anda harus berhati-hati bahwa Anda tidak salah menggunakannya hanya untuk properti tampilan umum mereka.

Berikut ini adalah bagaimana cara menggunakan semantik atau semantic HTML tag dan beberapa tagnya yang paling sering disalahgunakan termasuk:

• Penggunaan elemen blockquote; Beberapa orang menggunakan tag <blockquote> untuk membuat indentasi teks yang bukan kutipan. Ini karena blokquotes akan memberi indentasi secara default. Jika Anda hanya ingin mendapatkan keuntungan dari indentasi dan tersebut bukanlah sebuah kutipan, maka jangan gunakan elemen blockquote, sebaliknya cukup gunakan margin CSS sebagai gantinya.
• Penggunaan spasi dalam elemen paragraf; Beberapa editor web menggunakan <p> & nbsp; </p> (menambah ruang tidak terlihat yang terkandung dalam paragraf) terutama ketika untuk menambah ruang tambahan di antara elemen halaman, daripada mendefinisikan paragraf aktual untuk teks halaman tersebut. Seperti contoh indentasi yang disebutkan sebelumnya, Anda harus menggunakan properti margin atau style padding untuk menambah ruang tersebut.
• Pengguanaan elemen unordered list; Seperti blockquote, melampirkan teks di dalam tag <ul> untuk indentasi teks di sebagian besar browser adalah penggunaan HTML yang salah dan tidak valid, karena hanya tag <li> yang valid di dalam tag <ul>. Sekali lagi, cukup gunakan margin atau padding untuk indentasi teks.
• Pelulisan judul tag <h1> hingga <h6>; Tag heading dapat digunakan untuk membuat font lebih besar dan lebih tebal, tetapi jika teksnya bukan heading, maka mereka seharusnya tidak berada di dalam tag heading. Cukup gunakan properti CSS font-weight dan size-font jika Anda ingin mengubah ukuran atau berat teks tertentu pada halaman Anda.

Sekali lagi, perlu kalian garis bawahi di sini bahwa dengan menggunakan tag HTML yang memiliki makna (dalam hal ini semantic).

Maka Anda membuat dapat halaman yang memberikan lebih banyak informasi daripada hanya mengelilingi segala sesuatu dengan tag <div> yang tidak memberikan pesan apapun.

Kenapa Markup Semantik atau Semantic dalam HTML Penting?

Jadi, kenapa menggunakan markup semantik atau semantic tag dan element dalam HTML merupakan hal yang penting?

Terlepas dari penjelasan semantik atau semantic HTML di atas, adapun CSS (baca pengertian CSS di sini) yang baik dapat membuat markup yang salah tidak terlihat oleh pengunjung situs web rata-rata.

Namun, tidak ada jumlah penataan yang akan membuat markup buruk lebih berarti bagi pengunjung yang terkomputerisasi seperti bot crawler atau perayap web mesin pencari, alat terjemahan peramban, atau teknologi bantuan seperti pembaca layar.

Dapat Kami katakan di sini, pentingnya penggunaan elemen dan markup HTML secara semantic (semantik) adalah sebagai berikut:

“meningkatkan aksesibilitas, kemampuan pencarian, internasionalisasi, dan interoperabilitas.”

Dengan kata lain, menulis markup semantik adalah merupakan hal yang wajib jika Anda ingin situs web Anda dapat diakses oleh semua pengunjung, untuk mencapai peringkat mesin pencari tinggi, tersedia bagi pengunjung dari seluruh dunia, dan untuk berinteraksi secara efektif serta interaktif dengan layanan web lainnya.

Menulis markup semantik adalah tentang membuat konten web yang dapat dibaca manusia dan komputer.

Ketika web dapat dibaca dengan baik oleh manusia dan komputer (baca pengertian komputer di sini), itu menjadi lebih mudah diakses karena komputer lebih mampu menganalisis konten, mengindeksnya, mengirimkannya.

Dan juga, untuk developers atau pengembang, mereka lebih mampu mengikat berbagai sumber informasi bersama-sama ke dalam layanan web baru.

Kesimpulan

Baiklah, jadi berdasarkan penjelasan dan pebahasan Pengertian Semantic HTML, Apa itu Semantic Elements dan Markup? Macam-Macam Tag, Manfaat, Contoh dan Perbedaannya dengan Non-Semantic serta Kenapa itu Penting di atas, dapat kita simpulkan bahwa istilah semantik atau semantic HTML adalah penggunaan HTML yang benar untuk memperkuat makna konten pada halaman web, bukan hanya sekedar mendefinisikan penampilannya. HTML semantik yang benar dapat membantu search engine (mesin pencari), screen reader (pembaca layar), dan perangkat pengguna lainnya.

Ini akan menentukan signifikansi dan konteks konten web agar dapat mewakili makna konten secara efektif, elemen HTML yang tepat dipilih sesuai dengan makna yang melekat, alih-alih bagaimana mereka muncul secara visual pada halaman web yang diberikan dan disuguhkan kepada audience (baca pengertian audience di sini).

Penutup

Demikianlah ulasan yang dapat Kami bagikan dalam postingan yang membahas tentang Pengertian Semantic HTML, Apa itu Semantic Elements dan Markup? Macam-Macam Tag, Manfaat, Contoh dan Perbedaannya dengan Non-Semantic serta Kenapa itu Penting kali ini yang merupakan bagian dari berbagai istilah-istilah teknologi yang harus diketahui dalam belajar teknologi informasi.

Silahkan share artikel atau tulisan Kami di sini, jika kalian rasa ini bisa bermanfaat untuk teman, kerabat dan rekan belajar kalian. Sekian dari Saya, Terima Kasih.

Postingan ini juga tersedia dalam versi: