Tutorial Belajar HTML5 Part 6: Cara Membuat Struktur HTML5 (Tag header, footer dan aside)

Posted on

Pada panduan belajar HTML5 kali ini kita akan mencoba memakai semantic tag yang kita pelajari pada panduan sebelumnya bagi membangun struktur HTML menggunakan tag HTML5 seperti <header>, <nav>, <section>, <article>, <aside> dan <footer>.


Merancang Struktur Halaman HTML dengan Tag <div>

Sebelum era HTML5 yang mempunyai tag bagi membangun struktur halaman yang komplit, web developer umumnya menggunakan tag <div> dengan atribut id atau class bagi memisahkan bagian-bagian struktur pada halaman HTML, seperti header, footer, dan sidebar.

Selaku contoh, berikut yaitu gambar sederhana struktur sebuah situs dengan 2 kolom:

Bagi membangun struktur diatas, berikut yaitu kode HTMLnya:

Kode diatas sepenuhnya valid dan benar-benar sering digunakan hingga ketika ini. Akan tetapi, HTML 5 mencoba mengganti seluruh tag <div> menjadi semantic tag yang lebih bermakna.


Semantic Tag bagi membangun Struktur web dengan HTML5

Seperti yang telah kita bahas di panduan sebelumnya mengenai semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti<div> bagi sering digunakan bagi membangun struktur halaman web. Tag-tag yang dapat kita gunakan bagi kebutuhan ini yaitu <header>, <nav>, <section>, <article>, <aside> dan <footer>.

Berikut yaitu pembahasan beberapa tag HTML5 yang diperuntukkan bagi membangun struktur halaman:


Tag <header>

Tag <header> digunakan bagi bagian halaman web yang adalah sebuah header. Tag ini dapat muncul lebih dari 1 kali, tergantung keperluan. Bagian atas web dimana kita meletakkan logo dan judul situs yaitu tempat terbaik bagi tag <header>. Namun di bagian atas artikel dinama terdapat judul dan sub judul artikel pun dapat di ‘bungkus‘ dengan tag <header>.

Contoh pemakaian tag <header>:


Tag <nav>

Tag <nav> digunakan selaku ‘container‘ dari fitur navigasi. Sebaiknya digunakan bagi fitur utama yang dirasa urgen seperti di bagian header.

Contoh pemakaian tag <nav>:


Tag <section>

Tag <section> digunakan bagi memisahkan bagian-bagian dari struktur web. Tag ini dapat digunakan selaku container bagi kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag <section> terkesan ‘generik’, tetapi jikalau yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag <div>.

Bagian utama dimana kontent berada dapat ‘dibungkus’ menggunakan tag <section>. Dan jikalau halaman tersebut mempunyai banyak bagian yang secara logika dapat dipisah, dapat menggunakan beberapa tag <section>.

Contoh pemakaian tag <section>:


Tag <main>

Tag <main> cocok digunakan bagi menandakan bagian utama dari sebuah halaman. Berbeda dari tag <section>, tag <main> umumnya hanya digunakan 1 kali bagi bagian sangat urgen, yang biasanya berupa konten/artikel utama.

Contoh pemakaian tag <main>:


Tag <article>

Tag <article> bertujuan bagi menampung konten web yang adalah sebuah.. (ya, kamu benar) artikel. Umumnya tag ini berada di pada tag <section> atau <main>. Tag ini cocok selaku container bagi artikel pada sebuah blog.

Contoh pemakaian tag <article>:


Tag <aside>

Tag <aside> bertujuan bagi menandai bagian web yang bukan berisi konten utama, tetapi mempunyai kaitan dengan artikel yang ketika ini ditampilkan. Bagian sangat pas bagi tag <aside> yaitu sidebar. Karena di sidebar dapat terdiri dari beraneka konten yang tak seketika berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain bagi sidebar, tag <aside> pun dapat digunakan di pada artikel bagi menandai bagian tambahan.

Contoh pemakaian tag <aside>:


Tag <footer>

Tag <footer> biasannya digunakan di bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai situs. Walapun pemakaian sangat jelas yaitu bagi bagian footer halaman (meletakkan copyright, about us, dll), tag ini pun cocok digunakan di bagian bawah artikel bagi menampung informasi tambahan seperti ‘mengenai penulis‘ maupun link bagi share ke sosial media.

Contoh pemakaian tag <footer>:


Merancang 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 bikin sama dengan contoh pertama-tama:

Dan berikut yaitu kode HTML5 yang digunakan bagi membangun struktur tersebut:

Perhatikan bahwa di kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML tersebut mungkin lebih gampang dimengerti jikalau kamu pernah mendesain layout halaman HTML dengan CSS.

Pemakaian semantic tag dari HTML5 pun akan bermanfaat untuk SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari dapat memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan (seperti <aside> atau <footer>).


eBook HTML Uncover Duniailkom

Kamu serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih komplit hingga fitur terbaru HTML5
. Penjelasan lebih lanjut dapat ke: eBook HTML Uncover Duniailkom.


Sumber https://www.duniailkom.com/