Xivanki Share !!: 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) - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping) !! Semoga tulisan dengan kategori blogs !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping) ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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:

        
 
 Situs web Judul 
  
 
 
 
  Rumah  
 
  Tentang  
 
  Hubungi  
 
 
 
 
 
 
 artikel Judul 1 
 
 Ayat Judul 1 
 
 
 ... ini adalah isi dari artikel 1 ... 
 
 
 
 
 artikel Judul 2 
 
 Sub Judul artikel 2 
 
 
 ... ini adalah isi dari pasal 2 ... 
 
 
 
 
 artikel terbaru 
 
 
  link 1  
 
  link 2  
 
  link 3  
 
 
 
 
 footer - Copyright Duniailkom 2014. 
 
   

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

:

 
 
 
  Rumah  
 
  Tentang  
 
  Hubungi  
 
 
 

---

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

juga bisa digunakan dalam artikel untuk menandai bagian tambahan.

Contoh penggunaan tag

:

 
 
 Judul Artikel 1 
 
 ... penjelasan pasal 1 ... 
 
 ... 
 
 ... 
 
 
 
 ... penjelasan tambahan ... 
 
 

---

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 ... 
 
 ... 
 
 ... 
 
 
 
 ... cipta 2014 duniailkom ... 
 
 

---

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:

        
 
 Situs web Judul 
  
 
 
 
  rumah  
 
  Tentang  
 
  Hubungi  
 
 
 
 
 
 
 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 ... 
 
 
 
 
 artikel terbaru 
 
 
  link 1  
 
  link 2  
 
  link 3  
 
 
 
 
 Footer - Copyright Duniailkom 2014 
 
   

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.

---

Tutorial Terkait:

Demikian info HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping), Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi HTML5 Belajar Tutorial Bagian 6: Cara Membuat Struktur HTML5 (Tag header, footer dan samping) ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.