Nội dung chính
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
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:
<p>Đây là ITviec Blog</p> <ul> <li>Việc làm IT</li> <li>Sự nghiệp IT</li> <li>Chuyên môn IT</li> </ul>
Hiển thị:
Thẻ đa phương tiện (Multimedia)
Ngoài các thông tin dạng văn bản thì HTML cũng có hỗ trợ thông tin đa phương tiện khác nhau như hình ảnh, video hay audio,…
Gợi ý các thẻ trong HTML cơ bản để chèn đa phương tiện vào website như sau:
| <area> | Được dùng để xác định một bản đồ ảnh cho phép các hình ảnh bên trong có thể chèn liên kết. |
| <audio> | Tạo một đoạn âm thanh hoặc trình phát nhạc vào trang web. |
| <img> | Chèn hình ảnh vào trang web. |
| <map> | Được sử dụng cùng với <area> để xác định bản đồ ảnh. |
| <track> | Được sử dụng như phần tử con của <audio> và <video>, chèn một phụ đề vào các nội dung đa phương tiện. |
| <source> | Xác định nguồn tài nguyên phù hợp cho các đa phương tiện trên trang web như <audio> hoặc <video> |
| <video> | Chèn các nội dung video cho trang web. |
| <figure> | Thể hiện nội dung độc lập, có thể chèn chú thích tùy chọn bằng phần tử <figcaption>. |
| <figcaption> | Tạo tiêu đề cho nội dung được đặt bên trong phần tử <figure> |
Thẻ liên kết (Links)
Để chèn liên kết vào trang web, bạn có thể sử dụng các thẻ trong HTML sau:
| <a> | Viết tắt của từ “anchor” và được dùng kèm với thuộc tính href (hypertext reference), chèn một liên kết vào trang web. |
| <nav> | Xác định tập hợp của các liên kết. Bạn có thể kết hợp cùng với CSS để tạo thành một thanh menu. |
Ví dụ về cách chèn liên kết trong HTML:
<!DOCTYPE html> <html> <body> <p> <a href="https://itviec.com/blog/html-la-gi/"> Giải đáp “tất tần tật” những điều cần biết về HTML </a> </p> </body> </html>
Hiển thị:
Giải đáp “tất tần tật” những điều cần biết về HTML
Thẻ Programming
Ngoài các nội dung đa phương tiện thông thường thì HTML có thể bao gồm nhiều nội dung khác như nhúng tài liệu hoặc nội dung động sử dụng ngôn ngữ lập trình JavaScript.
Các thẻ trong HTML hỗ trợ các nội dung này như:
| <audio> | Tạo một đoạn âm thanh hoặc trình phát nhạc vào trang web. |
| <embed> | Dùng để nhúng một tệp tài liệu vào trang web. |
| <object> | Đại diện cho các nguồn tài nguyên bên ngoài (hình ảnh) hoặc các tài nguyên được xử lý bởi plugin. |
| <iframe> | Nhúng một trang web khác vào trang hiện tại và có thể tương tác được. |
| <canvas> | Chủ yếu sử dụng JavaScript để tạo ra các nội dung đồ họa. |
| <noscript> | Xác định nội dung HTML sẽ được hiển thị trên trang web nếu trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript. |
| <script> | Được sử dụng với các ngôn ngữ lập trình khác như WebGL, Jason,… |
Xem thêm: JavaScript là g? Học JavaScript cơ bản với lộ trình dễ hiểu nhất
Tham khảo các thẻ trong HTML khác
Bên cạnh các loại thẻ để tạo nên cấu trúc cơ bản của một trang web thì vẫn còn các thẻ trong HTML với nhiều chức năng đa dạng hơn.
Một số các thẻ trong HTML khác như:
| Định dạng nội dung | |
| <address> | Chèn thông tin liên hệ của một hoặc nhiều người hoặc là một tổ chức. |
| <aside> | Đại diện cho một phần của tài liệu có nội dung liên quan gián tiếp đến nội dung chính của trang web. Thường được trình bày dưới dạng sidebars hoặc hộp chú thích. |
| <search> | Đại diện cho một phần chứa tập hợp các biểu mẫu hoặc nội dung liên quan đến thực hiện thao tác tìm kiếm hoặc lọc thông tin. |
| Ngữ nghĩa văn bản | |
| <bdi> | Yêu cầu thuật toán hai chiều của trình duyệt xử lý văn bản, hữu ích với một trang web chèn văn bản động. |
| <cite> | Được sử dụng để đánh dấu tiêu đề của tài liệu tham khảo. Có thể ở dạng viết tắt theo quy ước phù hợp với tài liệu được trích dẫn. |
| <mark> | Được sử dụng để đánh dấu văn bản. |
| <ruby> | Thể hiện các chú thích được hiển thị bên trên, bên dưới hoặc bên cạnh văn bản. Thường được sử dụng để hiển thị cách phát âm của các ký tự Đông Á. |
| <rp> | Được sử dụng dự phòng cho các trình duyệt không hỗ trợ <ruby>. |
| <rt> | Phần tử con của <ruby>, được sử dụng để cung cấp thông tin phát âm, dịch thuật hoặc phiên âm. |
| SVG & MathML | |
| <svg> | Vùng chứa xác định hệ tọa độ và viewport và được sử dụng để làm phần tử của tài liệu SVG. Có thể sử dụng để nhúng SVG bên trong tài liệu HTML. |
| <math> | Phần tử cao cấp trong MathML. Ngoài ra, bạn không được lồng phần tử <math> vào một phần khác. |
| FORM | |
| <form> | Đại diện cho tệp tài liệu chứa các thông tin dạng biểu mẫu và sử dụng để thu thập dữ liệu đầu vào từ người dùng. |
| <label> | Thể hiện chú thích cho một mục trong giao diện người dùng (UI). Đồng thời tăng khả năng truy cập bằng liên kết đến form tương ứng thông qua thuộc tính <for>. |
| <button> | Được dùng để thực hiện một hành động như gửi biểu mẫu hoặc mở hộp thoại. |
| <input> | Được sử dụng khi bạn cần biểu diễn một trường input để có thể nhập dữ liệu vào đó, một số trường thông tin input như họ tên, mật khẩu, số điện thoại,… |
| <datalist> | Chứa một tập hợp các phần tử trong thông tin biểu mẫu. |
| <fieldset> | Sử dụng để nhóm một số <label> trong biểu mẫu của trang web. |
| <select> | Được sử dụng để tạo một danh sách chọn lựa (danh sách thả xuống) và bao gồm thẻ <option> định nghĩa cho các giá trị trong danh sách. |
| <optgroup> | Tạo một nhóm tùy chọn trong phần tử <select> |
| <option> | Được sử dụng để xác định các giá trị có trong phần tử <select>,<optgroup> hoặc <datalist>. |
| <textarea> | Chỉnh sửa văn bản, cho phép người dùng nhập nhiều dòng văn bản tự do như nhận xét về biểu mẫu, đưa ra đánh giá hoặc phản hồi. |
| <var> | Định nghĩa một biến trong phương trình toán học hoặc lập trình máy tính. |
Tổng kết các thẻ trong HTML
Như vậy bài viết đã tổng hợp các thẻ trong HTML cơ bản được sử dụng phổ biến cũng như các thẻ chức năng khác hỗ trợ các developer trong công việc lập trình web. HTML được xem là nền tảng cơ bản của trang web và nắm vững các kiến thức trọng tâm về HTML sẽ giúp các lập trình viên có thêm nhiều cơ hội thăng tiến hoặc tìm được môi trường làm việc phù hợp với bản thân.
Đừng quên theo dõi ITviec để được cập nhật sớm nhất các thông tin hấp dẫn về lĩnh vực công nghệ thông tin bạn nhé!
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!