HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu — nó nói cho trình duyệt biết: “đây là tiêu đề, đây là đoạn văn, đây là ảnh”. Nó không phải ngôn ngữ lập trình vì không có logic điều kiện hay vòng lặp.
HTML mô tả cấu trúc (cái gì hiện ở đâu). JavaScript thêm hành vi (click thì chạy gì). CSS thêm giao diện (màu gì, to nhỏ cỡ nào). Ba ngôn ngữ này kết hợp tạo nên mọi trang web.
Cấu trúc một trang HTML
Mỗi trang HTML bắt đầu bằng <!DOCTYPE html> rồi đến <html>. Bên trong chia làm hai phần: <head> chứa thông tin meta (tiêu đề tab, charset), và <body> chứa nội dung hiển thị.
// File: index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang đầu tiên của tôi</title>
</head>
<body>
<h1>Xin chào thế giới!</h1>
<p>Đây là trang web đầu tiên tôi viết bằng HTML.</p>
</body>
</html>
Các thẻ hay dùng nhất
| Thẻ | Tác dụng | Ví dụ |
|---|---|---|
<h1> – <h6> | Tiêu đề (h1 lớn nhất, h6 nhỏ nhất) | <h2>Chương 1</h2> |
<p> | Đoạn văn | <p>Nội dung…</p> |
<a> | Liên kết | <a href=“url”>Bấm đây</a> |
<img> | Hình ảnh | <img src=“anh.jpg” alt=“Mô tả”> |
<ul>/<ol> | Danh sách không/có số thứ tự | <li>Mục 1</li> |
<div> | Nhóm phần tử (khối) | Dùng để bố cục |
<span> | Nhóm phần tử (nội dòng) | Dùng để style một phần text |
Thẻ ngữ nghĩa (Semantic HTML)
HTML5 có các thẻ ngữ nghĩa cho trình duyệt và Google biết mỗi phần trang có ý nghĩa gì: <header> (đầu trang), <nav> (menu), <main> (nội dung chính), <article> (bài viết), <footer> (chân trang). Dùng chúng thay cho <div> bất cứ khi có thể.
// File: semantic.html
<header>
<nav>
<a href="/">Trang chủ</a>
<a href="/about">Giới thiệu</a>
</nav>
</header>
<main>
<article>
<h2>Bài viết đầu tiên</h2>
<p>Nội dung bài viết ở đây.</p>
</article>
</main>
<footer>
<p>© 2026 DevArchive</p>
</footer>
Form: nhận dữ liệu từ người dùng
Form (<form>) cho phép người dùng nhập dữ liệu: tên, email, mật khẩu, lựa chọn. Thẻ <input> là thẻ hay dùng nhất, với thuộc tính type quyết định kiểu nhập: text, email, password, number, checkbox, radio…
// File: form.html
<form>
<label for="name">Họ tên:</label>
<input type="text" id="name" placeholder="Nhập họ tên">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="email@vidu.com">
<label for="password">Mật khẩu:</label>
<input type="password" id="password">
<button type="submit">Đăng ký</button>
</form>
❓ Thẻ HTML nào dùng để tạo liên kết bấm được đến trang khác?
- Viết được file HTML hoàn chỉnh với DOCTYPE, head, body
- Sử dụng được h1-h6, p, a, img, ul/ol
- Phân biệt thẻ ngữ nghĩa và div/span
- Tạo được form đơn giản với input và button