Ví dụ HTML từ cơ bản đến nâng cao
Trần Thị Vân - 235
- 24/07/2026
HTML là nền móng của một trang web. Dù một website có giao diện hiện đại đến đâu, phía sau phần nội dung hiển thị vẫn cần một cấu trúc HTML rõ ràng để trình duyệt hiểu đâu là tiêu đề, đoạn văn, danh sách, hình ảnh, liên kết, biểu mẫu hay từng khu vực nội dung. Vì vậy, học HTML không chỉ là nhớ tên thẻ mà quan trọng hơn là biết sử dụng đúng thẻ trong đúng tình huống.
Bài viết này tổng hợp các ví dụ HTML theo mức độ từ cơ bản đến nâng cao, ưu tiên những tình huống có giá trị khi xây dựng website thực tế. Mỗi ví dụ đều hướng đến việc giúp người học hiểu bản chất của cấu trúc HTML thay vì chỉ sao chép mã nguồn.
Nắm cấu trúc HTML trước khi viết mã
Một đoạn HTML thường được tạo thành từ các thẻ mở và thẻ đóng. Nội dung nằm giữa hai thẻ sẽ được trình duyệt diễn giải theo ý nghĩa của thẻ đó. Chẳng hạn, thẻ p dùng cho một đoạn văn, còn thẻ h2 dùng cho một tiêu đề cấp hai.
Điểm quan trọng là HTML mang tính cấu trúc. Nếu muốn tạo một tiêu đề, nên sử dụng thẻ tiêu đề thay vì dùng một đoạn văn rồi làm cho chữ lớn bằng CSS. Nếu muốn tạo danh sách, nên sử dụng danh sách thay vì tự chèn ký tự gạch đầu dòng.
Ví dụ đơn giản:
<p>Đây là một đoạn văn HTML.</p>
Trong ví dụ trên, p cho trình duyệt biết phần nội dung này là một đoạn văn. Cách viết này rõ ràng hơn nhiều so với việc dùng một thẻ không mang đúng ý nghĩa chỉ để tạo ra giao diện tương tự.
Thẻ HTML và nội dung bên trong
Một thẻ thông thường có thể bao gồm thẻ mở, nội dung và thẻ đóng. Ví dụ:
<strong>Nội dung quan trọng</strong>
Khi hiển thị trên trình duyệt, nội dung bên trong được thể hiện nổi bật hơn. Trong mã nguồn, tên thẻ chỉ cần xuất hiện đúng một lần ở dạng thẻ mở và một lần ở dạng thẻ đóng.
Khi viết tài liệu hướng dẫn HTML, nếu muốn đề cập đến tên thẻ như html, head hoặc body mà không muốn trình duyệt hiểu đó là mã HTML thực thi, chỉ nên viết tên thẻ trong nội dung. Đây cũng là cách tránh làm hỏng cấu trúc của bài viết.
Thẻ lồng nhau phải đúng thứ tự
HTML cho phép một thẻ nằm bên trong một thẻ khác. Tuy nhiên, các thẻ phải được đóng theo đúng thứ tự. Ví dụ hợp lệ:
<p>Đây là nội dung <strong>quan trọng</strong> cần chú ý.</p>
Thẻ strong được mở bên trong thẻ p và cũng được đóng trước khi thẻ p kết thúc.
Ngược lại, cách đóng thẻ không đúng thứ tự có thể làm cấu trúc tài liệu trở nên khó kiểm soát. Với những trang có nhiều lớp HTML, lỗi kiểu này càng dễ gây ra vấn đề về giao diện hoặc khả năng đọc của trình duyệt.
Tạo tiêu đề và đoạn văn cho nội dung
Tiêu đề và đoạn văn là hai thành phần xuất hiện trong hầu hết website. Việc tổ chức chúng đúng cấp độ giúp cả người đọc lẫn công cụ tìm kiếm dễ dàng hiểu cấu trúc nội dung.
Các thẻ tiêu đề được sử dụng theo thứ tự từ h1 đến h6. Trong một bài viết thông thường, h1 đại diện cho chủ đề chính, còn các phần bên dưới có thể sử dụng h2 và h3 tùy theo mức độ phân cấp.
<h2>Các thành phần quan trọng của HTML</h2>
<p>HTML cung cấp nhiều thẻ để tổ chức nội dung của một trang web.</p>
<h3>Đoạn văn</h3>
<p>Thẻ p được dùng để biểu diễn một đoạn nội dung.</p>
Không nên lựa chọn cấp tiêu đề chỉ dựa trên kích thước chữ. Kích thước, khoảng cách và màu sắc nên được xử lý bằng CSS, còn cấp độ của tiêu đề cần phản ánh cấu trúc nội dung.
Ví dụ tổ chức nội dung theo cấp độ
<h2>Thiết kế website</h2>
<p>Một website cần có cấu trúc nội dung rõ ràng.</p>
<h3>Cấu trúc giao diện</h3>
<p>Giao diện nên được tổ chức theo từng nhóm nội dung.</p>
<h3>Nội dung trang</h3>
<p>Nội dung cần được trình bày dễ đọc và có thứ tự.</p>
Cách tổ chức này tạo ra một cây nội dung dễ hiểu: phần lớn nằm ở h2, các ý nhỏ hơn nằm ở h3. Khi bài viết phát triển dài hơn, việc giữ nguyên logic phân cấp sẽ giúp nội dung không trở thành một khối văn bản rời rạc.
Định dạng nội dung bằng các thẻ phù hợp
HTML có một số thẻ giúp thể hiện ý nghĩa của nội dung thay vì chỉ thay đổi hình thức. Đây là điểm rất đáng chú ý đối với người mới học, bởi HTML tốt không nên biến toàn bộ nội dung thành những đoạn chữ chỉ được định dạng bằng kích thước hoặc kiểu chữ.
Ví dụ, khi một cụm từ thực sự cần được nhấn mạnh về mức độ quan trọng, có thể sử dụng strong:
<p>Bạn nên <strong>kiểm tra mã HTML trước khi đưa website lên máy chủ</strong>.</p>
Khi muốn nhấn mạnh theo sắc thái hoặc ngữ điệu, có thể sử dụng em:
<p>Đây là một lưu ý <em>đặc biệt quan trọng</em> khi viết HTML.</p>
Việc lựa chọn thẻ dựa trên ý nghĩa giúp mã nguồn dễ đọc hơn và tạo nền tảng tốt cho các công nghệ hỗ trợ người dùng.
Kết hợp strong và em đúng mục đích
Hai thẻ này có thể xuất hiện trong cùng một đoạn văn khi nội dung thực sự cần cả hai mức nhấn mạnh:
<p>Đây là <strong>một nguyên tắc <em>rất quan trọng</em></strong> khi xây dựng cấu trúc HTML.</p>
Tuy nhiên, không nên lạm dụng các thẻ nhấn mạnh. Nếu quá nhiều nội dung đều được làm nổi bật, người đọc sẽ khó nhận ra đâu mới là thông tin quan trọng.
Tạo danh sách dữ liệu bằng HTML
Danh sách là lựa chọn phù hợp khi cần trình bày nhiều ý có cùng vai trò. HTML cung cấp hai kiểu danh sách thường gặp: danh sách không có thứ tự và danh sách có thứ tự.
Danh sách không có thứ tự sử dụng ul kết hợp với li. Kiểu này phù hợp khi thứ tự các mục không quyết định ý nghĩa.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Danh sách có thứ tự sử dụng ol và li. Kiểu này phù hợp với quy trình, các bước thực hiện hoặc những nội dung mà thứ tự có ý nghĩa.
<ol>
<li>Tạo cấu trúc HTML</li>
<li>Thêm nội dung</li>
<li>Kiểm tra mã nguồn</li>
<li>Đưa website lên máy chủ</li>
</ol>
Danh sách nhiều cấp
HTML cũng cho phép tạo danh sách bên trong một mục của danh sách khác. Cách này hữu ích khi cần mô tả một nhóm nội dung có nhiều cấp.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
Danh sách nhiều cấp nên được sử dụng khi quan hệ giữa các mục thực sự tồn tại. Không nên tạo nhiều tầng chỉ để tạo hiệu ứng thụt dòng, bởi cách trình bày đó có thể làm nội dung khó đọc và khó bảo trì.
Tạo liên kết giữa các trang
Liên kết là một trong những thành phần quan trọng nhất của website. Thẻ a cho phép người dùng chuyển từ một tài liệu hoặc vị trí này sang tài liệu hoặc vị trí khác.
Một liên kết cơ bản có thể được viết như sau:
<a href="https://webmoi.vn/">Web Mới</a>
Thuộc tính href xác định địa chỉ mà liên kết sẽ trỏ tới. Phần văn bản nằm giữa thẻ mở và thẻ đóng là nội dung người dùng nhìn thấy và có thể nhấp vào.
Liên kết đến một trang khác trong cùng website
Đối với website có nhiều trang, có thể sử dụng đường dẫn tương đối khi các tài nguyên nằm trong cùng hệ thống:
<a href="/thiet-ke-website/">Thiết kế website</a>
Cách này giúp đường dẫn không phụ thuộc trực tiếp vào tên miền. Nó đặc biệt thuận tiện khi website được triển khai ở nhiều môi trường khác nhau trong quá trình phát triển và kiểm thử.
Liên kết đến vị trí cụ thể trong trang
Liên kết không nhất thiết phải đưa người dùng sang một trang khác. Nó cũng có thể đưa người dùng đến một vị trí cụ thể trong cùng trang thông qua thuộc tính id.
<a href="#html-co-ban">Xem phần HTML cơ bản</a>
<p id="html-co-ban">Nội dung về HTML cơ bản nằm tại đây.</p>
Kiểu liên kết này phù hợp với các bài viết dài, trang hướng dẫn hoặc mục lục, nơi người dùng cần chuyển nhanh đến một phần cụ thể thay vì phải cuộn toàn bộ trang.
Chèn hình ảnh vào trang web
Hình ảnh được thêm vào HTML thông qua thẻ img. Khác với nhiều thẻ nội dung thông thường, hình ảnh cần khai báo nguồn tài nguyên thông qua thuộc tính src.
<img src="/images/html-co-ban.jpg" alt="Ví dụ cấu trúc HTML cơ bản">
Thuộc tính src xác định vị trí hình ảnh, trong khi alt cung cấp nội dung mô tả thay thế. Nội dung alt đặc biệt quan trọng khi hình ảnh không tải được hoặc khi người dùng sử dụng công nghệ hỗ trợ để đọc trang.
Viết alt cho hình ảnh có ý nghĩa
Không nên biến thuộc tính alt thành nơi nhồi từ khóa. Nội dung nên mô tả đúng những gì hình ảnh truyền tải.
Ví dụ:
<img src="/images/html-form.jpg" alt="Biểu mẫu đăng ký được tạo bằng HTML">
Nếu hình ảnh chỉ mang tính trang trí và không cung cấp thông tin cần thiết, việc xử lý thuộc tính alt cần được cân nhắc theo mục đích của hình ảnh thay vì cố đưa từ khóa vào mọi trường hợp.
Xây dựng bảng dữ liệu
Bảng HTML phù hợp với dữ liệu có quan hệ theo hàng và cột như bảng giá, thông số kỹ thuật, danh sách đối chiếu hoặc kết quả thống kê. Không nên dùng table để dựng toàn bộ bố cục website như cách làm phổ biến trong HTML cũ.
Một bảng đơn giản gồm hàng tr, ô tiêu đề th và ô dữ liệu td:
<table>
<tr>
<th>Công nghệ</th>
<th>Vai trò</th>
</tr>
<tr>
<td>HTML</td>
<td>Xây dựng cấu trúc nội dung</td>
</tr>
<tr>
<td>CSS</td>
<td>Trình bày giao diện</td>
</tr>
</table>
Trong ví dụ này, hàng đầu tiên chứa tên các cột nên sử dụng th thay vì td. Việc phân biệt ô tiêu đề và ô dữ liệu giúp cấu trúc bảng rõ ràng hơn.
Khi nào nên dùng table
Hãy sử dụng bảng khi dữ liệu cần được đọc theo mối quan hệ giữa hàng và cột. Ví dụ, bảng so sánh hai gói dịch vụ là trường hợp phù hợp:
<table>
<tr>
<th>Tiêu chí</th>
<th>Gói cơ bản</th>
<th>Gói nâng cao</th>
</tr>
<tr>
<td>Số trang</td>
<td>10</td>
<td>30</td>
</tr>
<tr>
<td>Biểu mẫu</td>
<td>Có</td>
<td>Có</td>
</tr>
</table>
Nếu mục đích chỉ là chia website thành khu vực đầu trang, nội dung, thanh bên và chân trang thì không nên dùng bảng. Cấu trúc nội dung và phần trình bày nên được tách biệt để website dễ phát triển và bảo trì hơn.
Xây dựng biểu mẫu nhập dữ liệu
Biểu mẫu là phần HTML xuất hiện trong rất nhiều website thực tế, từ trang liên hệ, đăng ký tài khoản đến tìm kiếm, đặt hàng và gửi yêu cầu tư vấn. Một biểu mẫu tốt không chỉ cần hiển thị đúng giao diện mà còn phải có cấu trúc rõ ràng để người dùng hiểu cần nhập gì và hệ thống biết dữ liệu đó thuộc trường nào.
Thẻ form là thành phần bao quanh các trường nhập liệu. Bên trong có thể kết hợp nhiều loại trường khác nhau tùy theo dữ liệu cần thu thập.
<form action="/lien-he" method="post">
<p>
<label>Họ và tên</label>
<input type="text" name="ho_ten">
</p>
<p>
<label>Email</label>
<input type="email" name="email">
</p>
<p>
<button type="submit">Gửi thông tin</button>
</p>
</form>
Trong đó, action xác định nơi tiếp nhận dữ liệu, còn method xác định phương thức gửi. Thuộc tính name của từng trường rất quan trọng vì nó giúp phía máy chủ nhận diện dữ liệu được gửi lên.
Trường nhập văn bản
Với dữ liệu dạng văn bản ngắn như họ tên, tên công ty hoặc mã khách hàng, có thể sử dụng trường nhập văn bản.
<input type="text" name="ho_ten">
Không nên dùng một trường văn bản cho mọi loại dữ liệu. Nếu dữ liệu có bản chất riêng như email, số điện thoại hoặc ngày tháng, việc lựa chọn loại trường phù hợp sẽ giúp trình duyệt hỗ trợ người dùng tốt hơn.
Trường nhập email
Đối với địa chỉ email, nên sử dụng type="email" thay vì type="text".
<input type="email" name="email">
Cách khai báo này cho phép trình duyệt nhận biết đây là trường email và có thể thực hiện một số kiểm tra định dạng cơ bản trước khi biểu mẫu được gửi.
Trường nhập mật khẩu
Dữ liệu mật khẩu cần được hiển thị dưới dạng ký tự che khuất trên giao diện. HTML hỗ trợ trường này thông qua type="password".
<input type="password" name="mat_khau">
Việc che ký tự chỉ liên quan đến cách hiển thị trên giao diện. Nó không có nghĩa dữ liệu đã được mã hóa khi gửi đến máy chủ. Bảo mật dữ liệu vẫn phải được xử lý ở tầng máy chủ và hệ thống truyền tải.
Trường nhập số
Khi dữ liệu mang tính số học như số lượng hoặc một giá trị số, có thể sử dụng type="number".
<input type="number" name="so_luong" min="1" max="100">
Các thuộc tính min và max giúp giới hạn khoảng giá trị mà người dùng có thể nhập theo quy tắc của biểu mẫu.
Ô nhập nội dung dài
Không nên dùng trường một dòng cho những nội dung như lời nhắn, yêu cầu tư vấn hoặc mô tả sản phẩm. Với nội dung dài, textarea là lựa chọn phù hợp.
<textarea name="noi_dung"></textarea>
Khác với input, nội dung của textarea nằm giữa thẻ mở và thẻ đóng. Đây là điểm dễ gây nhầm lẫn đối với người mới bắt đầu học HTML.
Kết nối nhãn với trường nhập liệu
Nhãn giúp người dùng biết trường nhập liệu yêu cầu thông tin gì. Một cách tổ chức tốt là liên kết label với trường tương ứng thông qua thuộc tính for và id.
<label for="email">Địa chỉ email</label>
<input type="email" id="email" name="email">
Giá trị của for phải tương ứng với giá trị của id. Nhờ đó, mối quan hệ giữa nhãn và trường nhập liệu trở nên rõ ràng.
Đây là một chi tiết nhỏ nhưng có giá trị lớn khi xây dựng biểu mẫu chuyên nghiệp. Người dùng có thể tương tác với trường dễ dàng hơn, đồng thời cấu trúc biểu mẫu cũng rõ ràng hơn đối với các công nghệ hỗ trợ.
Bắt buộc người dùng nhập dữ liệu
Nếu một trường bắt buộc phải có dữ liệu, có thể sử dụng thuộc tính required.
<label for="ho-ten">Họ và tên</label>
<input type="text" id="ho-ten" name="ho_ten" required>
Trình duyệt có thể ngăn biểu mẫu được gửi khi trường bắt buộc chưa có dữ liệu. Tuy nhiên, kiểm tra phía trình duyệt không thay thế cho việc kiểm tra dữ liệu ở máy chủ. Dữ liệu gửi từ người dùng vẫn cần được xác thực lại trước khi xử lý.
Lựa chọn dữ liệu trong biểu mẫu
Không phải trường nào cũng cần người dùng tự gõ dữ liệu. Khi người dùng chỉ được phép chọn một giá trị hoặc một nhóm giá trị nhất định, các thành phần lựa chọn sẽ giúp biểu mẫu rõ ràng và giảm sai sót.
Danh sách lựa chọn
Thẻ select phù hợp khi người dùng cần chọn một giá trị trong danh sách có sẵn.
<label for="goi-dich-vu">Gói dịch vụ</label>
<select id="goi-dich-vu" name="goi_dich_vu">
<option value="co-ban">Cơ bản</option>
<option value="nang-cao">Nâng cao</option>
<option value="doanh-nghiep">Doanh nghiệp</option>
</select>
Nội dung người dùng nhìn thấy nằm trong option, còn giá trị được gửi đi được xác định bởi thuộc tính value. Hai phần này có thể giống hoặc khác nhau tùy theo cách hệ thống xử lý dữ liệu.
Nhóm lựa chọn một giá trị
Khi người dùng chỉ được chọn một phương án trong một nhóm, có thể sử dụng các trường có cùng giá trị name.
<p>
<input type="radio" id="nam" name="gioi_tinh" value="nam">
<label for="nam">Nam</label>
</p>
<p>
<input type="radio" id="nu" name="gioi_tinh" value="nu">
<label for="nu">Nữ</label>
</p>
Điểm quan trọng là các lựa chọn thuộc cùng một nhóm phải có cùng name. Nếu mỗi nút có một tên khác nhau, trình duyệt có thể xem chúng là những nhóm lựa chọn độc lập.
Cho phép chọn nhiều giá trị
Nếu người dùng có thể chọn nhiều phương án cùng lúc, checkbox là lựa chọn phù hợp.
<p>
<input type="checkbox" id="html" name="cong_nghe[]" value="html">
<label for="html">HTML</label>
</p>
<p>
<input type="checkbox" id="css" name="cong_nghe[]" value="css">
<label for="css">CSS</label>
</p>
<p>
<input type="checkbox" id="javascript" name="cong_nghe[]" value="javascript">
<label for="javascript">JavaScript</label>
</p>
Cách đặt tên có dạng mảng thường được sử dụng khi phía máy chủ cần nhận nhiều giá trị từ cùng một nhóm dữ liệu. Cách xử lý cụ thể phụ thuộc vào ngôn ngữ lập trình phía máy chủ.
Tạo nút thao tác
Nút là thành phần giúp người dùng thực hiện hành động như gửi biểu mẫu, đặt lại dữ liệu hoặc thực hiện một thao tác do JavaScript xử lý.
<button type="submit">Gửi biểu mẫu</button>
Trong biểu mẫu, submit thường được dùng để gửi dữ liệu. Nếu nút chỉ thực hiện một hành động khác và không muốn vô tình gửi biểu mẫu, nên khai báo loại nút phù hợp.
<button type="button">Xem thông tin</button>
Việc khai báo rõ type đặc biệt quan trọng khi một biểu mẫu có nhiều nút. Nó giúp hành vi của từng nút dễ đoán hơn và hạn chế những lỗi không mong muốn.
Sử dụng blockquote cho nội dung trích dẫn
Khi một phần nội dung là lời trích dẫn hoặc một đoạn văn được dẫn lại từ nguồn khác, blockquote phù hợp hơn việc chỉ dùng một đoạn văn rồi định dạng bằng CSS.
<blockquote>
HTML giúp xác định cấu trúc và ý nghĩa của nội dung trên trang web.
</blockquote>
Thẻ này nên được sử dụng đúng ngữ cảnh. Không nên dùng blockquote chỉ vì muốn tạo một đoạn văn có khoảng cách hoặc kiểu trình bày đặc biệt.
Hiểu sự khác biệt giữa cấu trúc và giao diện
Một trong những bước tiến quan trọng khi học HTML là hiểu rằng HTML không nên gánh toàn bộ nhiệm vụ thiết kế giao diện. HTML mô tả cấu trúc và ý nghĩa của nội dung, trong khi CSS chịu trách nhiệm chính cho màu sắc, kích thước, khoảng cách, bố cục và nhiều hiệu ứng hiển thị.
Ví dụ, nếu cần một tiêu đề lớn, hãy dùng thẻ tiêu đề phù hợp:
<h2>Thiết kế website chuyên nghiệp</h2>
Sau đó có thể dùng CSS để quyết định tiêu đề đó có kích thước bao nhiêu, màu gì hoặc cách hiển thị trên màn hình nhỏ ra sao. Không nên lựa chọn thẻ chỉ vì trình duyệt mặc định hiển thị nó to hơn hoặc nhỏ hơn.
Không dùng HTML để tạo khoảng cách
Người mới học đôi khi chèn nhiều ký tự hoặc nhiều thẻ không phù hợp để tạo khoảng trống giữa các phần nội dung. Đây là cách làm khó kiểm soát khi website thay đổi kích thước màn hình.
Khoảng cách giữa các thành phần nên được xử lý bằng CSS. HTML chỉ nên tập trung vào việc xác định thành phần đó là gì và có quan hệ như thế nào với nội dung xung quanh.
Xây dựng một trang nội dung hoàn chỉnh
Sau khi nắm được từng thành phần riêng lẻ, bước tiếp theo là kết hợp chúng thành một cấu trúc nội dung thực tế. Một trang đơn giản có thể bao gồm tiêu đề, đoạn giới thiệu, danh sách, hình ảnh, bảng thông tin và liên kết.
<h2>Giới thiệu dịch vụ</h2>
<p>Website cung cấp thông tin tổng quan về dịch vụ và những lựa chọn phù hợp với từng nhu cầu.</p>
<img src="/images/dich-vu.jpg" alt="Thông tin giới thiệu dịch vụ">
<h3>Các điểm nổi bật</h3>
<ul>
<li>Thông tin rõ ràng</li>
<li>Giao diện dễ sử dụng</li>
<li>Tối ưu trên nhiều thiết bị</li>
</ul>
<p>
<a href="/lien-he/">Xem thông tin liên hệ</a>
</p>
Điểm đáng chú ý trong ví dụ này không nằm ở số lượng thẻ mà ở cách mỗi thẻ đảm nhận một nhiệm vụ riêng. Tiêu đề xác định chủ đề, đoạn văn cung cấp thông tin, hình ảnh minh họa nội dung, danh sách trình bày các điểm nổi bật và liên kết dẫn đến hành động tiếp theo.
Kết hợp nhiều thành phần trong một trang
HTML thực tế thường không chỉ gồm những ví dụ tách biệt. Một đoạn nội dung có thể chứa liên kết và phần nhấn mạnh cùng lúc.
<p>
Tìm hiểu thêm về <strong>HTML</strong> thông qua
<a href="/hoc-html/">chuyên mục học HTML</a>
trên Web Mới.
</p>
Cách viết này giữ cho từng thành phần có đúng vai trò. strong nhấn mạnh nội dung quan trọng, còn a tạo đường dẫn có thể tương tác.
Những lỗi HTML cơ bản cần tránh
Nhiều lỗi HTML không khiến trang web lập tức bị trắng màn hình nhưng vẫn làm mã nguồn trở nên khó bảo trì hoặc khiến cấu trúc nội dung không còn rõ ràng. Kiểm tra HTML vì vậy không nên chỉ dừng ở việc nhìn xem trang có hiển thị hay không.
Đóng sai thẻ
Một lỗi phổ biến là mở một thẻ nhưng đóng nhầm thẻ khác hoặc đóng không đúng thứ tự.
<p>Nội dung <strong>quan trọng</p></strong>
Cách viết trên không đúng thứ tự. Thẻ strong phải được đóng trước khi thẻ p kết thúc.
<p>Nội dung <strong>quan trọng</strong></p>
Dùng sai thẻ cho mục đích trình bày
Không nên chọn thẻ chỉ vì giao diện mặc định của trình duyệt trông phù hợp. Một thẻ cần được lựa chọn dựa trên ý nghĩa của nội dung. Khi cấu trúc đúng ngay từ đầu, việc sử dụng CSS để xây dựng giao diện sẽ đơn giản hơn.
Lạm dụng thẻ tiêu đề
Tiêu đề không nên được dùng để làm chữ lớn. Một đoạn văn được đặt trong h3 chỉ vì muốn chữ to không làm cho nội dung trở thành một tiêu đề thực sự. Cấp tiêu đề cần phản ánh cấu trúc của tài liệu.
Dùng bảng để dựng bố cục
Bảng được thiết kế cho dữ liệu dạng hàng và cột. Dùng bảng để chia bố cục trang khiến mã nguồn khó thích ứng với thiết bị di động và làm cấu trúc nội dung kém rõ ràng.
Tổ chức nội dung theo ngữ nghĩa
Khi website phát triển lớn, việc viết HTML đúng cú pháp vẫn chưa đủ. Cấu trúc nên thể hiện được vai trò của từng khu vực nội dung. Đây là lúc tư duy HTML theo ngữ nghĩa trở nên quan trọng: thay vì chỉ quan tâm một phần tử trông như thế nào, hãy xác định nó đang đại diện cho loại nội dung gì.
Ví dụ, một danh sách liên kết điều hướng nên được tổ chức thành danh sách thay vì tạo hàng loạt đoạn văn chứa liên kết. Một tiêu đề nội dung nên dùng thẻ tiêu đề phù hợp thay vì chỉ làm chữ lớn. Một hình ảnh minh họa nên có nội dung mô tả phù hợp thay vì để trình duyệt tự đoán.
Cách xây dựng này tạo ra mã nguồn dễ đọc, dễ bảo trì và có cấu trúc rõ ràng hơn khi dự án ngày càng lớn.
Phân biệt nội dung chính và nội dung bổ trợ
Một trang có thể chứa nhiều nhóm nội dung khác nhau. Khi xây dựng cấu trúc, cần xác định đâu là nội dung chính, đâu là phần bổ trợ và đâu là thông tin điều hướng.
<h2>Hướng dẫn chọn dịch vụ</h2>
<p>Nội dung chính của bài hướng dẫn được trình bày tại đây.</p>
<h3>Tiêu chí cần xem xét</h3>
<ul>
<li>Nhu cầu sử dụng</li>
<li>Ngân sách</li>
<li>Khả năng mở rộng</li>
</ul>
<p>
<a href="/lien-he/">Liên hệ để được tư vấn</a>
</p>
Điểm quan trọng không phải là cố sử dụng càng nhiều loại thẻ càng tốt. Một cấu trúc tốt là cấu trúc vừa đủ để thể hiện rõ mối quan hệ giữa các nội dung.
Tạo cấu trúc điều hướng dễ hiểu
Điều hướng là một phần không thể thiếu của website có nhiều trang. Người dùng cần biết họ đang ở đâu và có thể đi đến đâu tiếp theo. Các liên kết điều hướng cũng cần có nội dung mô tả rõ ràng thay vì những cụm từ quá chung chung.
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/gioi-thieu/">Giới thiệu</a></li>
<li><a href="/dich-vu/">Dịch vụ</a></li>
<li><a href="/bai-viet/">Bài viết</a></li>
<li><a href="/lien-he/">Liên hệ</a></li>
</ul>
Trong một website thực tế, CSS có thể biến danh sách này thành thanh menu ngang, menu dọc hoặc menu thích ứng trên thiết bị di động. HTML vẫn giữ nguyên nhiệm vụ mô tả danh sách các lựa chọn điều hướng.
Đặt văn bản liên kết có ý nghĩa
Văn bản của liên kết nên cho người dùng biết họ sẽ nhận được gì sau khi nhấp. Những cụm từ quá chung như “xem thêm” hoặc “tại đây” thường cung cấp rất ít thông tin nếu được tách khỏi phần nội dung xung quanh.
<p>
<a href="/thiet-ke-website/">Xem dịch vụ thiết kế website</a>
</p>
Với những trang có nhiều liên kết, cách đặt tên cụ thể giúp người dùng nhanh chóng phân biệt mục tiêu của từng liên kết.
Tạo biểu mẫu thực tế hơn
Một biểu mẫu sử dụng trong website thật thường cần nhiều trường và quy tắc dữ liệu hơn ví dụ cơ bản. Tuy nhiên, việc bổ sung trường không nên làm biểu mẫu trở nên rối rắm. Chỉ nên yêu cầu những thông tin cần thiết cho mục đích xử lý.
<form action="/gui-yeu-cau" method="post">
<p>
<label for="ho-ten">Họ và tên</label>
<input type="text" id="ho-ten" name="ho_ten" required>
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="so-dien-thoai">Số điện thoại</label>
<input type="tel" id="so-dien-thoai" name="so_dien_thoai">
</p>
<p>
<label for="yeu-cau">Nội dung yêu cầu</label>
<textarea id="yeu-cau" name="yeu_cau" required></textarea>
</p>
<p>
<button type="submit">Gửi yêu cầu</button>
</p>
</form>
Ở đây, mỗi trường đều có tên riêng và được kết nối với nhãn tương ứng. Các trường thực sự bắt buộc mới sử dụng required. Điều này giúp giảm lượng dữ liệu không cần thiết mà người dùng phải nhập.
Kiểm tra dữ liệu không chỉ ở phía trình duyệt
Các thuộc tính HTML như required, type, min hoặc max có thể hỗ trợ kiểm tra dữ liệu ngay trên trình duyệt. Tuy nhiên, chúng không phải cơ chế bảo mật.
Người dùng có thể gửi yêu cầu trực tiếp đến máy chủ mà không thông qua giao diện biểu mẫu. Vì vậy, mọi dữ liệu nhận được từ phía trình duyệt vẫn phải được kiểm tra, làm sạch và xử lý an toàn ở phía máy chủ.
Đây là nguyên tắc quan trọng khi chuyển từ việc học HTML sang xây dựng website thực tế.
Sử dụng thuộc tính phù hợp cho từng tình huống
Thẻ HTML xác định loại phần tử, còn thuộc tính bổ sung thông tin hoặc hành vi cho phần tử đó. Sử dụng thuộc tính đúng giúp mã nguồn mô tả chính xác hơn những gì website cần.
Ví dụ, một trường nhập dữ liệu có thể được đặt giá trị mặc định:
<input type="text" name="ho_ten" value="Nguyễn Văn A">
Hoặc có thể cung cấp gợi ý cho người dùng:
<input type="text" name="tu_khoa" placeholder="Nhập từ khóa cần tìm">
Cần phân biệt giá trị mặc định với nội dung gợi ý. value thực sự trở thành giá trị của trường, trong khi placeholder chỉ đóng vai trò gợi ý và có thể biến mất khi người dùng bắt đầu nhập.
Dùng id và class đúng mục đích
id thường được dùng để xác định một phần tử cụ thể trong tài liệu, trong khi class phù hợp với một nhóm phần tử có chung đặc điểm.
<p id="gioi-thieu">Nội dung giới thiệu nằm tại đây.</p>
<p class="noi-dung-phu">Thông tin bổ sung thứ nhất.</p>
<p class="noi-dung-phu">Thông tin bổ sung thứ hai.</p>
Một id nên được đặt có chủ đích và tránh tạo nhiều phần tử cùng sử dụng một định danh khi không phù hợp với cấu trúc tài liệu. Ngược lại, một class có thể được dùng cho nhiều phần tử cần cùng một quy tắc CSS hoặc được JavaScript xử lý theo cùng một nhóm.
Tạo nội dung phù hợp với SEO
HTML không tự biến một trang thành trang có thứ hạng cao trên công cụ tìm kiếm. Tuy nhiên, một cấu trúc HTML rõ ràng giúp nội dung dễ được hiểu và giúp các hệ thống xử lý trang xác định những thành phần quan trọng.
Trước tiên, nội dung cần có tiêu đề chính rõ ràng và hệ thống tiêu đề bên dưới được phân cấp hợp lý. Các đoạn văn nên phục vụ trực tiếp cho chủ đề. Danh sách nên được dùng khi thông tin có dạng liệt kê, còn bảng nên dành cho dữ liệu thực sự có quan hệ hàng và cột.
Không nhồi từ khóa vào mã HTML
SEO tốt không đồng nghĩa với việc lặp một từ khóa ở mọi thẻ. Một trang có thể sử dụng từ khóa tự nhiên trong tiêu đề và nội dung, nhưng phần còn lại nên tập trung giải quyết câu hỏi của người đọc.
Ví dụ, thay vì viết nhiều đoạn có cùng một cụm từ chỉ để tăng mật độ từ khóa, hãy mở rộng nội dung bằng những thông tin mà người đọc thực sự cần: cách thực hiện, điều kiện sử dụng, lỗi thường gặp, trường hợp nên áp dụng và cách kiểm tra kết quả.
HTML chỉ là phần cấu trúc. Chất lượng nội dung vẫn là yếu tố cốt lõi của một bài viết hữu ích.
Tối ưu hình ảnh trong cấu trúc trang
Hình ảnh có thể giúp nội dung dễ hiểu hơn nhưng cũng có thể làm website chậm nếu được xử lý không đúng cách. Ngay từ HTML, nên cung cấp thông tin mô tả phù hợp và sử dụng đường dẫn tài nguyên chính xác.
<img src="/images/huong-dan-html.webp" alt="Minh họa cấu trúc một trang HTML">
Tên tệp nên có ý nghĩa và nội dung alt nên mô tả đúng vai trò của hình ảnh. Không nên biến alt thành một đoạn văn dài hoặc danh sách từ khóa không liên quan đến hình ảnh.
Hình ảnh mang thông tin và hình ảnh trang trí
Nếu hình ảnh truyền tải thông tin mà người dùng cần hiểu, phần mô tả nên phản ánh thông tin đó. Nếu hình ảnh chỉ dùng để trang trí và không bổ sung ý nghĩa cho nội dung, cách xử lý cần khác để tránh làm người dùng phải tiếp nhận thông tin không cần thiết.
Nguyên tắc quan trọng là phải xem hình ảnh đang đóng vai trò gì trong ngữ cảnh của trang trước khi quyết định cách mô tả nó.
Viết HTML dễ bảo trì
Một đoạn mã có thể chạy được nhưng vẫn chưa chắc là đoạn mã tốt. Khi website được phát triển trong thời gian dài, khả năng đọc và bảo trì mã nguồn trở nên rất quan trọng.
HTML nên được trình bày nhất quán, các cấp thụt dòng dễ theo dõi và nội dung không nên bị nhồi vào một dòng quá dài.
<h2>Dịch vụ nổi bật</h2>
<p>Thông tin tổng quan về dịch vụ.</p>
<ul>
<li>Tư vấn nhu cầu</li>
<li>Xây dựng giải pháp</li>
<li>Triển khai website</li>
</ul>
Cách trình bày có khoảng cách và thụt dòng hợp lý giúp lập trình viên nhanh chóng nhận ra cấu trúc của tài liệu, đặc biệt khi phải chỉnh sửa một trang có hàng trăm hoặc hàng nghìn dòng mã.
Đặt tên thuộc tính nhất quán
Các giá trị của id, class và name nên được đặt theo một quy ước nhất quán trong toàn bộ dự án. Không nên một phần sử dụng tiếng Việt không dấu, phần khác sử dụng tiếng Anh, phần khác lại viết tùy ý nếu không có lý do rõ ràng.
Một quy ước tốt giúp việc tìm kiếm trong mã nguồn nhanh hơn và giảm nguy cơ tạo ra các tên gần giống nhau nhưng thực chất phục vụ những mục đích khác nhau.
Kiểm tra cấu trúc trước khi đưa mã lên website
Kiểm tra HTML là bước không nên bỏ qua, đặc biệt với những trang được tạo thủ công hoặc được sinh tự động từ hệ thống quản trị nội dung. Một lỗi nhỏ trong cấu trúc có thể trở nên khó phát hiện khi trang chứa nhiều thành phần lồng nhau.
Trước khi sử dụng mã, nên kiểm tra ít nhất các vấn đề sau:
- Thẻ mở và thẻ đóng có khớp nhau hay không.
- Các thẻ lồng nhau có được đóng đúng thứ tự hay không.
- Các thuộc tính có được đặt đúng vị trí hay không.
- Đường dẫn của liên kết và hình ảnh có chính xác hay không.
- Các trường biểu mẫu có tên dữ liệu phù hợp hay không.
- Cấp tiêu đề có phản ánh đúng cấu trúc nội dung hay không.
- Có sử dụng thẻ sai mục đích hay không.
- Có đoạn mã dư thừa hoặc cấu trúc khó bảo trì hay không.
Kiểm tra bằng chính trình duyệt
Trình duyệt là công cụ kiểm tra đầu tiên rất thuận tiện. Sau khi mở trang, có thể sử dụng công cụ dành cho nhà phát triển để quan sát cây HTML thực tế mà trình duyệt đã phân tích.
Nếu cấu trúc hiển thị khác với mã nguồn dự kiến, cần kiểm tra lại những vị trí có thẻ chưa đóng, đóng sai thứ tự hoặc nội dung được sinh tự động.
Kiểm tra mã nguồn sau khi hệ thống sinh HTML
Với website sử dụng PHP hoặc hệ thống quản trị nội dung, HTML cuối cùng có thể được tạo ra từ nhiều phần mã khác nhau. Vì vậy, việc kiểm tra file nguồn thôi chưa đủ. Cần quan sát HTML mà trình duyệt thực sự nhận được.
Điều này đặc biệt quan trọng khi nội dung được lấy từ cơ sở dữ liệu, trình soạn thảo hoặc các thành phần giao diện được lắp ghép tự động.
Kết hợp HTML với CSS và JavaScript
HTML, CSS và JavaScript thường xuất hiện cùng nhau nhưng không đảm nhận cùng một nhiệm vụ. HTML tạo cấu trúc nội dung, CSS xử lý cách trình bày và JavaScript bổ sung khả năng tương tác, xử lý logic phía trình duyệt.
Ví dụ, một nút có thể được tạo bằng HTML:
<button type="button" id="xem-them">Xem thêm</button>
HTML chỉ xác định rằng đây là một nút có nội dung “Xem thêm”. CSS có thể làm cho nút đẹp hơn, còn JavaScript có thể xử lý hành động khi người dùng nhấp vào nút.
HTML là điểm bắt đầu của tương tác
JavaScript thường cần một phần tử HTML để tương tác. Vì vậy, nếu HTML được tổ chức rõ ràng ngay từ đầu, việc viết JavaScript sẽ dễ dàng hơn.
<p id="thong-bao">Nội dung ban đầu</p>
<button type="button" id="thay-doi">Thay đổi nội dung</button>
Trong trường hợp này, các định danh được đặt có chủ đích để JavaScript có thể xác định đúng phần tử cần thao tác. Đây là một ví dụ đơn giản nhưng phản ánh cách HTML trở thành nền tảng cho các chức năng tương tác phức tạp hơn.
Những nguyên tắc quan trọng khi học và sử dụng HTML
Học HTML hiệu quả không nằm ở việc ghi nhớ hàng trăm thẻ. Điều quan trọng hơn là hiểu tại sao một thẻ tồn tại và khi nào nên sử dụng nó.
- Chọn thẻ dựa trên ý nghĩa của nội dung.
- Giữ cấu trúc tiêu đề rõ ràng và nhất quán.
- Dùng danh sách cho dữ liệu có dạng liệt kê.
- Dùng bảng cho dữ liệu thực sự có quan hệ hàng và cột.
- Dùng biểu mẫu với trường nhập liệu phù hợp với loại dữ liệu.
- Viết văn bản liên kết đủ rõ để người dùng hiểu điểm đến.
- Cung cấp mô tả phù hợp cho hình ảnh có ý nghĩa.
- Không dùng HTML thay thế cho nhiệm vụ của CSS.
- Không xem kiểm tra phía trình duyệt là biện pháp bảo mật dữ liệu.
- Luôn kiểm tra cấu trúc trước khi triển khai website.
Khi những nguyên tắc này trở thành thói quen, việc viết HTML sẽ chuyển từ quá trình nhớ cú pháp sang quá trình tổ chức thông tin. Đây mới là nền tảng cần thiết khi bắt đầu xây dựng những website lớn hơn.
HTML từ ví dụ nhỏ đến website thực tế
Các ví dụ HTML chỉ thực sự có giá trị khi người học biết kết hợp chúng để giải quyết một nhu cầu cụ thể. Một trang giới thiệu có thể cần tiêu đề, đoạn văn, hình ảnh và liên kết. Một trang dịch vụ có thể bổ sung danh sách và bảng thông tin. Một trang liên hệ có thể cần biểu mẫu với nhiều loại trường dữ liệu.
Khi dự án phát triển, HTML tiếp tục đóng vai trò là lớp cấu trúc để CSS xây dựng giao diện và JavaScript bổ sung tương tác. Phần mã ban đầu có thể rất đơn giản, nhưng cách tổ chức ngay từ đầu sẽ ảnh hưởng trực tiếp đến khả năng mở rộng về sau.
Với Web Mới, việc hiểu HTML theo hướng thực hành cũng là bước quan trọng trước khi đi sâu hơn vào CSS, JavaScript, PHP và quá trình xây dựng website hoàn chỉnh. Thay vì học từng thẻ một cách rời rạc, người học nên bắt đầu từ nhu cầu thực tế, xác định loại nội dung cần tạo rồi lựa chọn cấu trúc HTML phù hợp.
Đó cũng là cách để những kiến thức HTML cơ bản có thể phát triển thành kỹ năng xây dựng giao diện và website thực tế: hiểu cấu trúc trước, viết mã có mục đích, kiểm tra kỹ và chỉ sau đó mới tối ưu phần trình bày hoặc bổ sung chức năng.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
