Boxes and sections · Kotak dan bagian
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
Bahasa Indonesia
Kotak dan bagian
- Halaman yang lebih besar membutuhkan struktur — area yang jelas, bukan tumpukan panjang.
- A
<div>adalah kotak biasa. A<span>adalah kotak inline kecil untuk beberapa kata. - Kotak mengelompokkan hal-hal bersama-sama, sehingga Anda dapat mengatur dan mem样式 mereka nanti.
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
Bahasa Indonesia
Bagian bernama
- HTML memiliki kotak khusus dengan nama bermakna:
<header>(atas),<main>(konten utama),<footer>(bawah),<nav>(tautan menu).- Mereka bekerja seperti
<div>, tetapi nama-nama memberi tahu orang — dan mesin pencari — apa setiap bagian.
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
Bahasa Indonesia
Kelas menamai kotak Anda
- Kelas adalah label yang Anda tambahkan ke tag:
<div class="card">. - Ini tidak melakukan apa pun sendirian — tetapi segera, CSS akan menggunakannya untuk memstyle kotak tersebut.
- Ini adalah jembatan Anda menuju setengah kedua kursus.
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
Bahasa Indonesia
Kesalahan umum
<div>adalah blok (baris baru);<span>adalah inline (tetap dalam teks).- Gunakan tag semantik seperti
<header>dan<nav>di mana sesuai.
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
Bahasa Indonesia
Sekarang Anda coba
- Tambahkan
<header>dan<footer>, lalu berikan kotak kelas. - Pelajaran berikutnya, kita mulai membuat sesuatu terlihat bagus dengan CSS.
Explore · Jelajahi
A box wraps its content · Sebuah kotak membungkus isinya
A <div> is a box: content surrounded by padding, border, margin. · Sebuah <div> ialah sebuah kotak: kandungan yang dikelilingi oleh padding, sempadan, dan margin.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · Berikan halaman bahagian atas dan bawah. Bungkus tajuk dalam satu <header>, dan nota kecil dalam satu <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>. · Beri kotak ini nama supaya kita boleh bergayainya kemudian. Tambahkan class="card" ke dalam <div>.