Logo

Tham Khảo Các Thẻ HTML Theo Từng Chức Năng Cơ Bản

Kiến thức Frontend

Tham Khảo Các Thẻ HTML Theo Từng Chức Năng Cơ Bản

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu để xây dựng cấu trúc và nội dung trang web, giúp trình duyệt hiển thị nội dung chính xác.

Dưới đây là danh sách các thẻ HTML phổ biến, được phân loại theo chức năng để bạn dễ dàng tra cứu.

1. Chức năng căn bản

Chức năng Thẻ HTML Mô tả
Tạo đoạn văn bản <p> Định nghĩa một đoạn văn
Tiêu đề (Heading) <h1> → <h6> Tiêu đề từ cấp 1 đến 6
Ngắt dòng <br> Xuống dòng, ngắt dòng
Đường kẻ ngang <hr> Tạo đường phân cách (ngắt đoạn) 
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ Chức năng Căn bản HTML</title>
</head>
<body>

    <!-- Tạo đoạn văn bản -->
    <p>Đây là một đoạn văn bản. HTML cho phép bạn viết nội dung trên trang web dễ dàng.</p>

    <!-- Tiêu đề từ h1 đến h6 -->
    <h1>Tiêu đề H1</h1>
    <h2>Tiêu đề H2</h2>
    <h3>Tiêu đề H3</h3>
    <h4>Tiêu đề H4</h4>
    <h5>Tiêu đề H5</h5>
    <h6>Tiêu đề H6</h6>

    <!-- Ngắt dòng -->
    <p>Đây là dòng thứ nhất.<br>Đây là dòng thứ hai (xuống dòng bằng &lt;br&gt;).</p>

    <!-- Đường kẻ ngang -->
    <p>Đoạn văn trước đường kẻ ngang.</p>
    <hr>
    <p>Đoạn văn sau đường kẻ ngang.</p>

</body>
</html>

2. Định dạng văn bản

Chức năng Thẻ HTML Mô tả
In đậm <strong>, <b> Làm nổi bật văn bản
In nghiêng <em>, <i> Văn bản nhấn mạnh hoặc in nghiêng
Gạch chân <u> Văn bản có gạch chân
Gạch ngang / Xóa <s>, <del> Văn bản gạch ngang hoặc bị xóa
Chỉ số trên <sup> Hiển thị chỉ số trên (x²)
Chỉ số dưới <sub> Hiển thị chỉ số dưới (H₂O)
Hiển thị mã <code> Định dạng văn bản dạng mã
Trích dẫn dài <blockquote> Trích dẫn nội dung

3. Liên kết và điều hướng

Chức năng Thẻ HTML Mô tả
Tạo liên kết <a> Liên kết đến URL hoặc tài liệu khác
Đánh dấu vị trí <a name="..."> Tạo bookmark trong trang

4. Hình ảnh và đa phương tiện

Chức năng Thẻ HTML Mô tả
Hình ảnh <img> Chèn hình ảnh
Âm thanh <audio> Nhúng và phát nhạc/âm thanh
Video <video> Nhúng và phát video
Canvas <canvas> Vẽ đồ họa bằng JavaScript

5. Danh sách

Chức năng Thẻ HTML Mô tả
Danh sách không thứ tự <ul> Danh sách dạng dấu chấm
Danh sách có thứ tự <ol> Danh sách dạng số thứ tự
Mục trong danh sách <li> Một phần tử trong danh sách
Danh sách định nghĩa <dl> Danh sách mô tả định nghĩa
Thuật ngữ định nghĩa <dt> Từ khóa cần định nghĩa
Nội dung định nghĩa <dd> Giải thích cho từ khóa

6. Bảng dữ liệu

Chức năng Thẻ HTML Mô tả
Bảng dữ liệu <table> Tạo bảng
Hàng trong bảng <tr> Một hàng
Ô tiêu đề <th> Ô tiêu đề (header)
Ô dữ liệu <td> Ô dữ liệu
Chân bảng <tfoot> Phần chân bảng
Đầu bảng <thead> Phần đầu bảng
Thân bảng <tbody> Phần thân bảng

7. Biểu mẫu (Form)

Chức năng Thẻ HTML Mô tả
Biểu mẫu <form> Tạo form nhập liệu
Ô nhập dữ liệu <input> Trường nhập liệu
Văn bản nhiều dòng <textarea> Vùng nhập văn bản
Nút bấm <button> Nút bấm thực thi
Nhãn mô tả <label> Nhãn cho input
Danh sách lựa chọn <select> Tạo danh sách chọn
Tùy chọn <option> Mục trong danh sách
Nhóm trường <fieldset> Gom nhóm các trường
Tiêu đề nhóm <legend> Tiêu đề của fieldset

8. Các thẻ hỗ trợ SEO

Chức năng Thẻ HTML Mô tả
Tiêu đề trang <title> Hiển thị tiêu đề trên tab trình duyệt và kết quả tìm kiếm
Mô tả trang <meta name="description"> Cung cấp mô tả ngắn gọn cho trang web
Từ khóa (ít dùng) <meta name="keywords"> Danh sách từ khóa liên quan (hầu như không còn tác dụng với Google)
Định nghĩa ngôn ngữ <html lang="..."> Xác định ngôn ngữ của trang web (giúp SEO quốc tế)
Đường dẫn chuẩn <link rel="canonical"> Chỉ định URL chuẩn, tránh trùng lặp nội dung
Chỉ mục robots <meta name="robots"> Điều khiển việc index, follow của công cụ tìm kiếm
Dữ liệu có cấu trúc <script type="application/ld+json"> Nhúng dữ liệu JSON-LD để hỗ trợ Rich Snippets
Favicon & icon <link rel="icon"> Hiển thị biểu tượng trang web trên tab trình duyệt
Open Graph <meta property="og:..."> Thẻ dùng khi chia sẻ lên mạng xã hội (Facebook, Zalo…)
Twitter Card <meta name="twitter:..."> Thẻ hỗ trợ hiển thị đẹp khi chia sẻ lên Twitter/X

9. Các thẻ khác

Chức năng Thẻ HTML Mô tả
Phân chia bố cục <div> Khối chứa nội dung
Định dạng inline <span> Dùng để định dạng văn bản nhỏ
Metadata trang <meta> Cung cấp thông tin meta
Chèn JavaScript <script> Thêm mã JavaScript
Chèn CSS nội bộ <style> Thêm CSS trong trang
Liên kết CSS ngoài <link> Kết nối với file CSS

Tham khảo thêm

Kết luận

Trên đây là tổng hợp các thẻ HTML thông dụng được phân loại theo nhóm chức năng. Việc nắm vững các thẻ này sẽ giúp bạn xây dựng cấu trúc website rõ ràng, dễ bảo trì và tối ưu hơn.

Phản hồi (0)
0