Elemen Layout (Tata Letak) HTML

Situs web sering kali menampilkan konten dalam beberapa kolom (seperti majalah atau koran).

Elemen Tata Letak HTML

HTML memiliki beberapa elemen semantik yang menentukan berbagai bagian halaman web:

• <header> - Mendefinisikan header untuk dokumen atau section
• <nav> - Mendefinisikan satu set link navigasi
• <section> - Mendefinisikan bagian dalam dokumen
• <article> - Mendefinisikan konten mandiri
• <aside> - Mendefinisikan konten selain konten (seperti sidebar)
• <footer> - Mendefinisikan footer untuk dokumen atau section
• <details> - Mendefinisikan detail tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan
• <summary> - Mendefinisikan sebuah heading untuk elemen <details> elemen

Teknik Layout (Tata Letak) HTML

Ada empat teknik berbeda untuk membuat layout multikolom. Setiap teknik memiliki pro dan kontra:

• Framework CSS
• Float property CSS
• Flexbox CSS
• Grid CSS

Framework CSS

Jika Anda ingin membuat layout dengan cepat, Anda dapat menggunakan framework (kerangka) CSS, seperti Bootstrap.

Float Layout CSS

Merupakan hal umum untuk melakukan seluruh layout web menggunakan float property CSS. Float mudah dipelajari - Anda hanya perlu mengingat cara kerja properti float dan clear. Kekurangannya, elemen floating terikat pada flow (aliran) dokumen, yang dapat merusak fleksibilitas.

Flexbox Layout CSS

Penggunaan flexbox memastikan bahwa elemen berperilaku seperti yang diharapkan ketika layout halaman harus mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda.

Grid Layout CSS

Modul grid layout CSS menawarkan sistem tata letak berbasis grid, dengan baris dan kolom, sehingga memudahkan untuk mendesain halaman web tanpa harus menggunakan float dan positioning.

Sumber referensi: w3schools