Bạn muốn thiết kế website chuyên nghiệp nhưng lại bối rối trước hàng loạt thẻ HTML khác nhau? Đừng lo, chỉ cần nắm vững một số thẻ cơ bản, bạn đã có thể tạo nên cấu trúc trang web chuẩn, dễ quản lý và thân thiện với công cụ tìm kiếm. Bài viết này sẽ tổng hợp những thẻ HTML quan trọng nhất, kèm theo hướng dẫn sử dụng chi tiết và ví dụ thực tế.
Thẻ HTML là gì?
Thẻ HTML (hay còn gọi là HTML tags) là các thành phần cơ bản dùng để đánh dấu và phân chia nội dung trên một trang web. Mỗi thẻ giúp trình duyệt hiểu cấu trúc, định dạng và cách hiển thị nội dung, từ văn bản, hình ảnh đến liên kết hoặc bảng biểu. Các html tags thường được đặt trong dấu ngoặc nhọn và có thẻ mở – thẻ đóng để bao bọc nội dung cần hiển thị.
Top 20+ thẻ trong html được dùng phổ biến nhất
Khi bắt đầu học HTML, việc ghi nhớ hàng loạt thẻ có thể khiến bạn bối rối. Tuy nhiên, chỉ một số thẻ được sử dụng thường xuyên trong hầu hết các dự án web. Phần nội dung này sẽ giúp bạn tổng hợp 20+ thẻ HTML phổ biến nhất, giải thích ngắn gọn công dụng và cách sử dụng từng thẻ, từ đó giúp bạn làm chủ cấu trúc website dễ dàng hơn.
Thẻ <html>
Thẻ <html> bao quanh toàn bộ nội dung HTML của trang web. Đây là phần tử gốc, bắt buộc có trong mọi tài liệu HTML. Bạn nên thêm thuộc tính lang=”vi” để hỗ trợ SEO và giúp trình duyệt xác định đúng ngôn ngữ. Ví dụ:
<html lang=”vi”>
…
</html>
Thẻ <!DOCTYPE html>
Thẻ <!DOCTYPE html> khai báo rằng tài liệu đang sử dụng chuẩn HTML5, giúp trình duyệt hiển thị trang chính xác. Thẻ này không hiển thị trên giao diện người dùng và luôn phải đặt ở dòng đầu tiên của mã HTML. Để tối ưu, bạn chỉ cần viết đúng cú pháp như sau:
<!DOCTYPE html>
Thẻ <meta charset=”UTF-8″>
Thẻ này xác định bộ mã ký tự là UTF-8, giúp hiển thị đúng tiếng Việt và ký tự đặc biệt. Luôn đặt thẻ này ở đầu phần <head> để tránh lỗi hiển thị. Ví dụ:
<meta charset=”UTF-8″>
Thẻ html <body>
Thẻ <body> chứa toàn bộ nội dung người dùng nhìn thấy như văn bản, ảnh, liên kết. Để tối ưu, bạn nên chia nội dung hợp lý bằng thẻ div, section và dùng semantic tag như header, footer. Ví dụ:
<body>
<h1>Chào mừng!</h1>
</body>
Thẻ Heading <h1>-<6>
Các thẻ tiêu đề từ <h1> đến <h6> dùng phân cấp nội dung. <h1> là tiêu đề chính, chỉ nên dùng một lần mỗi trang. Các tiêu đề nhỏ hơn hỗ trợ sắp xếp nội dung rõ ràng, tốt cho SEO. Ví dụ:
<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>
Thẻ html <p>
Thẻ <p> tạo đoạn văn, giúp trình bày nội dung mạch lạc. Không nên lạm dụng thẻ <br> thay cho <p>. Ngoài ra, bạn có thể kết hợp với CSS để điều chỉnh cách hiển thị đoạn văn. Ví dụ:
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>
Thẻ <a href=”…”>
Thẻ <a> tạo liên kết đến trang khác hoặc trong cùng trang. Sử dụng từ khóa rõ ràng làm anchor text giúp cải thiện SEO. Khi mở liên kết mới, nên thêm target=”_blank” và rel=”noopener”. Ví dụ:
<a href=”https://example.com” target=”_blank” rel=”noopener”>Truy cập trang</a>
Thẻ <img src=”…” alt=”…”>
Thẻ <img> chèn hình ảnh và sử dụng thuộc tính alt để mô tả nội dung ảnh, hỗ trợ SEO và truy cập. Đặt tên file ảnh rõ ràng, tối ưu dung lượng để tăng tốc tải trang. Ví dụ:
<img src=”logo.png” alt=”Logo trang web”>
Thẻ <ul> và <ol>
Thẻ <ul> tạo danh sách không thứ tự (bullet), còn <ol> tạo danh sách có thứ tự (số thứ tự). Mỗi mục trong danh sách dùng thẻ <li>. Việc dùng danh sách giúp nội dung rõ ràng, dễ đọc và hỗ trợ SEO tốt hơn. Ví dụ:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>Bước 1</li>
<li>Bước 2</li>
</ol>
Thẻ <title>
Thẻ <title> hiển thị tiêu đề trang trên tab trình duyệt và trong kết quả tìm kiếm Google. Đây là yếu tố SEO quan trọng, nên viết dưới 60 ký tự và chứa từ khóa chính. Ví dụ:
<title>Trang chủ</title>
Thẻ html <div>
Thẻ <div> chia khối nội dung, không mang ý nghĩa ngữ nghĩa nhưng rất hữu ích trong bố cục và thiết kế giao diện. Thường được kết hợp với CSS để định dạng hoặc sắp xếp nội dung. Ví dụ:
<div class=”khung”>
<p>Nội dung bên trong div</p>
</div>
Thẻ <span>
Thẻ <span> đánh dấu đoạn nội dung nhỏ trong dòng, thường dùng để áp dụng định dạng riêng qua CSS. Không tạo dòng mới như <div>. Ví dụ:
<p>Tôi thích <span style=”color:red”>màu đỏ</span>.</p>
Thẻ HTML <br>
Thẻ <br> tạo ngắt dòng, thường dùng khi cần xuống dòng trong văn bản ngắn. Không nên lạm dụng thay cho <p>. Ví dụ:
<p>Dòng đầu<br>Dòng tiếp theo</p>
Thẻ <strong> và <em>
Thẻ <strong> làm chữ in đậm, thể hiện nội dung quan trọng; còn <em> làm chữ nghiêng, nhấn mạnh ý nghĩa. Cả hai đều hỗ trợ SEO vì cung cấp ý nghĩa ngữ nghĩa cho từ khóa. Ví dụ:
<p><strong>Lưu ý:</strong> Đây là nội dung quan trọng.</p>
<p><em>Chú ý:</em> Đây là nội dung cần nhấn mạnh.</p>
Thẻ HTML <input>
Thẻ <input> tạo trường nhập dữ liệu như văn bản, mật khẩu, checkbox. Dùng trong form để thu thập thông tin người dùng. Có nhiều loại: text, email, checkbox, v.v. Ví dụ:
<input type=”text” placeholder=”Nhập tên”>
Thẻ <input>
Thẻ <input> tạo trường nhập dữ liệu như văn bản, mật khẩu, checkbox. Dùng trong form để thu thập thông tin người dùng. Có nhiều loại: text, email, checkbox, v.v. Ví dụ:
<input type=”text” placeholder=”Nhập tên”>
Thẻ website html <form>
Thẻ <form> bao bọc các trường nhập liệu để gửi dữ liệu đến máy chủ. Cần thuộc tính action và method. Việc dùng form đúng cách giúp thu thập thông tin hiệu quả. Ví dụ:
<form action=”/submit” method=”post”>
<input type=”text” name=”ten”>
</form>
Thẻ <button> cho website
Thẻ <button> tạo nút bấm, có thể dùng để gửi form hoặc thực hiện hành động qua JavaScript. Có thể chứa văn bản hoặc biểu tượng. Ví dụ:
<button type=”submit”>Gửi</button>
Thẻ <table>
Thẻ <table> tạo bảng dữ liệu, kết hợp với <tr>, <th>, <td> để tổ chức hàng và cột. Bảng giúp trình bày dữ liệu rõ ràng, dễ hiểu. Ví dụ:
<table>
<tr><th>Tên</th><th>Tuổi</th></tr>
<tr><td>Lan</td><td>25</td></tr>
</table>
Thẻ HTML Tags <iframe>
Thẻ <iframe> nhúng trang web khác hoặc video (như YouTube) vào trang hiện tại. Dùng thuộc tính src để chỉ nguồn. Nên kiểm soát chiều rộng, chiều cao và bảo mật nội dung nhúng. Ví dụ:
<iframe src=”https://example.com” width=”600″ height=”400″></iframe>
Việc nắm vững các thẻ HTML cơ bản là bước đầu tiên quan trọng giúp bạn xây dựng nền tảng vững chắc trong thiết kế và phát triển web. Khi hiểu rõ chức năng, cách hiển thị và cách tối ưu từng thẻ, bạn không chỉ viết mã sạch và dễ bảo trì hơn mà còn cải thiện đáng kể hiệu suất website và trải nghiệm người dùng. Dù HTML rất phong phú với hàng trăm thẻ khác nhau, chỉ cần sử dụng đúng và hiệu quả các thẻ cơ bản đã đủ để bạn tạo nên những trang web chuyên nghiệp, chuẩn SEO và thân thiện với trình duyệt.
