Pengertian Semantic HTML: Manfaat dan Macam-Macam Tag Semantic

0
Gambar Pengertian Semantic HTML HTML Semantik
Gambar Pengertian Semantic HTML HTML Semantik

Pengertian Semantic HTML (HTML Semantik)

Apa itu Semantic HTML? Semantic HTML atau semantic markup adalah HTML yang memperkenalkan makna ke halaman web daripada hanya sekedar presentasi. Misalnya, tag <a> yang menunjukkan bahwa teks terlampir adalah paragraf. Ini adalah semantik dan presentasi karena orang tahu apa paragraf itu dan browser tahu cara menampilkannya.

Di sisi lain dari persamaan ini, tag seperti <b> dan <i> bukan semantik, karena tag hanya menetapkan bagaimana tampilan teks (tebal atau miring) dan tidak memberikan makna tambahan apa pun pada markup.

Contoh tag Semantic HTML atau HTML semantik ini termasuk tag header <h1> hingga <h6>, <blockquote>, <code> dan <em>. Ada banyak lagi tag HTML semantik yang dapat digunakan saat Anda membangun situs web yang sesuai standar.

Manfaat Semantic HTML

Mengacu pada pengertian Semantic HTML (Element) di atas, manfaat menulis HTML semantik berasal dari apa yang seharusnya menjadi tujuan penggerak setiap halaman Website keinginan untuk berkomunikasi. Dengan menambahkan tag 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 mesin pencari, memastikan bahwa halaman yang tepat dikirimkan untuk permintaan yang tepat.

Tag HTML semantik memberikan informasi tentang konten dari tag tersebut yang melampaui apa yang terlihat pada halaman. Teks yang tertutup dalam tag <code> langsung dikenali oleh browser sebagai beberapa jenis bahasa pengkodean. Alih-alih mencoba merender kode itu, browser memahami bahwa Anda menggunakan teks itu sebagai contoh kode untuk keperluan artikel atau tutorial online.

Baca Juga :  Hari Password Dunia: Sejarah dan Cara Membuat Kata Sandi yang Kuat

Menggunakan tag semantik memberi Anda lebih banyak kait untuk menata konten Anda. Mungkin hari ini Anda lebih suka menampilkan contoh kode dalam gaya browser default, tetapi besok, Anda ingin memanggilnya dengan warna latar abu-abu, dan 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 yang diterapkan dengan cerdas.

Cara Menggunakan Semantic Tag (Tag Semantik)

Ilustrasi Gambar Menggunakan Semantic HTML dan Tag Semantic HTML Pengertian Semantic HTML
Ilustrasi Gambar Menggunakan Semantic HTML dan Tag Semantic HTML

Saat Anda ingin menggunakan tag semantik dengan benar untuk menyampaikan makna daripada untuk tujuan presentasi, Anda harus berhati-hati bahwa Anda tidak menggunakannya secara salah hanya untuk properti tampilan umum mereka. Beberapa tag semantik yang paling sering disalahgunakan termasuk:

  • blockquote; Beberapa orang menggunakan tag <blockquote> untuk membuat indentasi teks yang bukan kutipan. Ini karena blokquotes indentasi secara default. Jika Anda hanya ingin mendapatkan keuntungan dari indentasi, tetapi teks tersebut bukan blockquote, gunakan margin CSS sebagai gantinya.
  • p; Beberapa editor web menggunakan <p> & nbsp; </p> (ruang tanpa putus yang terkandung dalam paragraf) 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 padding style untuk menambah ruang.
  • ul; Seperti blockquote, melampirkan teks di dalam tag <ul> indentasi teks itu di sebagian besar browser. Ini adalah HTML yang secara semula salah dan tidak valid, karena hanya tag <li> yang valid di dalam tag <ul>. Sekali lagi, gunakan gaya margin atau padding untuk indentasi teks.
  • h1 – h6; Tag heading dapat digunakan untuk membuat font lebih besar dan lebih tebal, tetapi jika teksnya bukan heading, seharusnya tidak di dalam tag heading. Gunakan properti CSS font-weight dan size-font jika Anda ingin mengubah ukuran atau berat teks tertentu pada halaman Anda.
Baca Juga :  Pengertian BPO (Business Process Outsourcing): Fungsi, Jenis, Kelebihan dan Kekurangannya

Dengan menggunakan tag HTML yang memiliki makna, Anda membuat halaman yang memberikan lebih banyak informasi daripada hanya mengelilingi segala sesuatu dengan tag <div>.

Tag HTML Apa Yang Semantik?

Berdasarkan pengertian Semancit HTML di atas, meskipun hampir setiap tag HTML4 dan semua tag HTML5 memiliki makna semantik, beberapa tag pada dasarnya bersifat semantik. Misalnya, HTML5 telah mendefinisikan kembali makna tag <b> dan <i> menjadi semantik. Tag <b> tidak menyampaikan kepentingan ekstra, melainkan teks yang biasanya dicetak tebal. Tag <i> juga tidak menyampaikan arti penting atau penekanan tambahan, melainkan mendefinisikan teks yang biasanya diterjemahkan Italics.

Macam-Macam Tag Semantic HTML

<abbr>Abbreviation
<acronym>Acronym
<blockquote>Long quotation
<dfn>Definition
<address>Address for author(s) of the document
<cite>Citation
<code>Code reference
<tt>Teletype text
<div>Logical division
<span>Generic inline style container
<del>Deleted text
<ins>Inserted text
<em>Emphasis
<strong>Strong emphasis
<h1>First-level headline
<h2>Second-level headline
<h3>Third-level headline
<h4>Fourth-level headline
<h5>Fifth-level headline
<h6>Sixth-level headline
<hr>Thematic break
<kbd>Text to be entered by the user
<pre>Pre-formatted text
<q>Short inline quotation
<samp>Sample output
<sub>Subscript
<sup>Superscript
<var>Variable or user defined text

Penutup

Demikianlah ulasan singkat Kami kali ini mengenai pengertian Semantic HTML (HTML Semantik) dan penjelasannya secara lengkap yang merupakan bagian dari Istilah-Istilah Teknologi yang harus diketahui dalam Belajar Teknologi Informasi. Sekian dari Saya, Terima Kasih.

Pilihan Editor:

Tinggalkan Komentar