Giới thiệu

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để xây dựng cấu trúc của mọi trang web. Nếu ví một trang web như ngôi nhà, HTML chính là bộ khung xương — quyết định bố cục và các thành phần có mặt. CSS sẽ lo phần trang trí sau.

Trong bài này, bạn sẽ tạo file HTML đầu tiên cho trang chủ website doanh nghiệp với ba thành phần thiết yếu: phần đầu trang (header với logo và điều hướng), phần nội dung chính (hero section giới thiệu doanh nghiệp), và phần chân trang (footer).

Cấu trúc tài liệu HTML

Mọi file HTML đều bắt đầu bằng một bộ khung cố định. Mở trình soạn thảo (VS Code hoặc bất kỳ text editor nào), tạo file tên index.html và gõ vào nội dung sau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Công Ty ABC — Giải Pháp Công Nghệ</title>
</head>
<body>

</body>
</html>

Dòng DOCTYPE html báo cho trình duyệt biết đây là tài liệu HTML5. Thẻ html bọc toàn bộ nội dung, thuộc tính lang="vi" giúp trình duyệt và công cụ tìm kiếm biết trang dùng tiếng Việt. Phần head chứa metadata — thông tin về trang nhưng không hiển thị trực tiếp. Phần body chứa mọi thứ người dùng nhìn thấy.

Xây dựng Header và Navigation

Header là thành phần đầu tiên người dùng nhìn thấy, thường chứa logo và menu điều hướng. Thêm đoạn sau vào bên trong thẻ body:

<header>
  <div class="container">
    <a href="index.html" class="logo">Công Ty ABC</a>

    <nav>
      <ul>
        <li><a href="index.html">Trang Chủ</a></li>
        <li><a href="about.html">Giới Thiệu</a></li>
        <li><a href="services.html">Dịch Vụ</a></li>
        <li><a href="contact.html">Liên Hệ</a></li>
      </ul>
    </nav>
  </div>
</header>

Thẻ header đánh dấu vùng đầu trang. Thẻ nav bao bọc menu điều hướng — đây là thẻ ngữ nghĩa (semantic tag) giúp trình đọc màn hình và SEO hiểu đây là phần điều hướng. Bên trong nav, dùng ul (danh sách không thứ tự) và li (phần tử danh sách) để tạo các mục menu. Mỗi mục là một thẻ a với href trỏ đến trang tương ứng.

Lưu ý class="container" trên div chỉ là đặt tên lớp để sau này CSS dùng — HTML không tự canh giữa hay giới hạn chiều rộng.

Xây dựng Hero Section và Footer

Hero section là phần lớn nhất trang chủ, chứa thông điệp chính của doanh nghiệp. Thêm ngay sau thẻ đóng header:

<main>
  <section class="hero">
    <div class="container">
      <h1>Giải Pháp Công Nghệ Cho Doanh Nghiệp Việt</h1>
      <p>Chúng tôi cung cấp dịch vụ thiết kế website, phần mềm quản lý và tư vấn chuyển đổi số — giúp doanh nghiệp bạn tăng trưởng nhanh hơn.</p>
      <a href="contact.html" class="btn-primary">Liên Hệ Ngay</a>
    </div>
  </section>

  <section class="features">
    <div class="container">
      <h2>Tại Sao Chọn Chúng Tôi</h2>
      <p>Hơn 10 năm kinh nghiệm, đội ngũ kỹ sư được đào tạo bài bản, và cam kết hỗ trợ 24/7.</p>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    <p>&copy; 2024 Công Ty ABC. All rights reserved.</p>
  </div>
</footer>

Thẻ main bao bọc nội dung trọng tâm — mỗi trang chỉ nên có một thẻ main. Thẻ section phân chia các khối nội dung logic trong trang. Thẻ h1 là tiêu đề quan trọng nhất, mỗi trang chỉ nên có một h1 để tốt cho SEO. Thẻ h2 dùng cho các tiêu đề cấp hai. Ký tự © là HTML entity hiển thị ký hiệu bản quyền ©.

Lỗi thường gặp

Lỗi đầu tiên là quên đóng thẻ. HTML yêu cầu hầu hết thẻ mở phải có thẻ đóng tương ứng. Viết header mà không có thẻ đóng khiến toàn bộ cấu trúc bên dưới bị hiểu sai. VS Code có tính năng tự gợi ý thẻ đóng, hãy tận dụng.

Lỗi thứ hai là dùng nhiều thẻ h1 trong một trang. Mỗi trang chỉ nên có một h1 — đây là tiêu đề chính cho cả trang. Các tiêu đề phụ dùng h2, h3 theo thứ tự cấp bậc.

Lỗi thứ ba là đặt tên file không đúng quy ước. Tên file nên viết thường, không dấu cách, không dấu tiếng Việt — dùng dấu gạch ngang nếu cần. Ví dụ dùng about.html thay vì Giới Thiệu.html.

Mở file index.html bằng cách kéo thả vào trình duyệt hoặc dùng extension Live Server trong VS Code để xem kết quả ngay khi lưu file.

Tổng kết

Bạn đã tạo xong bộ khung trang chủ website doanh nghiệp với đầy đủ header, navigation, hero section, features section và footer. Các thẻ ngữ nghĩa như header, nav, main, section, footer giúp cấu trúc rõ ràng và thân thiện với SEO. Ở bài tiếp theo, bạn sẽ dùng CSS để biến bộ khung này thành giao diện có màu sắc và bố cục chuyên nghiệp.