Prinsip penting dalam desain web adalah gagasan untuk menggunakan elemen HTML untuk menunjukkan apa sebenarnya mereka, daripada bagaimana mereka dapat muncul di browser secara default. Ini dikenal sebagai menggunakan HTML semantik.

Apa itu HTML Semantik?

HTML semantik atau markup semantik adalah HTML yang memperkenalkan makna ke halaman web bukan hanya presentasi. Misalnya,

 tag menunjukkan bahwa teks terlampir adalah sebuah paragraf. Ini bersifat semantik dan presentasional karena orang tahu apa itu paragraf, dan browser tahu cara menampilkannya.

Di sisi lain dari persamaan ini, tag seperti  dan  tidak semantik. Mereka hanya menentukan bagaimana teks akan terlihat (tebal atau miring), dan tidak memberikan arti tambahan apa pun pada markup.

Contoh tag HTML semantik meliputi:

• Tag tajuk

   melalui

Ada banyak lagi tag HTML semantik untuk digunakan saat Anda membuat situs web yang sesuai standar.

Mengapa Anda Harus Peduli Tentang Semantik

Manfaat menulis HTML semantik berasal dari apa yang seharusnya menjadi tujuan utama dari setiap halaman web: keinginan untuk berkomunikasi. Dengan menambahkan tag semantik ke dokumen Anda, Anda memberikan informasi tambahan tentang dokumen itu, yang membantu komunikasi. Secara khusus, tag semantik menjelaskan kepada browser apa arti halaman dan kontennya. Kejelasan itu juga dikomunikasikan dengan mesin pencari, memastikan bahwa halaman yang tepat dikirimkan untuk kueri yang tepat.

Tag HTML semantik memberikan informasi tentang konten tag yang lebih dari sekadar tampilannya di halaman. Teks yang terlampir dalam  tag segera 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 tujuan artikel atau tutorial online.

Menggunakan tag semantik memberi Anda lebih banyak kait untuk menata konten Anda juga. Mungkin hari ini Anda lebih suka menampilkan contoh kode dalam gaya browser default, tetapi besok, Anda mungkin ingin memanggilnya dengan warna latar belakang abu-abu; nanti, Anda mungkin ingin menentukan keluarga font mono-spasi yang tepat atau tumpukan font untuk digunakan untuk sampel Anda. Anda dapat melakukan semua hal ini dengan mudah menggunakan markup semantik dan CSS yang diterapkan dengan cerdas.

Menggunakan Tag Semantik dengan Benar

Saat menggunakan tag semantik untuk menyampaikan makna daripada untuk tujuan presentasi, berhati-hatilah agar Anda tidak menggunakannya secara salah hanya untuk properti tampilan umum mereka. Beberapa tag semantik yang paling sering disalahgunakan meliputi:

• blockquote — Beberapa orang menggunakan tag untuk indentasi teks yang bukan kutipan. Ini karena blockquotes diindentasi secara default. Jika Anda hanya ingin membuat indentasi teks yang bukan merupakan blockquote, gunakan margin CSS sebagai gantinya.
• p — Beberapa editor web menggunakan (ruang non-breaking yang terkandung dalam paragraf) untuk menambahkan ruang ekstra di antara elemen halaman, daripada mendefinisikan paragraf sebenarnya untuk teks halaman itu. Seperti pada contoh sebelumnya, Anda harus menggunakan properti gaya margin atau padding untuk menambah ruang.
• ul - Seperti

  , melampirkan teks di dalam a

   tag indentasi teks itu di sebagian besar browser. Ini adalah HTML yang salah secara semantik dan tidak valid, karena hanya
  •  tag valid dalam a
    menandai. Sekali lagi, gunakan gaya margin atau padding untuk membuat indentasi teks.
  • h1, h2, h3, h4, h5, dan h6 — Anda dapat menggunakan tag heading untuk membuat font lebih besar dan lebih tebal, tetapi jika teksnya bukan heading, gunakan properti CSS font-weight dan font-size sebagai gantinya.

  Dengan menggunakan tag HTML yang memiliki makna, Anda membuat halaman yang memberikan lebih banyak informasi daripada halaman yang hanya mengelilingi semuanya

   tag.

  Tag HTML Manakah yang Semantik?

  Meskipun hampir setiap tag HTML4 dan semua HTML5 tag memiliki arti semantik, beberapa tag adalah terutama semantik.

  Misalnya, HTML5 telah mendefinisikan ulang arti dari  dan  tag menjadi semantik. Itu  tag tidak menyampaikan kepentingan ekstra; alih-alih, teks yang diberi tag biasanya dicetak tebal. Demikian juga,  tag tidak menyampaikan kepentingan atau penekanan ekstra; alih-alih, ini mendefinisikan teks yang biasanya diberikan dalam huruf miring.

  Tag HTML semantik

  Singkatan
  Akronim
  Kutipan panjang
  Definisi
  Alamat penulis dokumen
  Kutipan
  Referensi kode
  Teks teletype
  Pembagian logis
  Wadah gaya sebaris umum
  Teks yang dihapus
  Teks yang disisipkan
  Tekanan
  Penekanan yang kuat
  Judul tingkat pertama
  Judul tingkat kedua
  Judul tingkat ketiga
  Judul tingkat keempat
  Judul tingkat kelima
  Judul tingkat enam
  	Istirahat tematik
  Teks yang akan dimasukkan oleh pengguna
  Teks yang telah diformat sebelumnya
  Kutipan sebaris pendek
  Contoh keluaran Sample
  Berlangganan
  Superskrip
  Variabel atau teks yang ditentukan pengguna