Apa itu Semantic HTML dan Mengapa Anda Harus Menggunakannya

Sebuah prinsip penting dari gerakan Standar Web yang bertanggung jawab untuk industri yang kita miliki saat ini adalah gagasan menggunakan elemen HTML untuk apa mereka daripada bagaimana mereka dapat muncul di browser secara default. Ini dikenal dengan menggunakan Semantic HTML.

Apa itu Semantic HTML

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

tag menunjukkan bahwa teks terlampir adalah paragraf.

Ini bersifat semantik dan presentasional, karena orang tahu apa paragraf dan browser tahu cara menampilkannya.

Di sisi lain dari persamaan ini, beri tag seperti dan tidak semantik, karena mereka hanya mendefinisikan bagaimana teks seharusnya terlihat (tebal atau miring) dan tidak memberikan arti tambahan apa pun pada markup.

Contoh dari tag HTML semantik termasuk tag header

melalui

,

, dan . Ada banyak lagi tag HTML semantik yang dapat digunakan saat Anda membangun situs web yang sesuai standar.

Mengapa Anda Harus Peduli Semantik

Manfaat menulis semantik HTML berasal dari apa yang seharusnya menjadi tujuan pendorong dari setiap halaman web - 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 membuatnya jelas bagi browser apa arti halaman dan isinya.

Kejelasan itu juga dikomunikasikan dengan mesin pencari, memastikan bahwa halaman yang tepat dikirimkan untuk pertanyaan yang tepat.

Tag HTML semantik memberikan informasi tentang isi dari tag-tag yang melampaui hanya bagaimana mereka melihat pada halaman. Teks yang diapit di tag segera dikenali oleh peramban sebagai beberapa jenis bahasa pengkodean.

Alih-alih mencoba merender kode itu, peramban memahami bahwa Anda menggunakan teks itu sebagai contoh kode untuk keperluan artikel atau tutorial online semacam itu.

Menggunakan tag semantik memberi Anda lebih banyak kait untuk menata konten Anda. Mungkin hari ini Anda lebih suka agar contoh kode Anda ditampilkan dalam gaya peramban bawaan, tetapi besok, Anda ingin memanggil mereka dengan warna latar belakang abu-abu, dan kemudian Anda ingin menentukan keluarga font atau spasi font mono-spasi yang tepat untuk digunakan untuk sampel Anda. Anda dapat dengan mudah melakukan semua hal ini dengan menggunakan markup semantik dan CSS yang diterapkan dengan cerdas.

Gunakan Semantik Tag dengan benar

Bila Anda ingin menggunakan tag semantik untuk menyampaikan makna daripada untuk tujuan presentasi, Anda harus berhati-hati agar tidak menggunakannya dengan tidak benar hanya karena sifat tampilan umumnya. Beberapa tag semantik yang paling sering disalahgunakan meliputi:

• blockquote - Beberapa orang menggunakan

  tag untuk teks indentasi yang bukan kutipan. Ini karena blockquotes diindentasi secara default. Jika Anda hanya ingin manfaat indentasi, tetapi teksnya bukan pemblokiran, gunakan margin CSS sebagai gantinya.

• p - Beberapa web editor menggunakan (ruang non-breaking yang terdapat dalam paragraoph) untuk menambahkan ruang ekstra di antara elemen halaman, daripada mendefinisikan paragraf yang sebenarnya untuk teks halaman tersebut. Seperti contoh indentasi yang disebutkan sebelumnya, Anda harus menggunakan properti gaya margin atau bantalan untuk menambah ruang.
• ul - Seperti blockquote, melampirkan teks di dalam
  tag mengindents teks itu di sebagian besar browser. Ini adalah HTML semantis yang salah dan tidak valid, hanya sebagai
  • tag berlaku dalam a
    menandai. Sekali lagi, gunakan gaya margin atau padding untuk teks indentasi.
  • h1 – h6 - Tag heading dapat digunakan untuk membuat huruf lebih besar dan lebih tebal, tetapi jika teks bukan heading, seharusnya tidak berada di dalam heading tag. Gunakan properti font-weight dan font-size CSS sebagai gantinya jika Anda ingin mengubah ukuran atau berat teks tertentu pada halaman Anda ..

  Dengan menggunakan tag HTML yang memiliki arti, Anda membuat halaman yang memberikan lebih banyak informasi daripada dengan hanya mengitari semuanya

  tag.

  Tag HTML Mana Semantik?

  Sementara hampir setiap tag HTML4 dan semua tag HTML5 memiliki makna semantik, beberapa tag pada dasarnya bersifat semantik.

  Misalnya, HTML5 telah mendefinisikan kembali makna dari dan tag menjadi semantik. Itu tag tidak menyampaikan pentingnya ekstra, melainkan teks yang biasanya dicetak tebal. Itu tag juga tidak menyampaikan pentingnya atau penekanan ekstra, tetapi lebih mendefinisikan teks yang biasanya diberikan dalam huruf miring.

  Tag HTML Semantik

  	Singkatan
  	Akronim
  	Kutipan panjang
  	Definisi
  	Alamat untuk penulis (s) dari dokumen
  	Kutipan
  	Referensi kode
  	Teletype teks
  	Pembagian logis
  	Penampung gaya inline umum
  	Teks yang dihapus
  	Teks yang disisipkan
  	Tekanan
  	Penekanan kuat
  	Judul tingkat pertama
  	Judul tingkat kedua
  	Judul tingkat ketiga
  	Judul tingkat keempat
  	Judul tingkat lima
  	Judul tingkat keenam
  	Istirahat tematik
  	Teks yang dimasukkan oleh pengguna
  	Teks yang diformat sebelumnya
  	Kutipan singkat inline
  	Keluaran sampel
  	Subskrip
  	Superskrip
  	Teks yang ditentukan oleh variabel atau pengguna