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, 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, tag seperti dan tidak semantik, karena mereka mendefinisikan hanya bagaimana teks seharusnya terlihat (tebal atau miring) dan tidak memberikan arti tambahan 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 pada tag segera dikenali oleh browser 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 editor web menggunakan
& nbsp; (ruang non-breaking yang terdapat dalam paragraoph) untuk menambahkan spasi ekstra di antara elemen halaman, daripada mendefinisikan paragraf yang sebenarnya untuk teks halaman itu. 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
mengindentifikasikan teks itu di sebagian besar browser. Ini adalah HTML semantis salah dan tidak valid, karena hanya tag - yang valid dalam tag
. 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 mengelilingi semuanya dengan 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 arti dari tag dan menjadi semantik. Tag tidak menyampaikan kepentingan ekstra, tetapi teks yang biasanya dicetak tebal. 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
, 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 pada tag segera dikenali oleh browser 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 editor web menggunakan
& nbsp; (ruang non-breaking yang terdapat dalam paragraoph) untuk menambahkan spasi ekstra di antara elemen halaman, daripada mendefinisikan paragraf yang sebenarnya untuk teks halaman itu. 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
mengindentifikasikan teks itu di sebagian besar browser. Ini adalah HTML semantis salah dan tidak valid, karena hanya tag - yang valid dalam tag
. 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 mengelilingi semuanya dengan 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 arti dari tag dan menjadi semantik. Tag tidak menyampaikan kepentingan ekstra, tetapi teks yang biasanya dicetak tebal. 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