Bài 11 · Vận dụng · 26 phút
Dự án: trang web bán hàng
Biên soạn bởi Nguyễn Anh Tuấn
Dự án 1: trang bán hàng bằng HTML semantic - mỗi sản phẩm là một article (figure ảnh, giá, nút mua), danh sách sản phẩm và form giỏ hàng đơn giản.
Bắt tay vào dự án đầu tiên! Thói quen tốt của dân chuyên: phân tích đề trước khi gõ. Một trang bán hàng cần gì? Một đầu trang (logo + menu), một khu danh sách sản phẩm, mỗi sản phẩm có ảnh - tên - giá - nút mua, một form đặt mua, và chân trang. Giờ gắn mỗi phần vào đúng thẻ semantic đã học:
- ▸Phân tích đề thành các vùng semantic TRƯỚC khi gõ code.
- ▸header (logo + nav), main (sản phẩm + form), footer.
- ▸Mỗi sản phẩm là một mẩu độc lập - sẽ là một article.
Bắt đầu từ bộ khung quen thuộc, đặt các landmark vào đúng chỗ. Phần head khai báo meta (sẽ thêm ở bước sau); body chứa header, main, footer.
khung.html · bộ khung trang bán hàng (mở .html bằng trình duyệt)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Cửa hàng Mèo Ham Học</title>
</head>
<body>
<header>
<h1>Cửa hàng Mèo Ham Học</h1>
<nav>Trang chủ · Sản phẩm · Liên hệ</nav>
</header>
<main>
<!-- danh sách sản phẩm + form đặt mua -->
</main>
<footer>© Mèo Ham Học</footer>
</body>
</html>- ▸Khung: doctype/html/head/body, rồi header + main + footer trong body.
- ▸h1 là tựa trang (một cái); nav cho menu.
- ▸Để sẵn chỗ trống trong main để lấp dần.
Trái tim của trang là thẻ sản phẩm. Vì mỗi sản phẩm là một mẩu độc lập, ta dùng <article>. Bên trong: ảnh đặt trong figure (có alt và srcset như đã học ở bài Liên kết, ảnh & đa phương tiện), tên là một heading, giá, và nút mua.
san-pham.html · một thẻ sản phẩm đúng semantic
<article>
<figure>
<img
src="ca-kho-800.jpg"
srcset="ca-kho-480.jpg 480w, ca-kho-800.jpg 800w"
alt="Túi cá khô cho mèo"
/>
</figure>
<h3>Cá khô thượng hạng</h3>
<p>39.000đ</p>
<button type="button">Thêm vào giỏ</button>
</article>button hay liên kết?
Nhiều sản phẩm cùng loại nên nằm chung một <section> có tiêu đề, mỗi sản phẩm là một article. Để ý heading outline: h1 là tựa trang, h2 cho tên khu ("Sản phẩm"), h3 cho tên từng sản phẩm - không nhảy cóc cấp.
danh-sach.html · section bọc nhiều article (rút gọn phần lặp)
<section>
<h2>Sản phẩm</h2>
<article>
<h3>Cá khô thượng hạng</h3>
<p>39.000đ</p>
<button type="button">Thêm vào giỏ</button>
</article>
<article>
<h3>Pate cá ngừ</h3>
<p>52.000đ</p>
<button type="button">Thêm vào giỏ</button>
</article>
</section>- ▸Một section "Sản phẩm" (có h2) bọc nhiều article.
- ▸Mỗi article giữ cùng cấu trúc: ảnh, tên (h3), giá, nút.
- ▸Heading outline: h1 trang → h2 khu → h3 sản phẩm, không nhảy cóc.
Thêm một <form> đặt mua đơn giản: mỗi ô có label gắn đúng qua for/id, ô bắt buộc thêm required, email dùng type="email".
form.html · form đặt mua với label và validation
<form>
<label for="ten">Tên người nhận</label>
<input type="text" id="ten" required />
<label for="email">Email</label>
<input type="email" id="email" required />
<button type="submit">Đặt mua</button>
</form>Đừng quên phần head: title và meta description để trang đẹp trên Google, thêm Open Graph nếu muốn preview khi chia sẻ - tất cả đã hướng dẫn ở bài HTML cho SEO & metadata.
head-meta.html · meta cho SEO (đặt trong <head>)
<title>Cửa hàng Mèo Ham Học - đồ ăn cho mèo</title>
<meta name="description" content="Cá khô, pate và đồ ăn ngon cho mèo con. Đặt mua dễ dàng." />
<meta name="viewport" content="width=device-width, initial-scale=1" />Ghép mọi mảnh vào khung ở Bước 2 là xong trang. Trước khi coi là hoàn thành, hãy chạy checklist tự kiểm - thói quen giúp bắt lỗi trước khi người khác thấy:
- ▸Semantic: dùng header/nav/main/section/article/footer đúng vai trò (không div soup).
- ▸Heading outline: đúng một h1; h2 cho khu, h3 cho sản phẩm; không nhảy cóc cấp.
- ▸Ảnh: mỗi img có alt mô tả; ảnh lớn có srcset.
- ▸Form: mỗi input có label gắn qua for/id; ô bắt buộc có required.
- ▸Meta: head có title + meta description + viewport.
Trung thực
Bước tiếp theo
Câu hỏi thường gặp
article. Một sản phẩm là một mẩu nội dung ĐỘC LẬP - mang nó sang trang khác vẫn trọn nghĩa (ảnh, tên, giá, nút mua). section hợp hơn cho một phần có chủ đề của trang, vd cả khu "Sản phẩm" bọc ngoài các article.
Tuỳ hành động. Nếu bấm để THỰC HIỆN một việc trên trang (thêm vào giỏ) thì dùng button. Nếu bấm để ĐI tới một trang khác (trang chi tiết sản phẩm) thì dùng a. Đừng dùng a giả làm nút hay div bắt sự kiện - chọn đúng thẻ theo hành động.
Được, và đó đúng là mục tiêu của bài. Trang sẽ mộc: chữ đen nền trắng, ảnh xếp dọc. Nhưng nếu CẤU TRÚC đúng (article, figure, form, heading outline) thì sau này thêm CSS là đẹp rất nhanh. Cấu trúc đúng trước, đẹp sau.
Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.
Trả lời vài câu để chắc rằng em đã nắm bài.
Mỗi sản phẩm trong trang bán hàng nên đánh dấu bằng thẻ nào?
- 1
Vẽ bản đồ trang
Trước khi gõ code, vẽ ra giấy bản đồ semantic trang bán hàng của mèo con: những vùng nào, lồng nhau ra sao.
✅ Hoàn thành khi: Có sơ đồ: header (nav) · main (section sản phẩm chứa các article) · form đặt mua · footer.
- 2
Một thẻ sản phẩm
Viết một article sản phẩm: figure (img có alt), tên bằng heading, giá, và một nút mua.
✅ Hoàn thành khi: article chứa <figure><img alt="..."></figure>, một heading (vd h3) cho tên, p giá, và <button>.
- 3
Thêm sản phẩm thứ ba
Cho một section đang có 2 article sản phẩm. Thêm sản phẩm thứ ba đúng cấu trúc.
✅ Hoàn thành khi: section có đúng 3 article cùng dạng; không phá heading outline.
- 4
Form đặt mua tử tế
Viết form đặt mua gồm: ô Tên (bắt buộc), ô Email (đúng định dạng), nút "Đặt mua".
✅ Hoàn thành khi: form có 2 cặp label+input (for trùng id), input Tên có required, input Email type="email", và một button.
- 5
Thêm khu khuyến mãi
Thêm vào trang một section "Khuyến mãi" có tiêu đề riêng, đặt đúng chỗ trong main.
✅ Hoàn thành khi: Có thêm một <section> với heading (vd h2 "Khuyến mãi") nằm trong main, không trùng h1.
- 6
Chạy checklist
Tự rà trang hoàn chỉnh theo checklist trong bài và sửa mọi điểm chưa đạt.
✅ Hoàn thành khi: Mọi mục checklist đều đạt: một h1, mỗi img có alt, mỗi input có label, head có title + meta description.