[Series 100 Bài Học HTML/CSS Thực Chiến - Bài 01]: Tư Duy "Giải Phẫu" Giao Diện Shopee & Dựng Khung Xương Chuẩn Semantic HTML5

Chào anh em! Khi mới bắt đầu học HTML và CSS, sai lầm phổ biến nhất của chúng ta là học thuộc lòng hàng tá thẻ và thuộc tính rời rạc, nhưng khi mở một trang web thực tế như Shopee lên và được yêu cầu "Hãy code lại giao diện này", chúng ta lại hoàn toàn tê liệt vì không biết phải đặt dòng code đầu tiên ở đâu.

Series 100 Bài Học Làm Chủ HTML/CSS Qua Dự Án Clone Shopee ra đời để giải quyết triệt để vấn đề đó. Chúng ta sẽ không học lý thuyết suông. Qua từng bài viết, chúng ta sẽ cùng nhau đặt từng viên gạch để xây dựng một trang E-Commerce hoàn chỉnh từ con số 0.

Trong Bài 01 hôm nay, trước khi viết những dòng CSS màu mè, chúng ta sẽ rèn luyện kỹ năng quan trọng nhất của một Frontend Developer: Tư duy giải phẫu giao diện (Layout Decomposition) và dựng bộ khung xương chuẩn Semantic HTML5.

1. Tại sao không nên dùng toàn bộ thẻ <div>? ("Căn bệnh" Div-itis)

Khi mới học HTML, rất nhiều người có thói quen dùng thẻ <div> cho mọi thứ: từ thanh điều hướng, nội dung chính, danh sách sản phẩm cho đến chân trang. Giới chuyên môn gọi đây là hội chứng Div-itis (Lạm dụng thẻ div).

Hãy nhìn vào sơ đồ cấu trúc trang web chuẩn Semantic HTML5 dưới đây để thấy cách một trình duyệt hiện đại phân tách các vùng chức năng trên màn hình:

Việc sử dụng các thẻ mang ngữ nghĩa (Semantic Tags) như <header>, <nav>, <main>, <section>, <footer> thay vì chỉ dùng <div> mang lại 3 lợi ích sống còn cho một trang Thương mại điện tử như Shopee:

2. Giải phẫu trang chủ Shopee thành các khối HTML

Trước khi mở VS Code, hãy tập thói quen nhìn mọi giao diện web dưới dạng những chiếc hộp lồng vào nhau (Everything is a Box). Khi truy cập vào trang chủ Shopee trên máy tính, chúng ta có thể tách toàn bộ trang thành 3 khối đại cục từ trên xuống dưới:

1. Khối <header> (Đầu trang - Cố định ở trên cùng):

   • Top Bar (<nav>): Thanh điều hướng nhỏ chứa link Kênh Người Bán, Tải ứng dụng, Kết nối, Thông báo, Đăng ký/Đăng nhập.

   • Main Header (<div>): Chứa 3 thành phần cốt lõi: Logo Shopee, Thanh tìm kiếm (<form>) kèm các từ khóa gợi ý bên dưới, và Icon Giỏ hàng.

2. Khối <main> (Thân trang - Chứa toàn bộ hoạt động mua sắm):

   • Hero Banner (<section>): Cụm Slider quảng cáo lớn ở bên trái kết hợp 2 banner tĩnh bên phải, đi kèm dãy icon dịch vụ (Khung Giờ Săn Sale, Mã Giảm Giá, Shopee Mall).

   • Danh mục ngành hàng (<section>): Lưới hiển thị Thời Trang Nam, Điện Thoại, Thiết Bị Điện Tử...

   • Flash Sale (<section>): Khu vực săn sale chớp nhoáng có đồng hồ đếm ngược.

   • Gợi ý hôm nay (<section>): Lưới hiển thị hàng loạt thẻ sản phẩm (Product Card - mỗi thẻ là một <article> độc lập).

3. Khối <footer> (Chân trang):

   • Chứa thông tin chăm sóc khách hàng, chính sách bảo mật, đơn vị vận chuyển và bản quyền công ty.

3. Thực hành: Khởi tạo cấu trúc thư mục & Dựng khung HTML đầu tiên

Hãy tạo một thư mục dự án có tên shopee-clone-100days với cấu trúc chuẩn chỉnh ngay từ đầu:

Plaintext

shopee-clone-100days/
├── assets/
│   ├── css/
│   │   ├── reset.css    (Sẽ học ở Bài 2)
│   │   └── main.css     (File CSS chính)
│   └── images/          (Chứa logo, ảnh banner, sản phẩm)
└── index.html           (File khung xương chính)

Mở file index.html lên và cùng viết những dòng code nền móng đầu tiên cho dự án:

HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <!-- Thẻ meta viewport bắt buộc để làm Responsive trên Mobile ở các bài sau -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopee Việt Nam | Mua và Bán Trên Ứng Dụng Di Động Hoặc Website</title>
    <!-- Liên kết file CSS -->
    <link rel="stylesheet" href="./assets/css/main.css">
</head>
<body>

    <!-- 1. VÙNG ĐẦU TRANG (HEADER) -->
    <header class="shopee-header">
        <!-- Thanh điều hướng phía trên -->
        <nav class="top-navbar">
            <ul class="nav-list-left">
                <li><a href="#">Kênh Người Bán</a></li>
                <li><a href="#">Trở thành Người bán Shopee</a></li>
                <li><a href="#">Tải ứng dụng</a></li>
            </ul>
            <ul class="nav-list-right">
                <li><a href="#">Thông Báo</a></li>
                <li><a href="#">Hỗ Trợ</a></li>
                <li><a href="#">Đăng Ký</a></li>
                <li><a href="#">Đăng Nhập</a></li>
            </ul>
        </nav>

        <!-- Khu vực Logo, Tìm kiếm và Giỏ hàng -->
        <div class="header-with-search">
            <a href="/" class="header-logo">Shopee</a>
            
            <form class="search-bar" action="/search" method="GET">
                <input type="text" placeholder="Shopee bao ship 0Đ - Đăng ký ngay!" />
                <button type="submit">Tìm</button>
            </form>

            <div class="header-cart">
                <span>Giỏ hàng (0)</span>
            </div>
        </div>
    </header>

    <!-- 2. VÙNG NỘI DUNG CHÍNH (MAIN CONTENT) -->
    <main class="shopee-container">
        
        <!-- Khu vực Banner & Khuyến mãi -->
        <section class="hero-banner-section">
            <h2>Khuyến mãi nổi bật</h2>
            <!-- Sẽ dựng Slider và Grid Banner ở Bài 15 -->
        </section>

        <!-- Khu vực Danh mục ngành hàng -->
        <section class="category-section">
            <h2>Danh Mục</h2>
            <!-- Sẽ dựng lưới Danh mục ở Bài 22 -->
        </section>

        <!-- Khu vực Flash Sale -->
        <section class="flash-sale-section">
            <h2>Flash Sale</h2>
            <!-- Sẽ dựng bộ đếm thời gian & thanh tiến trình đã bán ở Bài 30 -->
        </section>

        <!-- Khu vực Gợi ý hôm nay (Danh sách sản phẩm) -->
        <section class="daily-discover-section">
            <h2>Gợi Ý Hôm Nay</h2>
            <div class="product-grid">
                <!-- Mỗi sản phẩm là một thực thể độc lập nên dùng thẻ <article> -->
                <article class="product-card">
                    <h3>Áo Thun Nam Cotton Cao Cấp</h3>
                    <p class="product-price">159.000₫</p>
                </article>
            </div>
        </section>

    </main>

    <!-- 3. VÙNG CHÂN TRANG (FOOTER) -->
    <footer class="shopee-footer">
        <p>&copy; 2026 Shopee Clone. Dự án thực hành 100 bài học HTML & CSS.</p>
    </footer>

</body>
</html>

4. Giải mã dòng code: Những chi tiết nhỏ tạo nên sự chuyên nghiệp

Nếu để ý kỹ đoạn code trên, bạn sẽ thấy một số điểm rất đáng giá mà người mới thường bỏ qua:

• <!DOCTYPE html> và <html lang="vi">: Khai báo cho trình duyệt biết tài liệu đang sử dụng chuẩn HTML5 mới nhất và ngôn ngữ chính của trang là Tiếng Việt (giúp trình duyệt không hiển thị hộp thoại hỏi dịch tự động phiền phức).

• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Dòng "thần chú" bắt buộc phải có nếu muốn giao diện Shopee sau này hiển thị đẹp trên điện thoại mà không bị thu nhỏ ли ti.

• Sử dụng <article> cho từng thẻ sản phẩm (product-card): Theo chuẩn W3C, thẻ <article> dùng cho một thành phần nội dung độc lập, có thể đem đi nơi khác (như chia sẻ lên Facebook hoặc nhúng vào trang Giỏ hàng, trang Tìm kiếm) mà vẫn giữ nguyên ý nghĩa. Một thẻ sản phẩm Shopee chính là ví dụ điển hình nhất của <article>.

5. Bài tập nhỏ cuối bài & Hẹn gặp ở Bài 02!

Khi mở file index.html vừa viết lên trình duyệt, bạn sẽ thấy một trang trắng tinh với những dòng chữ đen và dấu chấm đầu dòng khá "thô sơ". Đừng lo, đó là vì trình duyệt đang áp dụng User Agent Stylesheet (bộ CSS mặc định của trình duyệt).

Thử thách cho bạn trước khi sang Bài 02:

1. Hãy tự tay gõ lại toàn bộ file index.html trên (tuyệt đối không copy-paste để quen cảm giác gõ thẻ).

2. Bổ sung thêm 3 thẻ <article class="product-card"> nữa vào bên trong <div class="product-grid"> với tên và giá các món đồ bạn yêu thích trên Shopee.

3. Mở công cụ Inspect (F12) của Chrome lên, di chuột vào từng thẻ <header>, <main>, <section> để quan sát cách trình duyệt đóng khung từng vùng.

Ở Bài 02, chúng ta sẽ tìm hiểu về CSS Reset, Normalize và biến CSS (:root) để "xóa sổ" các khoảng trắng mặc định xấu xí của trình duyệt và thiết lập bộ màu Cam Shopee (#ee4d2d) chuẩn thương hiệu!