Struktur Layout Web Interaktif

Main Content

Wadah untuk konten utama dan paling penting dari sebuah halaman. Sebaiknya hanya ada satu <main> per halaman.

Tag HTML: <main>

Content Area

Bagian dari <main> yang berisi konten utama seperti teks, gambar, atau postingan blog.

Elemen: Biasanya <div> atau langsung <article>

<div class="article">

Article

Digunakan untuk konten mandiri yang bisa didistribusikan secara independen, seperti postingan blog, berita, atau komentar.

Tag HTML: <article>

<div class="article">

Article

Setiap artikel adalah satu kesatuan konten yang lengkap dan bisa dipahami tanpa konteks halaman lainnya.

Tag HTML: <article>

<div id="main">

Elemen Formulir

Digunakan untuk mengumpulkan data dari pengguna, seperti pendaftaran, login, atau survei.

Tag utama: <form>, <input>, <label>

Contoh Elemen Form

Input Teks & Password

Untuk input teks biasa dan input sensitif yang karakternya disembunyikan.

Tag: <input type="text/password">

Email, Angka, Tanggal

Input spesifik untuk validasi otomatis oleh browser.

Tag: <input type="email/number/date">

Textarea

Untuk input teks yang panjang atau multi-baris.

Tag: <textarea>

Tombol Radio

Memungkinkan pengguna memilih SATU opsi dari beberapa pilihan.

Tag: <input type="radio">

Jenis Kelamin:

Checkbox

Memungkinkan pengguna memilih BANYAK opsi dari beberapa pilihan.

Tag: <input type="checkbox">

Hobi:

Select (Dropdown)

Membuat daftar pilihan berbentuk dropdown.

Tag: <select> dan <option>

Tombol Form

Untuk melakukan aksi seperti mengirim atau mereset data.

Tag: <button>