Cara Menggunakan Semantic Element pada HTML5

Cara menggunakan Semantic Element pada HTML5 – Halo semuanya selamat datang di kodingin, kali ini akan membahas mengenai HTML 5. Pasti bagi kalian seorang programmer sudah tidak asing lagi dengan HTML5.

Tag HTML pada HTML5 merupakan element dasar untuk membuat berbagai macam halaman website. Tag HTML di desain untuk membuat tampilan saja, artinya terdapat pada halaman Front End.

Cara menggunakan Semantic Element pada HTML5

HTML5 hadir melanjutkan tag HTML. Nah, pada kesempatan kali ini kodingin akan memberikan daftar semantic element pada HTML5.

Pernggunaan semantic element pada HTML5 sih cukup mudah dan tidak terlalu banyak tag yang tersedia.

Cara Menggunakan Semantic Element pada HTML5

Gambar di atas merupakan bagian dari semantic Element yang meliputi :

  • Header, digunakan untuk membuat element Header, biasanya untuk menampilkan Logo maupun tulisan.
  • Nav, digunakan untuk menampilkan sebuah menu, biasanya berupa link.
  • Section, digunakan untuk block pada element.
  • Article, digunakann untuk menuliskan sebuah konten artikel.
  • Aside, digunakan untuk menampilkan postingan pada bagian header.
  • Footer, digunakan untuk menampilkan teks penutup / tambahan informasi website.

Sebenarnya masih banyak semantic element, namun 5 di atas yang sering di gunakan apalagi untuk membuat webssite berita.

Cara Menggunakan Semantic Element

Caranya cukup mudah hanya memberikan kode pembuka dan pernutup sesuai dengan Tag HTML yang di inginkan.

Berikut ini contoh membuat dan menggunakan semantic element pada HTML5.

Hasilnya dari kode diatas hanya sebuah teks biasa, karena tidak dilengkapi dengan CSS, anda dapat melengkapi dengan memberikan style yang lebih menarik.

Sebenarnya semantic element ini bukan hanya di HTML5 namun di mulai dari HTML, salah satu contoh semantic element yaitu <table></table>.

Seberapa Penting Semantic Element pada HTML5 ?

Sangat penting, kalau tidak penting tidak akan saya tulis. Semantic element dapat meningkat optimasi SEO pada sisi On Page halaman. Dimana dengan menggunakan struktur yang bagus akan mempermudah google untuk melakukan crawl terhadap website.

Selain itu juga dapat mempermudah dari sisi pengembang untuk membangun halaman website yang lebih terstrukur, sehingga mengurangi elemen <div>.

Sekian Cara menggunakan Semantic Element pada HTML5.

Baca Juga…

2 Comments

  1. keren gans, mudah dicerna… sering sering nulis minimal 10000 kata. lopeee yuuu
    Jurnal Batutah

Leave a Reply