HTML Basics — Web Design Basics

Mở đầu — vì sao bài này quan trọng

Hãy tưởng tượng bạn đang xây một ngôi nhà. Trước khi nghĩ đến màu sơn tường, kiểu rèm cửa hay cách bài trí phòng khách, bạn cần một bộ khung: móng, cột, dầm, tường chịu lực. Trong thế giới web, HTML chính là bộ khung đó. HTML (HyperText Markup Language — Ngôn ngữ Đánh dấu Siêu văn bản) là viên gạch cơ bản nhất của Web. Nó định nghĩa ý nghĩa và cấu trúc của nội dung trang web.

Nhiều bạn mới vào nghề thiết kế web thường nóng vội nhảy ngay vào CSS để làm trang đẹp, hoặc mở Figma kéo thả cho nhanh. Nhưng nếu không hiểu HTML, bạn giống như một người trang trí nội thất mà không biết bức tường nào chịu lực — bạn sẽ đập nhầm chỗ, và cả ngôi nhà có thể sụp. Trong suốt khóa học này, gần như mọi thứ — từ Flexbox, CSS Grid, đến Semantic HTML hay Accessibility — đều dựa trên nền tảng bạn học hôm nay.

Một lý do nữa khiến HTML cực kỳ quan trọng với designer, không chỉ với developer: khi bạn hiểu trang web được cấu trúc bằng các "thẻ" có ý nghĩa, bạn sẽ thiết kế ra những giao diện khả thi để code, dễ bàn giao cho lập trình viên, và quan trọng hơn — thân thiện với người dùng khiếm thị và với Google. Bài này là nền móng. Hãy học chậm và chắc.

Khái niệm cốt lõi

HTML là ngôn ngữ đánh dấu, không phải ngôn ngữ lập trình

Điểm đầu tiên cần khắc cốt ghi tâm: HTML không phải ngôn ngữ lập trình. Nó không có vòng lặp, không có điều kiện if-else, không tính toán. HTML chỉ làm một việc duy nhất nhưng cực kỳ quan trọng: đánh dấu (markup) nội dung để trình duyệt hiểu đâu là tiêu đề, đâu là đoạn văn, đâu là hình ảnh, đâu là liên kết.

Bạn viết nội dung, rồi "bọc" nội dung đó trong các thẻ (tag) để gán ý nghĩa cho nó. Trình duyệt đọc những thẻ này và hiển thị ra màn hình theo đúng cấu trúc bạn mô tả.

Cấu trúc của một thẻ (element)

Một phần tử HTML (element) điển hình gồm ba phần:

<p>Xin chào Việt Nam!</p>

<p> là thẻ mở (opening tag) — báo hiệu "bắt đầu một đoạn văn".
Xin chào Việt Nam! là nội dung (content).
</p> là thẻ đóng (closing tag) — có dấu gạch chéo /, báo hiệu "kết thúc đoạn văn".

Chữ p ở đây là viết tắt của paragraph (đoạn văn). Phần lớn các phần tử đều có cặp mở–đóng như vậy. Một số ít phần tử tự đóng (self-closing), ví dụ thẻ ảnh <img> hay thẻ xuống dòng <br> không cần thẻ đóng vì chúng không bọc nội dung gì bên trong.

Thuộc tính (attribute)

Các thẻ có thể mang thêm thuộc tính để cung cấp thông tin bổ sung. Ví dụ:

<a href="https://vietnamcos.com">Truy cập website</a>
<img src="logo.png" alt="Logo công ty">

Ở đây href (hypertext reference) cho biết liên kết dẫn tới đâu, còn src (source) cho biết đường dẫn tới file ảnh, và alt mô tả ảnh bằng văn bản (rất quan trọng cho người khiếm thị và SEO). Thuộc tính luôn nằm trong thẻ mở, theo cú pháp tên="giá trị".

Bộ khung của một trang HTML hoàn chỉnh

Mọi trang web đều có một bộ khung chuẩn:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tiêu đề trang</title>
</head>
<body>
  <h1>Nội dung hiển thị ở đây</h1>
  <p>Đây là một đoạn văn.</p>
</body>
</html>

Hãy giải nghĩa từng dòng:

<!DOCTYPE html> — khai báo cho trình duyệt biết "đây là tài liệu HTML phiên bản hiện đại (HTML5)".
<html lang="vi"> — phần tử gốc bao trùm toàn bộ trang. lang="vi" báo cho trình duyệt và công cụ đọc màn hình rằng nội dung là tiếng Việt.
<head> — phần "hậu trường", chứa thông tin về trang nhưng không hiển thị trực tiếp: bộ ký tự, tiêu đề tab, các khai báo meta.
<meta charset="UTF-8"> — cực kỳ quan trọng với tiếng Việt! Nó đảm bảo các dấu thanh (à, ả, ã, ạ...) và chữ đặc biệt (đ, ơ, ư) hiển thị đúng, không bị lỗi thành "Tiá»ng Viá»t".
<meta name="viewport"...> — giúp trang hiển thị đúng trên điện thoại (bạn sẽ học sâu ở các bài về responsive).
<title> — chữ hiện trên tab trình duyệt và trong kết quả tìm kiếm Google.
<body> — phần "sân khấu", chứa toàn bộ nội dung mà người dùng nhìn thấy: tiêu đề, văn bản, ảnh, nút bấm...

Các thẻ nền tảng bạn dùng mỗi ngày

Thẻ	Ý nghĩa	Dùng để
`<h1>` đến `<h6>`	Heading (tiêu đề)	Phân cấp tiêu đề, `<h1>` lớn/quan trọng nhất
`<p>`	Paragraph	Đoạn văn bản
`<a>`	Anchor	Liên kết (link)
`<img>`	Image	Chèn hình ảnh
`<ul>` / `<ol>` / `<li>`	List	Danh sách không thứ tự / có thứ tự / mục danh sách
`<div>`	Division	Khối "vô nghĩa" để gom nhóm, định kiểu bằng CSS
`<span>`	Span	Bọc một đoạn nhỏ trong dòng văn bản

Đừng cố nhớ hết ngay. Bạn sẽ thuộc dần qua thực hành. Điều quan trọng là hiểu tại sao mỗi thẻ tồn tại: chúng gán ý nghĩa cho nội dung.

Lồng thẻ (nesting) và cây DOM

HTML có cấu trúc lồng nhau giống như những chiếc hộp đặt trong nhau. Một <body> chứa nhiều <div>, mỗi <div> chứa các <p>, <img>... Cấu trúc lồng này tạo thành một cây gọi là DOM (Document Object Model). Quy tắc vàng: thẻ mở trước thì phải đóng sau — không được "đan chéo".

Sai: <p>Văn bản <strong>in đậm</p></strong> Đúng: <p>Văn bản <strong>in đậm</strong></p>

Tình huống thực tế

Ví dụ 1 — Lỗi font tiếng Việt của một shop mỹ phẩm trên Shopee

Chị Hương, chủ một shop mỹ phẩm nhỏ ở Quận 7, TP.HCM, thuê một bạn freelancer làm trang landing page giới thiệu sản phẩm với ngân sách 3 triệu đồng. Khi trang lên sóng, toàn bộ tên sản phẩm "Kem dưỡng trắng da" hiển thị thành "Kem dÆ°á»¡ng tráº¯ng da" — một mớ ký tự lộn xộn. Khách hàng vào xem tưởng shop làm ăn cẩu thả, tỷ lệ thoát trang (bounce rate) tăng vọt.

Diễn giải: Nguyên nhân chỉ là một dòng bị thiếu trong <head>: bạn freelancer quên <meta charset="UTF-8">. Trình duyệt không biết file được mã hóa bằng UTF-8 nên đoán sai bộ ký tự, làm hỏng toàn bộ dấu tiếng Việt.

Bài học: Với người Việt làm web, <meta charset="UTF-8"> không phải tùy chọn — nó là bắt buộc, đặt ngay dòng đầu trong <head>. Một dòng code thiếu có thể phá hỏng cả trang và làm mất doanh thu thật.

Ví dụ 2 — Tiq, công ty fintech và bài toán SEO nhờ heading đúng

Một startup fintech giả định tên Tiq ở Hà Nội viết blog hướng dẫn quản lý chi tiêu. Ban đầu, để tiêu đề bài viết "to và đậm", lập trình viên dùng <div> rồi tô CSS cho lớn thay vì dùng <h1>. Sau 3 tháng, bài viết gần như không lên top Google dù nội dung tốt.

Diễn giải: Google đọc cấu trúc HTML để hiểu nội dung. Khi tiêu đề là <div> "vô nghĩa", Google không nhận ra đâu là chủ đề chính của trang. Sau khi đội ngũ sửa lại: một <h1> cho tiêu đề chính, các <h2> cho mục lớn, <h3> cho mục nhỏ — đúng phân cấp — thứ hạng tìm kiếm cải thiện rõ rệt trong vài tuần.

Bài học: HTML có ngữ nghĩa (semantic). <h1> không chỉ là "chữ to" — nó nói với máy móc rằng "đây là tiêu đề quan trọng nhất". Chọn đúng thẻ là một quyết định thiết kế, không chỉ là chuyện thẩm mỹ. (Bạn sẽ đào sâu chủ đề này ở Bài 19 — HTML Semantic.)

Ví dụ 3 — Liên kết hỏng trên trang tin của trường đại học

Một bạn sinh viên thực tập tại phòng truyền thông một trường đại học ở Đà Nẵng được giao thêm các liên kết "Đăng ký học bổng" vào trang tin. Bạn viết <a href=dangky.html>Đăng ký</a> — thiếu dấu ngoặc kép quanh giá trị, và đường dẫn cũng sai vị trí file. Kết quả: nút bấm dẫn tới trang 404, hàng trăm sinh viên không nộp được hồ sơ trong ngày cao điểm.

Diễn giải: Hai lỗi nhỏ — thiếu dấu ngoặc kép trong thuộc tính và đường dẫn href sai — đủ để làm hỏng chức năng cốt lõi. Trình duyệt đôi khi "tha thứ" cú pháp lỏng lẻo, nhưng đó là sự may rủi không nên dựa vào.

Bài học: Luôn bọc giá trị thuộc tính trong dấu ngoặc kép, và luôn kiểm tra (test) mọi liên kết trước khi xuất bản. HTML đơn giản nhưng kỷ luật về cú pháp cứu bạn khỏi những sự cố tốn kém.

Hướng dẫn từng bước

Hãy tự tay tạo trang HTML đầu tiên của bạn:

Bước 1 — Chuẩn bị công cụ. Mở một trình soạn thảo. Mình khuyên dùng VS Code (miễn phí, phổ biến nhất). Tạo một file mới tên index.html. Tên index có ý nghĩa đặc biệt: trình duyệt và máy chủ tự hiểu đây là trang chủ.

Bước 2 — Gõ bộ khung. Trong VS Code, gõ dấu ! rồi nhấn Tab, editor sẽ tự sinh ra bộ khung HTML5 chuẩn. Nhớ sửa lang="en" thành lang="vi" và đảm bảo có <meta charset="UTF-8">.

Bước 3 — Thêm tiêu đề trang. Trong <title>, gõ tên trang, ví dụ Trang cá nhân của tôi. Lưu file và để ý: chữ này sẽ hiện trên tab trình duyệt.

Bước 4 — Viết nội dung trong <body>. Thêm một <h1> làm tiêu đề chính, vài <p> giới thiệu bản thân, một danh sách <ul> các sở thích:

<body>
  <h1>Xin chào, mình là Khang</h1>
  <p>Mình đang học thiết kế web tại Vietnamcos.</p>
  <h2>Sở thích của mình</h2>
  <ul>
    <li>Đọc sách</li>
    <li>Chụp ảnh</li>
    <li>Cà phê</li>
  </ul>
  <a href="https://vietnamcos.com">Xem khóa học</a>
</body>

Bước 5 — Mở trong trình duyệt. Nhấp đôi vào file index.html, hoặc trong VS Code cài tiện ích "Live Server" rồi nhấn "Go Live". Bạn sẽ thấy trang web đầu tiên của mình hiện ra.

Bước 6 — Thử nghiệm và quan sát. Đổi <h1> thành <h3>, lưu lại, xem kích thước chữ thay đổi thế nào. Thêm một ảnh bằng <img src="..." alt="...">. Mỗi lần sửa, lưu và xem kết quả — đây là cách học HTML nhanh nhất.

Lỗi thường gặp & mẹo

Lỗi 1 — Quên thẻ đóng. Quên </p> hoặc </div> khiến bố cục trang "vỡ" một cách khó hiểu. Mẹo: VS Code thường tự thêm thẻ đóng khi bạn gõ thẻ mở. Hãy tận dụng và luôn kiểm tra cặp mở–đóng khớp nhau.

Lỗi 2 — Thiếu <meta charset="UTF-8">. Như ví dụ shop mỹ phẩm, đây là lỗi "kinh điển" với người Việt. Mẹo: coi dòng này là phản xạ — luôn có mặt trong mọi trang.

Lỗi 3 — Đan chéo thẻ. Viết <b><i>chữ</b></i> thay vì <b><i>chữ</i></b>. Mẹo: hình dung các thẻ như những chiếc hộp lồng nhau — hộp mở sau phải đóng trước.

Lỗi 4 — Dùng <div> cho mọi thứ ("div-itis"). Lạm dụng <div> cho cả tiêu đề, nút, danh sách làm trang mất ý nghĩa, hại SEO và accessibility. Mẹo: luôn tự hỏi "nội dung này thực chất là gì?" — nếu là tiêu đề thì dùng <h1>–<h6>, là danh sách thì dùng <ul>/<ol>.

Lỗi 5 — Bỏ trống thuộc tính alt của ảnh. Người khiếm thị dùng trình đọc màn hình sẽ không biết ảnh là gì, và Google cũng vậy. Mẹo: luôn viết alt mô tả ngắn gọn, đúng nội dung ảnh.

Mẹo vàng: Hãy dùng công cụ kiểm tra HTML miễn phí tại validator.w3.org. Dán code vào, nó sẽ chỉ ra mọi lỗi cú pháp. Đây là "người thầy" 24/7 cho người mới.

Bài tập thực hành

Tạo trang giới thiệu bản thân (gioithieu.html): có đủ bộ khung chuẩn, lang="vi", charset="UTF-8", một <h1> là tên bạn, ít nhất hai <p>, một danh sách <ul> ba sở thích, và một liên kết <a> tới Facebook của bạn. Mở trong trình duyệt và kiểm tra dấu tiếng Việt hiển thị đúng.

Tạo "thực đơn quán cà phê" dùng <h2> cho từng nhóm (Cà phê, Trà, Bánh) và <ul> liệt kê món bên dưới mỗi nhóm. Thêm một ảnh <img> (tải bất kỳ ảnh nào về cùng thư mục) với alt mô tả đầy đủ.

Săn lỗi: cố tình xóa </p> ở một chỗ, xóa <meta charset>, viết một href thiếu dấu ngoặc kép. Mở trang, quan sát hỏng thế nào. Sau đó dán code vào validator.w3.org để xem nó báo lỗi gì. Cuối cùng, sửa lại cho đúng.

Thử thách nâng cao: xem mã nguồn của một trang web bạn thích (chuột phải → "Xem nguồn trang" / "View Page Source"). Thử nhận diện <head>, <body>, các thẻ <h1>, <a>, <img>. Bạn sẽ ngạc nhiên vì mọi trang đều dựa trên cùng những viên gạch bạn vừa học.

Tóm tắt

HTML là bộ khung nền tảng của mọi trang web — nó định nghĩa ý nghĩa và cấu trúc của nội dung, không phải để trang trí (đó là việc của CSS ở bài sau). Bạn đã học: một phần tử gồm thẻ mở, nội dung, thẻ đóng; thuộc tính cung cấp thông tin bổ sung như href, src, alt; và mọi trang đều có bộ khung chuẩn với <head> chứa thông tin hậu trường và <body> chứa nội dung hiển thị.

Ba bài học cốt lõi rút ra từ thực tế: (1) với người Việt, <meta charset="UTF-8"> là bắt buộc để dấu tiếng Việt không bị vỡ; (2) chọn đúng thẻ ngữ nghĩa — như <h1> cho tiêu đề — ảnh hưởng trực tiếp tới SEO và khả năng tiếp cận; (3) kỷ luật về cú pháp (đóng thẻ đầy đủ, ngoặc kép cho thuộc tính, không đan chéo) cứu bạn khỏi những sự cố tốn kém.

Hãy thực hành thật nhiều — gõ tay, mở trình duyệt, sửa, quan sát. HTML đơn giản đến mức nhiều người xem thường, nhưng chính sự vững vàng ở nền móng này sẽ quyết định bạn đi xa được bao nhiêu trong cả khóa học. Ở Bài 2, chúng ta sẽ "khoác áo" cho bộ khung này bằng CSS. Hẹn gặp lại bạn ở đó.