Ads by Yasya El Hakim
Tutorial Lengkap HTML: Elemen Layout pada HTML - Bagian 25

Website/Blog dapat menampilkan konten dengan menggunakan beberapa kolom (Seperti majalah atau koran).

HTML juga memiliki elemen semantik yang dapat kita gunakan untuk menentukan bagian dari halaman web.

Contoh Layout

<header>
<nav>
<section><aside>
<article>
<footer>

Keterangan

  • <header> - Merupakan sebuah Header untuk dokumen atau bagian dokumen.
  • <nav> - Untuk menentukan Container (Tempat) link navigasi.
  • <section> - Untuk menentukan bagian pada sebuah dokumen.
  • <article> - Untuk menentukan lokasi konten.
  • <aside> - Untuk menentukan konten pada sidebar pada konten.
  • <footer> - Untuk menentukan Footer pada dokumen atau bagian dokumen.

Keterangan lain

  • <details> - Untuk menentukan rincian tambahan.
  • <summary> - Untuk menentukan Heading pada elemen <details>

Teknik Membuat Layout

Terdapat lima cara untuk membuat layout dengan beberapa kolom. Setiap cara berikut memiliki kelebihan dan kekurangan masing-masing:
  • Tabel HTML (Tidak direkomendasikan).
  • Property Float pada CSS
  • Flexbox CSS
  • Framework CSS
  • Grid CSS

Manakah Cara yang lebih Baik?

Tabel HTML

Elemen <table> bukan dibuat untuk membuat layout. Tujuan dari elemen <table> adalah untuk menampilkan data dalam bentuk tabel. Jadi, kalian tidak boleh menggunakan tabel untuk membuat layout.

Tips: Jangan menggunakan tabel untuk membuat layout.

Framework pada CSS

Jika kalian ingin membuat layout dengan cepat, kalian dapat menggunakan Framework seperti Bootstrap, Materialize, Material Design Lite, UIKit, dll.

Float pada CSS

Sangatlah umum untuk menggunakan dan mengatur layout pada web dengan menggunakan property Float pada CSS. Float sangatlah mudah untuk dipelajari. Kekurangannya: Float dapat mempengaruhi flexibilitas dokumen. Kalian dapat mempelajari tentang float pada bagian selanjutnya.

Flexbox pada CSS

Flexbox adalah mode layout baru dari CSS3.

Kalian dapat menggunakan Flexbox untuk memastikan bahwa elemen dapat menentukan layout pada ukuran layar yang berbeda. Kekurangan: tidak bekerja maksimal pada IE10 kebawah.

Kalian dapat mempelajari Flexbox pada bagian selanjutnya.

Grid pada CSS

Dengan menggunakan modul CSS Grid, kalian dapat membuat layout berupa grid, dengan row dan kolom, serta dapat mempermudah dalam membuat halaman web tanpa menggunakan float atau positioning.

Kekurangan: tidak bekerja maksimal pada IE dan Edge 15 kebawah.

Kalian dapat mempelajari CSS Grid pada bagian selanjutnya.

Sebelumnya: Tutorial Lengkap HTML: Head pada HTML - Bagian 24
Selanjutnya: Tutorial Lengkap HTML: Responsive pada HTML - Bagian 26
Daftar isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya