Boxes and sections
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
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.
Tiếng Việt
Khung và phân đoạn
- Các trang lớn cần có cấu trúc — các khu vực rõ ràng, thay vì một đống dài liền mạch.
- Một
<div>là khung trống. Một<span>là khung nhỏ nội tuyến dành cho vài từ. - Các khung giúp nhóm các đối tượng lại với nhau, giúp bạn sắp xếp và định dạng chúng sau này.
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.
Tiếng Việt
Phân đoạn có tên
- HTML có các khung đặc biệt với tên mang ý nghĩa:
<header>(phần đầu),<main>(nội dung chính),<footer>(phần cuối),<nav>(liên kết menu).- Chúng hoạt động giống như
<div>, nhưng tên gọi giúp người dùng — và công cụ tìm kiếm — hiểu rõ từng phần là gì.
<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.
Tiếng Việt
Lớp gán tên cho khung của bạn
- Một lớp (class) là nhãn bạn thêm vào một thẻ:
<div class="card">. - Nó không làm gì cả nếu đứng độc lập — nhưng sớm thôi, CSS sẽ sử dụng nó để tạo kiểu cho khung đó.
- Đây là cầu nối dẫn bạn vào nửa sau của khóa học.
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.
Tiếng Việt
Lỗi thường gặp
<div>là khối (xuống dòng mới);<span>là nội tuyến (giữ nguyên trong văn bản).- Sử dụng các thẻ ngữ nghĩa như
<header>và<nav>khi phù hợp.
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.
Tiếng Việt
Bây giờ bạn thử
- Thêm một
<header>và một<footer>, sau đó gán lớp cho một khung. - Bài học tiếp theo, chúng ta bắt đầu làm cho các thứ trông đẹp mắt bằng CSS.
Explore · Khám phá
A box wraps its content
A <div> is a box: content surrounded by padding, border, margin.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>.