Dalam tutorial belajar HTML5 kali ini kita akan mencoba menerapkan semantic tag yang kita pelajari dalam tutorial sebelumnya untuk membuat struktur HTML menggunakan tag HTML5 seperti
Membuat Struktur Halaman HTML dengan Tag
Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.
Sebagai contoh, berikut adalah gambar sederhana struktur sebuah website dengan 2 kolom:
Untuk membuat struktur diatas, berikut adalah kode HTMLnya:
Belajar HTML5
Judul Website
Judul Artikel 1
Sub Judul Artikel 1
...Ini adalah isi dari artikel 1...
Judul Artikel 2
Sub Judul Artikel 2
...Ini adalah isi dari artikel 2...
Kode diatas sepenuhnya valid dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML 5 mencoba mengganti semua tag menjadi semantic tag yang lebih bermakna.
Semantic Tag untuk membuat Struktur web dengan HTML5
Seperti yang telah kita bahas pada tutorial sebelumnya tentang semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti‘ untuk sering digunakan untuk membuat struktur halaman web. Tag-tag yang bisa kita gunakan untuk keperluan ini adalah , dan
Berikut adalah pembahasan beberapa tag HTML5 yang ditujukan untuk membuat struktur halaman:
Tag
Tag
Contoh penggunaan tag :
Judul Website
Tag
Tag digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.
Contoh penggunaan tag
Tag
Tag digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag terkesan ‘generik’, tetapi jika yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag .
Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag . Dan jika halaman tersebut memiliki banyak bagian yang secara logika bisa dipisah, bisa menggunakan beberapa tag .
Contoh penggunaan tag :
Judul 1
...Kumpulan dari konten...
Judul 1
...Kumpulan dari konten...
Tag
Tag cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Berbeda dari tag , tag umumnya hanya digunakan 1 kali untuk bagian paling penting, yang biasanya berupa konten/artikel utama.
Contoh penggunaan tag :
Judul Utama
...penjelasan...
Judul Artikel 1
...penjelasan artikel 1...
...
...
Judul Artikel 2
...penjelasan artikel 2...
...
...
Tag
Tag bertujuan untuk menampung konten web yang merupakan.. (ya, anda benar) artikel. Umumnya tag ini berada di dalam tag atau . Tag ini cocok sebagai container untuk artikel dalam sebuah blog.
Contoh penggunaan tag :
Judul Artikel
...penjelasan artikel...
...
...
Tag
Tag bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag adalah sidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag
Contoh penggunaan tag
Judul Artikel 1
...penjelasan artikel 1...
...
...
Tag
Tag biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagian footer halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.
Contoh penggunaan tag
Judul Artikel 1
...penjelasan artikel 1...
...
...
Membuat Struktur Halaman HTML dengan tag HTML5
Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama:
Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut:
Belajar HTML5
Judul Website
Judul Artikel 1
Sub Judul Artikel 1
...Ini adalah isi dari artikel 1...
Judul Artikel 2
Sub Judul Artikel 2
...Ini adalah isi dari artikel 2...
Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni , dan . Susunan kode HTML tersebut mungkin lebih mudah dipahami jika anda pernah mendesain layout halaman HTML dengan CSS.
Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti atau ) dan bagian mana yang hanya berupa keterangan (seperti atau ).
eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.
Sumber wk.com
![blogger]( "blogger")
Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag Sebagai contoh, berikut adalah gambar sederhana struktur sebuah website dengan 2 kolom: Untuk membuat struktur diatas, berikut adalah kode HTMLnya: ...Ini adalah isi dari artikel 1... ...Ini adalah isi dari artikel 2... Kode diatas sepenuhnya valid dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML 5 mencoba mengganti semua tag Seperti yang telah kita bahas pada tutorial sebelumnya tentang semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti‘ Berikut adalah pembahasan beberapa tag HTML5 yang ditujukan untuk membuat struktur halaman: Tag Contoh penggunaan tag Tag digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header. Contoh penggunaan tag Tag digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag Contoh penggunaan tag ...Kumpulan dari konten... ...Kumpulan dari konten... Tag cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Berbeda dari tag Contoh penggunaan tag ...penjelasan... ...penjelasan artikel 1... ... ... ...penjelasan artikel 2... ... ... Tag bertujuan untuk menampung konten web yang merupakan.. (ya, anda benar) artikel. Umumnya tag ini berada di dalam tag Contoh penggunaan tag ...penjelasan artikel... ... ... Tag bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag adalah sidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag Contoh penggunaan tag ...penjelasan artikel 1... ... ... Tag biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagian footer halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media. Contoh penggunaan tag ...penjelasan artikel 1... ... ... Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama: Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut: ...Ini adalah isi dari artikel 1... ...Ini adalah isi dari artikel 2... Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti
Judul Website
Judul Artikel 1
Sub Judul Artikel 1
Judul Artikel 2
Sub Judul Artikel 2
Semantic Tag untuk membuat Struktur web dengan HTML5
Tag
Judul Website
Tag
Tag
Judul 1
Judul 1
Tag
Judul Utama
Judul Artikel 1
Judul Artikel 2
Tag
Judul Artikel
Tag
Judul Artikel 1
Tag
Judul Artikel 1
Membuat Struktur Halaman HTML dengan tag HTML5
Judul Website
Judul Artikel 1
Sub Judul Artikel 1
Judul Artikel 2
Sub Judul Artikel 2
Sumber wk.com
EmoticonEmoticon