Ketikmedia.com – Dalam menulis kode HTML, kamu perlu menerapkan konsep semantic HTML. Pasalnya, tujuan utama dari semantic HTML adalah meningkatkan aksesibilitas website. Selain itu, ia membantu mesin pencari (Search Engine) memahami konten.
Akan tetapi, jika kamu belum paham apa itu konsep semantic dalam menulis kode HTML, simak penjelasannya di artikel ini.
Pengertian Semantic HTML
Perlu kamu ketahui bahwa semantic HTML adalah praktik penulisan kode HTML menggunakan tags-tags atau elemen-elemen tertentu. Yang mana, tag yang kamu gunakan tidak hanya mengatur tampilan, tetapi juga memberikan makna pada setiap bagian konten.
Dengan tag yang bermakna, mesin pencari dapat mengindeks halamanmu dengan lebih akurat, sehingga berdampak langsung pada Search Engine Optimization atau SEO. Selain itu, dengan konsep semantic, website kamu menjadi lebih terstruktur dan menjadi lebih mudah dikelola oleh developer lain.
Penggunaan semantic HTML tags sangat disarankan untuk menggantikan penggunaan tag div yang berlebihan. Pasalnya, tag div tidak memiliki makna struktural khusus.
Jadi, perlu jadi perhatian, setiap tag semantik punya tujuan tertentu sesuai dengan bagian umum dari sebuah halaman web. Misalnya, ada tag untuk navigasi utama hingga tag untuk konten utama sebuah halaman. Untuk lebih memahaminya, berikut adalah beberapa contoh tag semantik yang paling sering terpakai.
Pertama, ada tag nav. Perlu kamu ketahui bahwa tag nav berfungsi untuk mengelompokkan tautan navigasi utama. Jadi, tag nav harus digunakan untuk blok navigasi utama yang berada di bagian atas website.
Di dalam nav, umumnya terdapat beberapa tautan yang dapat mengarahkan pengguna ke bagian lain dari website atau mengarahkan pengguna ke halaman lain yang relevan.
2. Tag Header
Kemudian, ada tag header, yang berfungsi sebagai wadah pengantar konten, logo, form pencarian, dan tautan pendukung lainnya. Yang satu ini, biasanya berada di bagian atas, setelah navbar.
Tag header bukan hanya untuk bagian atas halaman. Tag ini bisa digunakan dalam tag article atau section. Hal itu untuk mendefinisikan header spesifik konten tersebut.
3. Tag Main
Ketiga, ada tag main. Yang satu ini punya peran yang sentral, pasalnya punya fungsi untuk menampung konten unik halaman. Konten yang dimaksud adalah inti dari apa yang ingin disampaikan oleh website, sehingga hanya boleh ada satu tag main per halaman.
Isi di dalam tag main tidak boleh duplikat. Jadi, konten itu tidak boleh berisi sidebar atau footer. Jadi, isi dari tag ini harus benar-benar unik.
Selanjutnya, ada tag footer. Tag footer berfungsi untuk menampung informasi penutup. Tag ini biasanya terletak di bagian bawah halaman, umunya berisi hak cipta, informasi kontak, atau tautan ke peta situs.
Sama seperti header, tag footer bisa digunakan lebih dari sekali. Ia bisa terpakai di dalam tag article atau section. Footer perlu kamu pakai ketika menerapkan semantik HTML karena dapat memberikan konteks penutup yang jelas.
5. Tag Article
Lalu, ada tag article. Article terpakai untuk konten yang mandiri. Contohnya adalah sebuah post blog, artikel berita, atau komentar pengguna. Konten ini harus utuh dan terpisah.
Tag ini sangat penting untuk konten dinamis. Selain itu, tag article penting untuk website yang mengandalkan publikasi.
6. Tag Aside
Tag aside digunakan untuk konten yang terkait dan harus terpisah dari konten utama. Konten tersebut sering tersaji sebagai kotak informasi samping. Jadi, tag ini adalah representasi dari semantic HTML sidebar.
Tag aside tidak wajib dibaca sebagai bagian utama, karena hanya memberikan informasi tambahan. Sehingga, konten yang ada di dalam tag tersebut dapat berupa link iklan, kutipan, atau informasi latar belakang.
7. Tag Section
Kemudian, ada tag section, yang berguna untuk mengelompokkan konten yang berhubungan. Pengelompokan ini berdasarkan tema tertentu. Jadi, setiap section harus memiliki judul yang jelas.
Tag ini harus memiliki makna yang lebih umum. Misalnya, section tentang “Tentang Kami” atau “Testimoni”. Sehingga, tag section ini membagi konten utama menjadi beberapa bagian logis.
8. Tag Figure
Selanjutnya, ada tag figure, yang berfungsi untuk mengelompokkan konten visual seperti gambar, diagram, atau kode. Konten ini harus dilengkapi dengan caption yang jelas, yang biasanya diwakili oleh tag figcaption.
Contoh Semantic HTML Structure
Membangun website dengan semantic HTML structure adalah langkah terbaik. Jika kamu belum pernah menerapkan konsep semantik, berikut ini contoh penerapan semantik HTML dalam sebuah website sederhana.
- Mulai dengan membuat tag nav untuk membuat navbar website, ini opsional, jika tidak ingin ada nav kamu bisa tidak menambahkan tag ini. Namun, baiknya kamu harus pakai navbar.
- Kemudian, lanjutkan membuat tag header yang berisi logo dan keterangan website.
- Di bawah header ada tag main. Tag ini membungkus semua konten utama.
- Di dalam main, kamu mungkin punya beberapa tag article. Setiap article mewakili post blog yang berbeda.
- Lalu, di samping main, mungkin ada tag aside. Aside itu berfungsi sebagai sidebar untuk iklan.
- Terakhir, tag footer akan menutup halaman. Footer ini memuat informasi hak cipta website kamu.
Penutup
Itulah penjelasan dan beberapa contoh semantic HTML yang perlu kamu pahami ketika belajar coding. Harapannya, dengan memahami hal tersebut, kode HTML milikmu semakin terstruktur.
