Semantic Tag HTML5
Materi Basic — Bootcamp Terbit Mentari Batch 1 (1st Week)
Basic Bootcamp Class dimulai dari materi dasar dengan topik HTML.
Menurut wikipedia, HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formatting hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Sederhananya sih, HTML adalah komponen paling dasar untuk membuat web. HTML akan mendeskripsikan dan mendifinisikan struktur konten dari halaman web, kemudian menampilkannya.
Btw guys , fyi HTML mengalami pengembangan dari HTML 4.01 menjadi HTML5 pada bulan April tahun 2010. Meskipun para web developer sudah mengetahui hal ini sebelumnya, tetapi HTML5 mulai terkenal ketika CEO Apple Inc., Steve Jobs, mengatakan bahwa :
“ Dengan pengembangan HTML5, Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di website.”
- * Thats So Cool ! *
HTML 5 memperkenalkan sekitar 30-an tag baru, sebagian besar diantaranya berfungsi untuk membuat struktur HTML atau yang dikenal dengan Semantic Tag. Semantic Tag atau Semantic Markup, adalah sebutan untuk tag HTML yang memiliki ‘arti‘ atau ‘makna’. Kata semantic berasal dari kata Yunani yang berarti ‘mempelajari arti’ (the study of meaning).
Seperti yang sudah dijelaskan sebelumnya, HTML ditujukan untuk mendefinisikan struktur konten halaman Web. Misalnya tag <p>, digunakan untuk membuat paragraf, tag <h1> untuk membuat judul pada header, serta tag <table> untuk membuat tabel, seluruh tag ini memiliki ‘arti‘ yang jelas, sehingga termasuk kedalam semantic tag. Berikut beberapa jenis semantic tag yang ada dalam HTML5 :
Sebelum era HTML5 , web developer umumnya menggunakan tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, contohnya penggunaan tag <div> dalam menampilkan link menu berikut :
Kode diatas sepenuhnya benar dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML5 mencoba mengganti semua tag <div> menjadi semantic tag yang lebih bermakna. Misalnya teman-teman mau buat website dengan struktur seperti ini :
Maka penulisan kode HTML5 yang digunakan untuk membuat struktur web tersebut adalah sebagai berikut:
Perhatikan teman-teman, penulisan kode diatas menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>.
Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization), disebabkan struktur halamannya akan menjadi lebih jelas. Mesin pencari juga bisa lebih memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan ( seperti <aside> atau <footer> ).
Oh iya, pada saat materi HTML ini berlangsung dalam kelas, salah satu teman kami bertanya. “Apa perbedaan tag <strong> dan tag <b> jika keduanya memiliki fungsi yang sama yaitu menebalkan huruf atau kalimat. ?”
Jika diperhatikan, kalimat yang ditebalkan dengan tag <b> dan <strong> hasilnya sama secara visual, namun ini memiliki pengaruh pada SEO. Penggunaan tag<strong> lebih ditujukan untuk penegasan penting di sebuah kalimat atau kata, sedangkan tag <b> hanya sekedar untuk mencetak tebal-kan saja. Menggunakan tag <strong> bisa membantu menaikkan keyword web milik kita, selain itu website yang kita buat juga menjadi lebih SEO friendly, sehingga peluang untuk tampil di page awal Search Engine akan menjadi lebih besar.
Di minggu pertama, setelah mempelajari HTML kita juga mempelajari CSS untuk memperindah tampilan web. Materi yang dipelajari seperti animasi, transisi, positioning, dll. Kemudian materi yang akan dipelajari minggu selanjutnya adalah JavaScript yang berfungsi membuat sebuah halaman website lebih interaktif dan dinamis, serta berorientasi pada kenyamanan pengakses (user-experience). Wah, Semakin menarik yah materi selanjutnya. :D
Hopefully, this journal can help you to understand about semantic tag. And Thank’s For Reading..! :)
Referensi :
https://id.wikipedia.org/wiki/HTML5
http://www.duniailkom.com/tutorial-belajar-html5-pengertian-semantic-tag-pada-html5/
