Phát triển giao diện (frontend) là quá trình xây dựng phần trực quan và tương tác của một trang web — nơi người dùng thực sự nhìn thấy, đọc và thao tác. Về mặt kỹ thuật, frontend bao gồm ba lớp cốt lõi: cấu trúc (HTML), biểu hiện (CSS), và hành vi (JavaScript). Trong đó, HTML đóng vai trò nền tảng, xác định bố cục và ý nghĩa ngữ nghĩa của nội dung.
HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để mô tả cấu trúc tài liệu trên web. Mỗi phần tử HTML được khai báo bằng cặp thẻ mở – đóng (ví dụ: <p></p>) hoặc thẻ tự đóng (ví dụ: <img />). Một tài liệu HTML chuẩn luôn tuân theo khuôn mẫu sau:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trang chủ</title>
</head>
<body>
<!-- Nội dung hiển thị ở đây -->
</body>
</html>Các thành phần chính trong <head>
Thẻ <head> không hiển thị trực tiếp trên giao diện, nhưng chứa các thông tin điều khiển cách trình duyệt xử lý và hiển thị trang:
<meta charset="UTF-8">: Đảm bảo hỗ trợ đầy đủ ký tự Unicode.<meta name="viewport">: Thiết lập khả năng đáp ứng trên thiết bị di động.<title>: Tiêu đề xuất hiện trên tab trình duyệt — rất quan trọng cho SEO.<link rel="icon">: Liên kết tới biểu tượng favicon.<meta name="description">: Mô tả ngắn gọn nội dung trang — thường xuất hiện trong kết quả tìm kiếm.<link rel="stylesheet">: Nhúng file CSS bên ngoài.<script src="..."></script>: Tải script JavaScript.
Thẻ cơ bản và cách sử dụng
Thẻ định dạng văn bản
Không nên dùng thẻ thuần định dạng như <b>, <i>, <u>. Thay vào đó, ưu tiên các thẻ mang tính ngữ nghĩa:
<strong>: Nội dung quan trọng (được hiểu là nhấn mạnh về mặt ngữ nghĩa, không chỉ kiểu dáng).<em>: Nội dung cần nhấn giọng khi đọc to.<mark>: Đoạn văn được đánh dấu nổi bật.<small>: Ghi chú phụ, bản quyền, v.v.<del>và<ins>: Thể hiện nội dung đã xóa hoặc thêm vào — hữu ích trong chỉnh sửa cộng tác.
Thẻ hình ảnh
Thẻ <img> yêu cầu thuộc tính src và alt:
<img
src="assets/photo.jpg"
alt="Ảnh chụp chân dung người lập trình viên đang làm việc"
title="Ảnh đại diện cá nhân"
width="400"
height="300" />Thuộc tính alt không chỉ hỗ trợ người khiếm thị qua bộ đọc màn hình mà còn cải thiện khả năng lập chỉ mục của công cụ tìm kiếm.
Liên kết (anchor)
Liên kết nội bộ và bên ngoài được tạo bằng <a>:
<a href="/gioi-thieu.html" target="_self">Giới thiệu</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Website đối tác</a>
<a href="#section-contact">Liên hệ ngay</a>Lưu ý: Khi mở liên kết bên ngoài với target="_blank", nên kèm rel="noopener noreferrer" để tăng bảo mật và hiệu năng.
Danh sách
Ba loại danh sách phổ biến:
- Danh sách không thứ tự (
<ul>): Dùng khi thứ tự không quan trọng. - Danh sách có thứ tự (
<ol>): Dùng khi cần đánh số hoặc chữ cái tuần tự. - Danh sách định nghĩa (
<dl>): Phù hợp cho từ điển, FAQ hoặc cặp tiêu đề–mô tả.
Bảng dữ liệu
Chỉ dùng <table> khi biểu diễn dữ liệu dạng bảng — không dùng để bố trí layout. Cấu trúc chuẩn gồm:
<caption>: Tiêu đề bảng.<thead>: Phần đầu bảng (chứa tiêu đề cột).<tbody>: Phần thân bảng (dữ liệu chính).<th>: Ô tiêu đề — tự động căn giữa và in đậm.colspan/rowspan: Gộp ô theo hàng hoặc cột.
Biểu mẫu (form)
Một biểu mẫu hoàn chỉnh nên bao gồm:
<form>với thuộc tínhaction(đường dẫn xử lý) vàmethod(gethoặcpost).- Nhóm điều khiển trong
<fieldset>, tiêu đề nhóm bằng<legend>. - Các điều khiển nhập liệu:
<input type="text">,<input type="email">,<input type="date">,<textarea>,<select>, v.v. - Thuộc tính
required,placeholder,autocompletegiúp nâng cao trải nghiệm người dùng.
Ví dụ biểu mẫu đăng ký đơn giản:
<form action="/api/register" method="post">
<fieldset>
<legend>Thông tin cá nhân</legend>
<label for="fullname">Họ và tên:</label>
<input type="text" id="fullname" name="fullname" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="bio">Giới thiệu bản thân:</label>
<textarea id="bio" name="bio" rows="4" maxlength="500"></textarea>
<button type="submit">Gửi đăng ký</button>
</fieldset>
</form>Tại sao cần viết HTML có ngữ nghĩa?
Ngữ nghĩa hóa (semantic HTML) nghĩa là chọn thẻ phù hợp với chức năng nội dung — ví dụ: dùng <article> cho bài viết độc lập, <nav> cho thanh điều hướng, <footer> cho chân trang. Lợi ích bao gồm:
- Tăng khả năng tiếp cận (accessibility) cho người dùng thiết bị hỗ trợ.
- Cải thiện thứ hạng tìm kiếm nhờ công cụ dễ phân tích cấu trúc.
- Hỗ trợ tốt hơn trên thiết bị không màn hình hoặc màn hình nhỏ.
- Giảm phụ thuộc vào thẻ không ngữ nghĩa như
<div>và<span>khi không cần thiết.
Một số lưu ý thực tiễn
- Luôn khai báo
langtrong thẻ<html>để hỗ trợ đọc màn hình. - Ưu tiên
<button>thay vì<input type="button">vì dễ tùy chỉnh hơn. - Sử dụng
<label for="id">để gắn nhãn rõ ràng cho mọi điều khiển nhập liệu. - Tránh dùng thuộc tính
align,bgcolor,border— tất cả nên xử lý bằng CSS.