HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping)
HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping)
tutorial belajar HTML5 kali ini kita akan mencoba menerapkan tag semantik yang kita pelajari di tutorial sebelumnya untuk membuat struktur HTML menggunakan tag HTML5 seperti , dan .
Membuat halaman HTML Struktur dengan tag
Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman lengkap, pengembang web umumnya menggunakan tag
dengan atribut id atau kelas untuk memisahkan bagian-bagian dari struktur dalam sebuah halaman HTML, seperti header, footer, dan sidebar .
Sebagai contoh, di sini adalah gambaran sederhana dari struktur situs web dengan dua kolom:
Untuk membuat struktur di atas, berikut adalah kode HTML:
kode di atas adalah sepenuhnya valid dan sangat sering digunakan saat ini. Namun, HTML 5 mencoba untuk mengganti semua tag
untuk tag semantik lebih bermakna.
Tag Semantic untuk membuat struktur web dengan HTML5
Sebagaimana kita bahas pada tutorial sebelumnya tentang tag semantik, HTML5 mencoba mengganti tag ' tanpa makna '
untuk sering digunakan untuk membuat struktur halaman web. Tag yang dapat kita gunakan untuk tujuan ini adalah dan
Berikut ini adalah pembahasan beberapa tag HTML5 dimaksudkan untuk membuat struktur halaman:
tag
tag digunakan untuk halaman web yang sundulan . Tag ini dapat muncul lebih dari satu kali, tergantung pada kebutuhan. Bagian atas web di mana kita menempatkan logo dan judul dari situs ini adalah tempat terbaik untuk tag . Tapi di bagian atas dari artikel sekarang mana ada judul dan sub judul artikel juga bisa dalam ' pack ' dengan tag .
Contoh penggunaan tag :
Situs web Judul
Tag
Tag digunakan sebagai 'wadah ' dari menu menu . Harus digunakan untuk menu utama yang dianggap penting dalam bagian sundulan.
Contoh penggunaan tag
Tag
Tag digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini dapat digunakan sebagai wadah untuk koleksi artikel, galeri, atau bagian lain dari halaman web yang membutuhkan pemisahan. Meskipun tag terkesan 'generik', tapi jika kita benar-benar butuhkan adalah sebuah wadah tanpa makna, Anda masih harus menggunakan tag
.
Bagian utama yang berisi untuk dapat 'dibungkus' dengan menggunakan tag . Dan jika halaman memiliki banyak bagian yang logis dipisahkan, bisa menggunakan beberapa tag .
Contoh penggunaan tag :
Judul 1
... mengatur konten .. .
Judul 1
... mengatur konten ...
Tag
Tag cocok untuk menunjukkan bagian-bagian utama dari halaman. Berbeda dari tag tag umumnya hanya digunakan satu kali untuk bagian yang paling penting, yang biasanya konten / artikel utama.
Contoh penggunaan tag :
Main Judul
... penjelasan ...
artikel Judul 1
... penjelasan pasal 1. ..
...
...
artikel Judul 2
... penjelasan pasal 2 ...
...
...
Tag
Tag bertujuan untuk mengakomodasi konten web yang .. (ya, Anda benar) artikel. Umumnya, tag ini di tag atau . tag ini cocok sebagai wadah untuk sebuah artikel di sebuah blog.
Contoh penggunaan tag :
Judul Artikel
... artikel penjelasan. ..
...
...
Tag
Tag bertujuan untuk menandai bagian web yang tidak mengandung konten utama, tetapi tidak ada hubungannya dengan artikel yang sedang ditampilkan. Bagian yang paling pas untuk menandai adalah sidebar . Karena pada sidebar dapat terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti artikel terbaru '10, 'atau' 5 komentar terbaru '. Selain sidebar, tag
Contoh penggunaan tag
Judul Artikel 1
... penjelasan pasal 1 ...
...
...
tag
tag lazim digunakan di bagian bawah halaman, di mana kami menampilkan beberapa informasi tentang website. Meskipun penggunaan yang paling jelas adalah untuk halaman footer (menempatkan hak cipta, tentang kami , dll), tag ini juga cocok untuk digunakan pada bagian bawah artikel yang mengandung informasi tambahan seperti 'tentang penulis ' serta link untuk berbagi media sosial.
Contoh penggunaan tag
Artikel Judul 1
... penjelasan pasal 1 ...
...
...
Membuat halaman HTML struktur dengan HTML5 tag
dengan menggunakan tag HTML5 di atas, kita akan merevisi struktur web sebelumnya menggunakan HTML5. Struktur yang akan kita buat bersama-sama dengan contoh pertama:
Dan di sini adalah kode HTML5 digunakan untuk membuat struktur ini:
Belajar HTML5
Situs web Judul
Judul artikel 1
Ayat Judul 1
... ini adalah isi dari artikel 1 ...
artikel Judul 2
Sub Judul artikel 2
... ini adalah isi dari pasal 2 ...
Perhatikan bahwa dalam kode di atas saya menggunakan 6 tag semantik HTML5, yang dan . Komposisi kode HTML mungkin lebih mudah untuk memahami jika Anda telah merancang tata letak halaman HTML dengan CSS.
Menggunakan tag semantik HTML5 juga akan menguntungkan SEO ( Search Engine Optimization ). Struktur halaman akan lebih jelas, sehingga mesin pencari dapat memprioritaskan apa yang bagian perlu diberi penekanan (seperti atau ) dan bagian yang hanya deskripsi (seperti atau ) .
Setelah berbicara tentang menciptakan struktur web menggunakan HTML5, tutorial selanjutnya, kita akan membahas tentang tag dan ditandai digunakan untuk gambar grup di HTML5.
HTML eBook Mengungkap Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook Mengungkap HTML. eBook ini membahas HTML dengan lebih detail dan lebih lengkap dengan fitur terbaru HTML5 . Penjelasan lebih lanjut bisa ke: eBook Mengungkap Duniailkom HTML.
HTML eBook Mengungkap Duniailkom Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook Mengungkap HTML. eBook ini membahas HTML dengan lebih detail dan lebih lengkap dengan fitur terbaru HTML5 . Penjelasan lebih lanjut bisa ke: eBook Mengungkap Duniailkom HTML. 
Post a Comment