Halo teman-teman semua Kembali lagi bersama saya Sandika gali di playlist belajar HTML 5 dan di video kali ini di episode kedua kita akan masuk membahas mengenai semantik HTML 5 mari kita mulai dengan membahas dulu Apa itu arti kata dari semantik ya teman-teman Jadi kalau kita lihat definisinya di kamus Oxford ya semantik itu katanya relating to meaning in language or logic ya atau artinya ini berhubungan dengan makna atau arti kata Mantik ada di berbagai bidang Ya tapi kalau misalkan kita bahasnya khusus di dalam programming kita akan lihat dulu beberapa contoh ya Misalnya yang pertama begini kalau misalnya kita punya baris-baris kode seperti ini Nah coba perhatikan teman-teman ini saya tulis dalam javascript misalnya kita punya dua buah variabel yang variabelnya saya beri nama nilai 1 diisi dengan 10 lalu variabel nilai 2 diisi dengan 20 Terus di bawahnya saya tulis seperti ini nilai 1 = nilai 2 nilai 2 = nilai 1 nah ini kalau misalkan teman-teman lihat kira-kira ada yang salah Enggak dari kode yang saya tulis ini Oke jadi ini kodenya enggak ada yang salah tapi ketika baris-baris kode ini saya kasih konteks misalnya Saya ingin membuat sebuah program untuk menukar nilai isi dari variabel nilai satu mau saya pindahkan ke nilai 2 isi dari variabel nilai 2 mau saya pindahkan ke nilai 1 sehingga akhirnya saya penginnya tuh nilai sat berisi 20 nilai 2 berisi 10 nah dengan melakukan seperti ini ada yang salah enggak ya jelas salah ya ya karena sekarang nilainya dua-duanya malah jadi 20 nah ini secara makna salah walaupun secara sintaks ini benar ya atau kita lihat contoh berikutnya Saya punya sebuah deklarasi fungsi fungsi a dengan parameter b c di mana di dalamnya mengembalikan nilai b + c Lalu pada saat Saya memanggil fungsinya saya panggilnya begini aung saya kasih argumennya 10,20 ini juga enggak ada yang salah tapi kalau misalkan kita baca Ada kemungkinan bingung ya apalagi deklarasi fungsinya dibikin oleh orang lain kita bertugas menuliskan kode untuk memanggil fungsinya pasti bingung ini fungsi a ini berguna untuk apa alangkah lebih baiknya kalau misalnya kita bikin nama fungsi yang merepresentasikan kegunaan dari function-nya contohnya gini saya punya function namanya jumlahkan dua nilai dengan parameter nilai 1 dan nilai 2 lalu kita jumlahkan nilai 1 +ambah nilai 2 jadi kita kasih makna ke dalam function kita sehingga begitu fungsinya di Panggil lebih masuk akal gitu ya lebih memiliki makna jumlahkan dua nilai ketika ketemu argumen 10 dan 20 ini kita bisa berasumsi bahwa kita menjumlahkan dua nilai yang ada di dalam function-nya Ya kurang lebih seperti itu teman-teman contoh sederhana semantik di dalam programming ya atau kalau misalkan sekarang kita lihat di dalam html ya khususnya di HTML 5 karena mulai di HTML 5 inilah semantik itu lebih disarankan untuk kita gunakan kita kasih contoh yang sederhana dulu misalnya saya punya hasil dari penulisan html seperti ini teman-teman ada tulisan Hello wpu ada dua tulisannya persis sama kira-kira teman-teman bisa nebak Enggak saya bikinnya pakai tag apa kelihatannya sama ya secara visual sama nah ini kalau kita lihat saya membuatnya dengan dua tag yang berbeda yang pertama menggunakan H1 heading 1 ya tulisannya Hello wpu yang kedua yang di bawah itu saya menggunakan tag span yang di dalamnya saya kasih style yang menyerupai style default dari heading tul tulisannya juga Hello wpu secara visual sama tapi tulisan yang pertama itu secara semantik benar ya karena saya memang tujuannya mau membuat heading atau judul sedangkan yang kedua itu saya menyisipkan presentasi atau style visual ke dalam sebuah tag yang tidak memiliki makna ya kebetulan span itu tidak ada maknanya sama seperti Div ya Div dan Span itu adalah tag yang tidak memiliki makna Nah jadi jangan menggunakan yang bawah kalau memang tujuan kita ingin membuat judul atau heading pada sebuah halaman gunakanlah tag yang sesuai dengan peruntukannya karena hampir semua tag itu memiliki makna di dalamnya ya teman-teman ya Jadi kurang lebih semantik itu seperti itu Nah sekarang kita lihat alasan kenapa kita harus menulis html-nya secara semantik ada tiga alasan utama teman-teman yang saya sebut dengan accessibility yang pertama yang kedua maintainability dan yang ketiga Seo jadi ini tiga alasan utama Kenapa kita harus menulis html kita secara semantik atau istilahnya supaya lebih gampang ingat-ingatnya alasan pertama adalah agar html kita mudah dibaca oleh user yang kedua agar html kita mudah dibaca oleh developer ya dan yang ketiga agar html kita mudah dibaca oleh mesin pencari Gu Jadi ini alasan utama Kenapa kita harus nulis html kita secara semantik ya atau Lebih detail lagi ini yang pertama jadi html itu harus ditulis dengan merepresentasikan data yang akan ditampilkan Jadi kita mau nampilin data apa bukan berdasarkan bagaimana dia ditampilkan ya bagaimana dia ditampilkan tuh warnanya apa Ukurannya berapa style-nya Seperti apa bukan tapi kita harus tulis dia tuh sebetulnya data Apa jadi setiap data yang kita tulis harus dibungkus dengan sebuah tag yang kita sudah tahu maksudnya apa mau bikin tulisan pakailah paragraf mau bikin tombol pakailah tag button dan seterusnya berikutnya memudahkan untuk aksesibilitas terutama saat menggunakan screen reader ketika halaman web kita dibaca oleh teman-teman kita yang memiliki disabilitas misalnya ke kesulitan penglihatan nanti ini kita akan bahas secara spesifik di materi mengenai accessibility tapi nanti di akhir kita akan coba gimana sih saat seseorang itu mengakses halaman web kita menggunakan screen reader berikutnya sebagai developer kita jadinya lebih mudah untuk mencari dan mengelola kode yang memiliki makna ya nanti kita akan lihat bedanya kode yang enggak pakai semantik dengan yang menggunakan semantik lebih mudah dibaca mana dan berikutnya berpengaruh pada Seo karena semantik html dianggap oleh mesin pencari sebagai keyword yang penting jadi itu ya teman-teman ya kenapa sih kita harus menggunakan semantik html nah sebelum kita membahas lebih lanjut mengenai tag-tag apa saja yang harus kita perhatikan saat kita mau membuat halaman web yang semantik kita akan lihat dulu elemen-elemen apa aja yang sekarang ada di ATM 5 ya sebetulnya seperti yang saya bilang tadi hampir semua elemen yang ada di ATM 5 tag-tag yang ada di ATM 5 itu sudah ada peruntukannya sendiri-sendiri ya Tapi sekarang kalau kita lihat di dalam ATM 5 itu elemennya dibagi menjadi beberapa kategori ada elemen yang disebut dengan metadata Element ada flow Element Lalu ada sectioning Element heading Element phrasing Element embedded Element dan Interactive Element ya Yang kalau misalkan kita lihat pembagiannya itu diagramnya teman-teman bisa lihat seperti ini jadi ada Beberapa elemen yang dia masuk ke dalam beberapa kategori yang berbeda gitu ya contohnya kalau misalkan teman-teman lihat yang di bagian embedded ini berarti ada elemen-elemen yang merupakan kategorinya embedded tapi dia juga merupakan phrasing juga dan dia merupakan flow elementen juga ya kalau misalkan teman-teman mau lihat lebih detail silakan aja kunjungi Link yang ada di bawah gambar ini ya atau nanti teman-teman bisa Klik aja linknya di deskripsi ya yang pembagiannya kalau kita lihat secara singkat Contohnya seperti ini untuk metadata misalnya ya Ada beberapa tag atau elemen ya Ada base ada link ada Meta no script script style template dan title nah metadata ini biasa kita pakai untuk mendeskripsikan informasi dari website kita dan biasanya yang ada di dalam metadata tidak tampil ke layar berikutnya ada yang masuk ke dalam kategori flow elementen atau flow content nah ini adalah secara umum elemen-elemen yang biasa kita pakai di dalam halaman web kita jadi hampir semuanya masuk ke dalam flow elem ada H1 sampai h6 ada paragraf ada form ada image dan masih banyak lagi berikutnya ada sectioning Element nah ini yang penting nih sectioning elemen atau section konent ini adalah elemen-elemen yang biasa kita gunakan untuk menjelaskan bagian-bagian tertentu dari website kita dan ini biasanya sebelum di atml5 itu kita gunakan Div untuk membuat section atau bagian-bagian dari halamannya Jadi sebelumnya itu kita punya Div dengan kelas header misalnya Div dengan kelas footer Nah sekarang ada elemen-elemennya sendiri berikutnya ada heading untuk menuliskan judul ya bisa H1 sampai h6 dan juga ada H group berikutnya ada phrasing l racing digunakan untuk menjelaskan informasi yang ada di dalam halaman web kita baik itu tulisan ataupun elemen-elemen media ya Misalnya gambar audio video tombol dan lain sebagainya berikutnya ada lagi embedded content nah ini adalah elemen-elemen multimedia yang bisa kita masukkan ke dalam halaman web kita mulai dari gambar audio video kanvas svg itu bisa kita gunakan dan terakhir ada interaktif elemen-elemen yang bisa kita berikan interaksi bisa diklik bisa dipilih bisa diganti isinya yaitu interactif content Nah sekarang setelah kita tahu elemen-elemen yang sekarang ada di HTML 5 dan kita sudah tahu kategorinya Seperti apa aja Nah sekarang kita lihat Bagaimana menerapkan semantik elemen pada halaman web kita nah saya mau ambil contoh misalnya waktu kita bikin website pakai html 4 itu kan biasanya kita membagi tiaptiap halamannya dengan menggunakan Div Ya karena memang Div itu sebetulnya elemen yang enggak punya makna di dia hanya digunakan sebagai pembungkus atau tempat kita Menggabungkan beberapa tag atau elemen HTML dari artinya aja kan division gitu jadi dia gunanya untuk membagi aja apa yang dibaginya terserah kita mau tulisan mau gambar mau kumpulan tag-tag yang banyak jadi maknanya kita yang kasih menggunakan ID atau kelas yang sekali lagi itu hanya bisa dibaca oleh developernya aja pada saat dibaca oleh screen Reader yang dibaca hanya isinya aja nah ini waktu kita bikinnya pakai html 4 nah sekarang kalau misalnya kita mau Terjemahkan ini jadi HTML 5 hampir semua nama atau penanda yang kita berikan di html 4 itu ada tag html-nya sendiri contohnya untuk header ada sendiri untuk sidebar itu ada sendiri untuk footer itu ada sendiri walaupun ada yang enggak ada ya contohnya kayak konent dan post ini enggak ada tapi diganti dengan elemen atau tag lain ya kalau kita Terjemahkan jadi ATM 5 jadinya seperti ini ini teman-teman untuk header ada sendiri tag-nya untuk footer ada sendiri tag-nya untuk navigasi main dan juga artikel dan selain ini pun sebetulnya masih banyak ya Dan kalau misalkan kita tulis dalam bentuk html Nah ini teman-teman bisa lihat perbandingannya yang pertama kalau kita tulis menggunakan HTML 4 itu seperti ini pasti ada ID pasti ada kelas ya kalau kita Terjemahkan jadi HTML 5 sudah pakai elemen yang semantik nulisnya jadi seperti ini Jadi silakan teman-teman lihat aja kira-kira yang lebih mudah untuk dibaca oleh kita para developer itu yang mana Jadi sekarang kalau teman-teman mau bikin website itu disarankannya untuk menggunakan elemen yang semantiknya walaupun kalau misalkan teman-teman lihat beberapa website yang ada saat ini yang populer pun masih tetap ada yang menggunakan Div sebagai elemen untuk groupingnya dan ada juga yang sudah menggunakan semantik ya contohnya kalau misalkan kita lihat di website Amazon deh ini kalau teman-teman masuk ke website-nya atau teman-teman juga bisa coba aja masuk ke sebuah website terus lihat elemennya Klik Kanan kalau pakai Chrome lalu spek Nah di sini teman-teman bisa lihat bahwa Amazon itu menggunakan banyak Div ya walaupun ada header tapi rata-rata dia masih menggunakan Div Nah kalau misalkan teman-teman cek website yang lain Misalnya kita buka website-nya bootstrap deh nah kalau untuk bootstrap kita lihat di inspect dia cenderung sudah menggunakan banyak tag-tag semantik ya contohnya Ini header NAV terus juga di sini ada main footer Gu Jadi cenderung sudah menggunakan tag-tag htm5 yang semantik walaupun tetap aja ada div-nya gitu ya karena Bagian dari website ini enggak bisa dijelaskan maknanya oleh tag-tag semantik yang ada Makanya tetap harus menggunakan Div Nah sekarang kita lihat beberapa contoh elemen-elemen semantik di HTML 5 yang tugasnya untuk membagi halaman tadi ya Jadi kita lihat ada yang namanya main ada yang namanya na section header footer artikle aside dan masih ada beberapa yang lain ya kalau teman-teman pengin tahu nih cara pakai lebih detailnya teman-teman juga selain bisa mengunjungi web website-nya wwg bisa juga mengunjungi website-nya developer Mozilla ini juga lengkap beserta dengan cara penggunaannya kita ambil contoh kalau misalkan kita mau lihat cara pakai main deh ya Nah ini setelah saya masuk ke website-nya Mozilla saya masuk ke tag main Nah di sini kita bisa lihat Cara pakainya gimana nih Katanya tag main atau elemen main itu merepresentasikan konten yang dominan di dalam body dari dokumen kita nah konten utama ini terdiri dari konten-konten yang berhubungan langsung dengan dengan topik utama dari halaman web kita atau sebagai fungsionalitas Sentral dari aplikasi kita dan tag main ini hanya boleh ada satu di dalam satu halaman web ya Cara pakainya begini kita punya tag main nanti di dalamnya silakan aja kalian tulis elemen-elemen apa ya nih kalau teman-teman lihat di sini sebuah dokumen enggak boleh memiliki lebih dari satu elemen main yang tidak punya atribut hidden jadi kalau mau lebih dari satu boleh tapi itu adalah elemen yang awalnya disembunyikan dulu misal misalkan dimunculkan menggunakan javascript atau menggunakan teknik lain gu tapi intinya harus ada satu main kalau teman-teman Scroll ke bawah ini ada penjelasan lebih detailnya lagi dan Cara pakainya nah ini Cara pakainya jadi isi dari main harus unik terhadap dokumennya kalau kontennya berulang Contohnya kayak sidebar atau navigasi biasanya kan navigasi itu ada di atas ada di bawah itu enggak boleh dimasukkan ke dalam main-nya kecuali fungsi utama dari halamannya adalah form pencarian nah gitu Jadi semua penjelasannya sudah lengkap banget ada di dokumentasi mozillanya ya sampai dengan Cara pakainya Seperti apa Dan kalau kita Scroll lagi ada yang namanya accessibility concern Nah nanti ini juga akan kita bahas ketika kita masuk ke bagian accessibility contoh berikutnya yang akan kita bahas adalah section ya Ini pasti sering kita gunakan ya karena ini biasanya dipakai untuk ngegantiin Div yang kita kasih ID apa gitu ya jadi section ini merepresentasikan sebuah bagian yang berdiri sendiri dari Dar dokumen di mana di dalamnya tidak memiliki elemen semantik yang spesifik Jadi biasanya kalau misalnya saya punya website portfolio yang ada bagian about Nah itu saya masukin ke dalam section about Saya punya bagian galeri nah saya bungkus ke dalam tag section untuk galeri gitu contohnya Kita juga bisa nulis seperti ini kalau saya punya dua buah artikel yang punya judul dan paragraf kita bisa masukin ke dalam section atau kalau mau lebih spesifik ini bisa kita ganti juga dengan artikel Ya silakan dilihat aja Cara pakainya terus juga contohnya Oh ya Dan satu hal yang penting ketika menggunakan section adalah ini ya setiap section itu harus bisa diidentifikasi biasanya dengan menambahkan heading di dalamnya gitu headingnya boleh H1 sampai h6 jadi judul section-nya lah istilahnya nah jadi itu ya teman-teman ya penjelasan untuk Beberapa elemen semantik ya Sekali lagi selalu kunjungi dokumentasi atau website-nya developer Mozilla kalau pengin tahu penjel asan lebih detailnya Nah sekarang pertanyaan berikutnya adalah gimana kalau misalnya kita ingin menambahkan semantik pada Elemen yang tidak semantik contohnya tadi ya Ada elemen yang dia tuh Enggak punya tag semantik khususnya tapi kita pengin bikin agar elemennya tetap baik ketika dibaca oleh screen reader khususnya untuk accsesibility ya Nah ini caranya dengan menambahkan sesuatu yang disebut dengan y area mungkin teman-teman pernah mendengar ya atau Ara aja ya ini singkatan dari web accsesibil Initiative accessible reach internet application ini juga nanti detailnya kita akan bahas di materi tentang accessibility tapi supaya teman-teman dapat gambaran singkatnya kita akan cobain ya misalnya gini misalnya sekarang saya punya contoh kasus website sederhana seperti ini ini dia teman-teman ya jadi saya punya website html sederhana aja yang di dalamnya ada tag H1 yang berisi tulisan Welcome to my site lalu di bawahnya ada navigasi yang saya bikin pakai tag Div dengan ID navigation yang ada judul navigasinya saya tulis pakai H2 dengan tulisan navigation title terus untuk link-link pada navigasinya saya bikin pakai Ul yang di dalamnya ada Li dan ada tag a-nya ya simpel aja kayaknya ini juga struktur yang sering banget teman-teman lihat kalau kita lihat di website itu hasilnya seperti ini sepertinya teman-teman ya enggak ada yang aneh karena kita enggak pakai style aja ini ada H1 ada H2 ada link kalau kita lihat website-nya tampilannya seperti ini Tapi gimana kalau misalnya website ini diakses menggunakan sebuah screen reader nah ini buat nyobain ya saya sarankan teman-teman menginstal sebuah extension kalau pakai Chrome Jadi kalau misalkan saya Aktifkan dulu ya saya jalankan more tools lalu extensions di sini saya sudah menginstal extension yang namanya screen reader jadi teman-teman boleh instal aja screen readernya setelah itu diaktifkan ya atau default-nya pasti sudah aktif ini kalau dijalankan dia akan membaca halaman website kita kalau teman-teman tadi dengar suaranya ya nah sekarang kalau misalkan kita pindah ke halaman web kita my Semantic html tab dia akan membaca web-nya tadi dia bacain dulu title-nya terus baru berikutnya kita bisa bacakan halamannya atau kita bisa navigasi ya menggunakan shift alt atas bawah Wap To bottom Welcome to my site seperti ini heading one jadi dia ngasih tahu ada tulisan Welcome to my site yang bentuknya H1 kalau saya pencet lagi shift alt bawah navigation title heading to nah dia baca navigation title heading to jadi dia nge-skkip kalau teman-teman ingat ya dia nge-skip Div kita nih Padahal dia harusnya baca dulu ini adalah navigation yang judulnya ini nah jadi orang yang mengakses website kita menggunakan screen reader enggak tahu kalau dia bakalan ketemu kumpulan navigasi ya walaupun kalau kita lanjutkan lagi pencet alt shift bawah list with three items link one internal link list item dia akan membaca link pertama dia kasih tahu ada link kesatu dari tiga link katanya n tapi ada hal penting yang keeskip yaitu dia akan ketemu dengan sebuah navigation oke nah sekarang kalau misalnya kita ganti aja ya div-nya dengan tag Semantic enough gini aja kalau kita ganti ini ada informasi tambahan yang diberikan kita coba kita coba ya kita mulai dari atas sekarang kalau saya turun satu ke bawah ke bagian navigation hasilnya seperti ini navigation navigation title heading to tuh jadi dia bilang dulu bahwa kita masuk ke sebuah navigation baru Ada Judul navigasinya apa dalam bentuk H2 Nah jadi yang mendengarkan website kita dia tahu dulu Oh saya mau ketemu sebuah navigation gitu ya jadi itu kenapa kita menggunakan semantik nah tapi kita balik ke topik kita kalau misalnya tetap pakai Div seperti ini tapi kita mau bikin dia jadi sebuah Semantic elemen tanpa merubah dia jadi na nah itu kita bisa tambahin areanya yang pertama kita bisa kasih dia rol-nya apa dulu dia mau jadi apa misalnya saya mau bikin dia jadi sebuah navigation Gitu begitu kita kasih roll-nya navigation kalau saya coba lagi ini kita save dulu terus kita refresh browser-nya lihat ya Ketika saya pencet shift alt bawah navigation navigation title heading to dia nyebutin di awalnya navigation jadi itu cara kita kalau misalnya mau kasih semantik ke elemen yang nonsemantik bahkan lebih jauhnya kita bisa kasih dia sebuah label misalnya mau ada namanya nih kita bisa kasih area label misalnya my main navigation oke sekarang kalau misalkan kita save kita kembali ke web-nya ya Sekarang kita coba lagi my main navigation navigation navigation title heading to tuh jadi ada informasi tambahan lagi di depannya my main navigation bentuknya navigation baru kita masuk ke navigation title-nya Ya tapi ini akan kita bahas lagi lebih lanjut ketika kita masuk ke bagian accessibility jadi itu ya teman-teman ya sekilas mengenai semantik html ya sekali lagi lagi Kesimpulannya adalah sebisa mungkin gunakan tag sesuai dengan makna dan peruntukannya ya Secara semantik karena tadi manfaatnya banyak bisa untuk user kita terutama user yang memiliki keterbatasan bermanfaat juga untuk developer lain yang nantinya akan membaca codingan kita dan bermanfaat juga untuk search engine Oke jadi itu aja untuk video kali ini dan untuk video berikutnya kita akan membahas mengenai elemen-elemen di HTML 5 yang berfungsi untuk menampilkan media ya tadi kita sudah lihat beberapa di video berikutnya n kita akan bahas lebih lanjut baik teman-teman jadi itu aja untuk video kali ini mudah-mudahan videonya bermanfaat sampai ketemu lagi di episode Berikutnya saya sandik gali pamit dan seperti biasa jangan lupa titik koma [Musik]