Elemen dan Teknik Tata Letak HTML

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

Elemen Tata Letak HTML

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

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header>- Mendefinisikan header untuk dokumen atau bagian <nav>- Mendefinisikan satu set link navigasi <section>- Mendefinisikan bagian dalam dokumen <article>- Mendefinisikan konten mandiri dan mandiri <aside>- Mendefinisikan konten selain dari konten (seperti sidebar) <footer>- Mendefinisikan footer untuk dokumen atau bagian <details>- Menentukan detail tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan <summary>- Mendefinisikan heading untuk <details>elemen Anda dapat membaca lebih lanjut tentang elemen semantik di bab Semantik HTML kami.

Teknik Tata Letak HTML

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

• kerangka kerja CSS
• Properti float CSS
• kotak fleksibel CSS
• kisi CSS

Kerangka CSS

Jika Anda ingin membuat tata letak dengan cepat, Anda dapat menggunakan kerangka kerja CSS, seperti W3.CSS atau Bootstrap .

Tata Letak Float CSS

Adalah umum untuk melakukan seluruh tata letak web menggunakan floatproperti CSS. Float mudah dipelajari - Anda hanya perlu mengingat cara kerja floatdan clearproperti. Kekurangan: Elemen mengambang terikat pada aliran dokumen, yang dapat merusak fleksibilitas. Pelajari lebih lanjut tentang float di bab Float and Clear CSS kami.

Tata Letak Flexbox CSS

Penggunaan flexbox memastikan bahwa elemen berperilaku dapat diprediksi ketika tata letak halaman harus mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda.

Pelajari lebih lanjut tentang flexbox di bab CSS Flexbox kami .

Tata Letak Kotak CSS

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

Pelajari lebih lanjut tentang grid CSS di bab Intro Grid CSS kami.