- Các thẻ trong HTML là gì?
- Top 70+ các thẻ trong HTML cơ bản và thông dụng
- Tham khảo các thẻ trong HTML khác
- Tổng kết các thẻ trong HTML
Trong HTML có nhiều loại phần tử và mỗi phần tử đều có công dụng và thuộc tính khác nhau, có phần tử được dùng để chỉ cả một tập tài liệu nhưng cũng có phần tử mô tả các thành phần nhỏ khác. Vậy các thẻ trong HTML có công dụng như thế nào và loại thẻ nào được sử dụng phổ biến trong công việc lập trình?
Đọc bài viết sau đây để hiểu rõ hơn về:
- Tổng hợp 70+ các thẻ trong HTML thông dụng
- Công dụng của các loại thẻ khác trong HTML, ít thông dụng hơn
Tham khảo việc làm HTML mới nhất trên toàn quốc
Các thẻ trong HTML là gì?
Thẻ HTML (HTML tags) là những từ khóa được sử dụng để định dạng cấu trúc khác nhau trên trang web. Cú pháp của một thẻ HTML đều có hai phần được gọi là thẻ mở và thẻ đóng, được đặt trong dấu ngoặc nhọn và có thêm dấu gạch chéo (/) ở nội dung thẻ đóng. Ví dụ, thẻ mở <html> và thẻ đóng </html>.
Hiện nay, các thẻ trong HTML có gần 100 loại thẻ với nhiều công dụng và thuộc tính khác nhau như định dạng bảng, đoạn văn bản, chèn liên kết, hình ảnh, chú thích,…
Đọc thêm: Giải đáp “tất tần tật” những điều cần biết về HTML
Top 70+ các thẻ trong HTML cơ bản và thông dụng
Các loại thẻ cơ bản trong HTML thường được sử dụng trong việc định dạng cấu trúc của trang web. Chẳng hạn như thẻ <a> trong HTML để chèn liên kết, thẻ <div>, <p> để định dạng văn bản,…
Bên cạnh đó cũng có các thẻ trong HTML khác được sử dụng phổ biến như:
Thẻ cơ bản của một cấu trúc HTML
Tệp dữ liệu bao gồm các thông tin về trang web như cấu trúc, style, tiêu đề,… để hiển thị website trên các công cụ tìm kiếm (SEO, Google, Bing,..).
Các thẻ trong HTML cơ bản và quen thuộc để tạo nền tảng cho website như:
| <html> | Đây là thẻ gốc trong tệp dữ liệu và chứa tất cả các loại thẻ khác trong đoạn code (ngoại trừ !DOCTYPE). |
| <base> | Chỉ định URL cơ sở cho tất cả các URL tương đối trong một tài liệu. Và chỉ có thể có một phần tử như vậy trong một tài liệu. |
| <head> | Phần tử con đầu tiên của thẻ <html> và bao gồm các thẻ con khác chứa thông tin về trang web. |
| <style> | Dùng để định dạng các thành phần của website như màu sắc, màu nền, màu viền,… của bất cứ thành phần nào có trong trang HTML. |
| <title> | Thường được sử dụng bên trong thẻ <head> và được dùng để xác định tiêu đề của trang web khi được hiển thị trên trình duyệt. |
| <meta> | Thường được đặt bên trong phần tử <head> và dùng để cung cấp metadata cho trình duyệt và công cụ tìm kiếm. Những thông tin này thường không hiển thị trên website nhưng các trình duyệt hoặc công cụ tìm kiếm có thể hiểu và đọc được. |
| <link> | Đặt trong phần tử <head> và được sử dụng để định nghĩa một liên kết trên trang web với một liên kết bên ngoài trang web. |
| <body> | Được sử dụng như phần tử con thứ hai của thẻ <html> và dùng để chứa các nội dung mà bạn muốn hiển thị lên trang web. |
| <h1> – <h6> | Xác định những tiêu đề chính trong một đoạn văn bản. Các thẻ <h1> đến <h6> có định dạng mặc định là chữ to và in đậm. |
| <hr> | Thường được sử dụng để chèn đường kẻ phân cách nằm ngang và không có thẻ đóng. |
| <p> | Xác định một đoạn văn bản trong <html>. |
| <br> | Được sử dụng để ngắt xuống dòng bởi trong HTML, bạn không thể sử dụng Enter để ngắt xuống dòng như các trình soạn thảo thông thường. |
| <!– –> | Được dùng để chèn một đoạn chú thích và phần này sẽ không được hiển thị trên website. |
Ví dụ về các thẻ trong HTML cơ bản định dạng cấu trúc trang web:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ITviec Blog</title>
</head>
<body>
<!-- 4 heading levels: -->
<h1>Công việc IT</h1>
<h2>Sự nghiệp IT</h2>
<h3>Chuyên môn IT</h3>
<h4>Chuyện IT</h4>
<p>Ý tưởng phát triển sự nghiệp IT của bạn</p>
</body>
</html>Hiển thị:
Thẻ định dạng thành phần web
Các thẻ trong HTMLnày sẽ giúp bạn sắp xếp nội dung trên trang web theo một cấu trúc hợp lý và dễ nhìn hơn.
Bạn có thể sử dụng các phần tử để tạo trước outline cho trang web như header, footer hay heading để xác định các thành phần nội dung chính.
| <header> | Xác định phần đầu của trang web như tiêu đề, thanh tìm kiếm, các trang web con,… |
| <footer> | Xác định phần chân trang của website, nội dung <footer> thường chứa thông tin về trang web, dữ liệu bản quyền hoặc các tài liệu liên quan khác. |
| <main> | Xác định phần thân của trang web, thường chứa những nội dung quan trọng bạn muốn truyền tải đến người dùng. |
| <div> | Thường được sử dụng để làm thùng chứa cho các phần tử khác. |
| <dialog> | Được sử dụng để tạo một hộp thoại, dùng cho các model hỗ trợ tương tác như thông báo, xác nhận hoặc nhập dữ liệu. |
| <article> | Thể hiện thành phần độc lập trong một tài liệu, ứng dụng hoặc là một trang web. Ví dụ như là các bài đăng, blog, bài báo, recap sự kiện,… |
| <section> | Đại diện cho một phần độc lập chung của tài liệu và không có thành phần ngữ nghĩa cụ thể. Các phần trong thẻ <section> thường phải có tiêu đề. |
Thẻ định dạng nội dung văn bản (Text Content)
Các loại thẻ này thường được sử dụng để sắp xếp các khối hoặc phần nội dung của trang web và được đặt giữa cặp thẻ <body>,</body>.
Để định dạng các kiểu chữ (in nghiêng, in đậm, highlight,…) trong HTML như các trình soạn thảo khác, bạn có thể sử dụng các cặp thẻ sau:
| <em> | Nhấn mạnh văn bản quan trọng. |
| <b> | Định dạng chữ in đậm trong đoạn văn bản. |
| <strong> | Cho phép người dùng bôi đậm các ký tự, đoạn văn bản mong muốn.Thẻ này có chức năng định dạng giống với <b> nhưng <strong> được khuyến khích sử dụng nhiều hơn khi bạn muốn đánh dấu các văn bản ở mức độ quan trọng. |
| <i> | Định dạng chữ in nghiêng trong nội dung văn bản. |
| <u> | Định dạng chữ gạch chân trong nội dung văn bản. |
| <abbr> | Được sử dụng để định nghĩa từ viết tắt hoặc tóm tắt một đoạn nội dung nào đó. |
| <blockquote> | Tạo một đoạn trích dẫn từ một website khác. |
| <small> | Định dạng kích thước nhỏ cho văn bản. |
| <code> | Định dạng văn bản mang ý nghĩa là câu lệnh trong lập trình. |
| <pre> | Định dạng nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên hình dạng giống như ở trình soạn thảo. Bên cạnh đó, thẻ còn công dụng giữ nguyên khoảng trắng và xuống dòng trong lập trình. |
| <q> | Dùng để tạo một câu trích dẫn ngắn khi được hiển thị trên trang web. |
| <sub> | Được dùng để định dạng các loại văn bản nằm ở nửa dưới văn bản thông thường. |
| <sup> | Định dạng văn bản có giá trị số mũ, lũy thừa,.. trong toán học hoặc là các văn bản có kích thước nhỏ, thường nằm ở nửa trên văn bản thông thường. |
| <time> | Định dạng những đoạn văn bản có giá trị là ngày tháng, thời gian hoặc các ngày lễ đặc biệt trong năm. |
| <wbr> | Có công dụng gần giống với <br>, được dùng khi chiều rộng của phần tử không đủ để chứa hết từ, sử dụng <wbr> để ngắt xuống dòng. |
| <bdo> | Được sử dụng để đảo ngược thứ tự xuất hiện trên trang web của các ký tự. |
Thẻ định dạng bảng (Table)
Bên cạnh các nội dung được trình bày dưới dạng đoạn văn bản thì bạn cũng có thể sử dụng bảng (Table) để hiển thị các dạng thông tin hoặc dữ liệu lớn được rõ ràng hơn.
Một số các thẻ trong HTML được sử dụng trong định dạng Table HTML là:
| <table> | Thẻ được dùng để xác định dữ liệu bảng, những thông tin bên trong thẻ này sẽ được trình bày trong bảng gồm các hàng và cột chứa dữ liệu. |
| <caption> | Xác định chú thích hoặc tiêu đề của bảng. |
| <colgroup> | Xác định một nhóm các cột trong một bảng. |
| <col> | Phần tử con của <colgroup> và được dùng để xác định thuộc tính cho cột. |
| <thead> | Xác định phần nội dung là tiêu đề của bảng. |
| <tbody> | Xác định phần nội dung chính của bảng. |
| <tfoot> | Xác định các nội dung mang tính tổng kết, tính tổng, thành tiền,… |
| <tr> | Được dùng để xác định một hàng trong bảng (table row). |
| <td> | Phần tử con của <tr> và được dùng để xác định một ô trong bảng dữ liệu. |
| <th> | Phần tử con của <tr> và được dùng để xác định tiêu đề của một nhóm ô trong bảng. |
Thẻ danh sách (List)
Bên cạnh định dạng bảng thì danh sách cũng được nhiều lập trình viên sử dụng để liệt kê thông tin một cách ngắn gọn nhưng vẫn đầy đủ ý nghĩa.
Một số các thẻ trong HTML được sử dụng để định dạng danh sách như:
| <li> | Thẻ được dùng để định dạng thông tin danh sách (list) và là phần tử con của thẻ <ul> và <ol> |
| <ul> | Xác định danh sách không có thứ tự, hay còn gọi là Unordered List |
| <ol> | Được dùng để xác định các loại danh sách có thứ tự rõ ràng (Ordered List) |
| <dl> | Danh sách miêu tả được dùng để hiển thị các thuật ngữ và miêu tả. |
| <dt> | Chỉ định một thuật ngữ trong danh sách mô tả <dl>, thường được theo sau bởi phần tử <dd>. |
| <dd> | Cung cấp mô tả, định nghĩa hoặc giá trị cho thuật ngữ <dt> trong danh sách mô tả. |
Ví dụ về cách sử dụng thẻ tag về thông tin dạng danh sách: