Tài liệu HTML chạy trực tiếp: Thuộc tính

Q: class và id trong HTML khác nhau thế nào?

Một id phải là duy nhất trên trang và xác định đúng một phần tử, dùng cho link #fragment, và getElementById. Một class có thể dùng chung cho nhiều phần tử, và một phần tử có thể có nhiều class cách nhau bằng dấu cách. Hãy dùng class để định dạng.

Q: Làm sao thêm nhiều class cho một phần tử HTML?

Viết tất cả trong một thuộc tính class, cách nhau bằng dấu cách: . Viết class hai lần sẽ không có tác dụng: trình duyệt chỉ giữ cái đầu tiên.

Q: Tại sao nút của tôi vẫn bị vô hiệu hóa khi viết disabled="false"?

disabled là thuộc tính boolean: chỉ cần có mặt là mang giá trị true, bất kể giá trị ghi gì. Để bật lại phần tử, hãy xóa thuộc tính đó, hoặc đặt button.disabled = false trong JavaScript, lệnh này sẽ xóa thuộc tính.

Q: Tôi có thể tự đặt ra thuộc tính HTML không?

Hãy dùng tiền tố data-: data-price="12" hay data-user-id="7" hợp lệ trên mọi phần tử và đọc được trong JavaScript qua element.dataset. Những tên tự đặt không có tiền tố này là HTML không hợp lệ.

Thuộc tính HTML: cú pháp, class, id, data-* và boolean

Thuộc tính bổ sung thông tin cho một phần tử HTML: link dẫn tới đâu, ảnh hiển thị gì, class CSS nào được áp dụng. Tìm hiểu cú pháp, các thuộc tính toàn cục mà mọi phần tử đều nhận, class và id, thuộc tính boolean và thuộc tính data-*.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Thuộc tính HTML là gì

Thuộc tính (attribute) bổ sung thông tin cho một phần tử (element). Nó nằm bên trong thẻ (tag) mở, viết theo dạng tên, dấu bằng và giá trị trong ngoặc kép: name="value". Một phần tử có thể có bao nhiêu thuộc tính cũng được, cách nhau bằng dấu cách.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href cho link biết cần đi tới đâu, src và alt mô tả ảnh, còn type, placeholder và required cấu hình ô nhập liệu. Mỗi phần tử có bộ thuộc tính riêng, và một số thuộc tính (các thuộc tính toàn cục ở bên dưới) dùng được trên mọi phần tử.

Quy tắc cú pháp

<input type="text" name="city" value="Paris" disabled>

Tên, dấu bằng, giá trị trong ngoặc kép. Ngoặc kép là quy ước chung; ngoặc đơn cũng được (title='Say "hi"' là cách đặt dấu ngoặc kép vào trong một giá trị).
Tên không phân biệt hoa thường. CLASS và class là cùng một thuộc tính. Giá trị thì có phân biệt: class="Box" và class="box" là hai class khác nhau.
Không có dấu cách thì ngoặc kép là tùy chọn, nhưng vẫn nên dùng. class=big box cho phần tử class big và một thuộc tính thứ hai vô nghĩa tên là box.
Thứ tự không quan trọng. <img alt="" src="a.png"> giống hệt <img src="a.png" alt="">.
Mỗi tên chỉ một lần trên một phần tử. Nếu một thuộc tính xuất hiện hai lần, trình duyệt giữ cái đầu và lặng lẽ bỏ cái thứ hai.

Thuộc tính boolean

Một số thuộc tính chỉ có bật hoặc tắt. Với những thuộc tính này, có mặt nghĩa là true, và giá trị bị bỏ qua. disabled, checked, required, readonly, hidden, multiple, autofocus và open đều hoạt động như vậy.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Nút thứ ba vẫn bị vô hiệu hóa dù giá trị ghi là false, vì trình duyệt chỉ kiểm tra xem thuộc tính có mặt hay không. Muốn tắt một thuộc tính boolean, hãy xóa nó. Trong JavaScript, button.disabled = false làm đúng việc đó.

Thuộc tính class

class đặt cho phần tử một hoặc nhiều tên để CSS và JavaScript tìm thấy nó. Nhiều phần tử có thể dùng chung một class, và một phần tử có thể có nhiều class, cách nhau bằng dấu cách:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Mỗi class thêm vào sẽ cộng quy tắc của nó lên trên. Trong CSS, class được chọn bằng dấu chấm (.card); trong JavaScript, element.classList.add('featured') và classList.remove thay đổi chúng. Class là cách thông thường để định dạng: phần lớn CSS bạn viết sẽ nhắm vào class.

Thuộc tính id

id đặt cho phần tử một tên phải duy nhất trên trang. Dùng nó khi bạn cần đúng một phần tử: đích của một link, một <label for>, hoặc document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Nhấn vào nhãn sẽ đưa con trỏ vào ô nhập, vì for="email" trỏ tới id="email". Link cuộn tới #pricing vì phần fragment trong href khớp với id.

	`class`	`id`
Bao nhiêu phần tử dùng chung được	Không giới hạn	Một (duy nhất)
Số giá trị trên một phần tử	Nhiều, cách nhau bằng dấu cách	Một
Bộ chọn CSS	`.name`	`#name`
Cách dùng thường gặp	Định dạng nhóm phần tử	Đích của link, nhãn, một phần tử cụ thể trong JavaScript

Id không được chứa dấu cách. Hãy bắt đầu bằng một chữ cái để dễ dùng trong CSS: #2col không phải bộ chọn CSS hợp lệ nếu không escape.

Thuộc tính toàn cục

Các thuộc tính này dùng được trên mọi phần tử:

Thuộc tính	Tác dụng
`id`	Tên duy nhất của phần tử
`class`	Danh sách tên class, cách nhau bằng dấu cách
`style`	CSS nội tuyến, ví dụ `style="color: red"`
`title`	Chú thích hiện ra khi rê chuột
`lang`	Ngôn ngữ của nội dung, ví dụ `lang="fr"`
`dir`	Hướng văn bản: `ltr`, `rtl` hoặc `auto`
`hidden`	Ẩn phần tử (boolean)
`tabindex`	Cho phần tử nhận focus bằng Tab, hoặc đặt thứ tự focus
`contenteditable`	Cho người dùng sửa chữ của phần tử
`data-*`	Dữ liệu riêng của bạn, đọc bằng JavaScript

Thuộc tính lang có trang riêng vì nó ảnh hưởng tới trình đọc màn hình, dịch tự động và công cụ tìm kiếm.

Thuộc tính data-*

Khi cần lưu giá trị riêng trên một phần tử, hãy thêm tiền tố data- vào tên. Sau tiền tố đặt tên gì cũng được, và JavaScript đọc giá trị qua element.dataset, với dấu gạch nối được đổi sang camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id trở thành dataset.productId. Giá trị luôn trả về dạng chuỗi, nên hãy chuyển bằng Number() trước khi tính toán. CSS cũng chọn được theo chúng: [data-price="4.50"].

Lỗi thường gặp

Viết class hai lần. <div class="a" class="b"> chỉ giữ a. Đặt cả hai vào một thuộc tính: class="a b".
Dùng lại một id. Hai phần tử trùng id làm hỏng #links, nhãn và getElementById, hàm này chỉ trả về phần tử đầu tiên. Dùng class cho những gì lặp lại.
disabled="false" hoặc checked="false". Thuộc tính vẫn có mặt nên vẫn bật. Hãy xóa nó.
Giá trị có dấu cách mà không có ngoặc kép. alt=My photo đặt alt thành My. Hãy đặt mọi giá trị trong ngoặc kép.
Tự đặt thuộc tính không có data-. <div price="4"> là HTML không hợp lệ và có thể trùng với một thuộc tính chuẩn trong tương lai. Hãy dùng data-price.

Câu hỏi thường gặp

Thuộc tính HTML là gì?

Thuộc tính (attribute) là thông tin bổ sung được viết bên trong thẻ mở theo dạng name="value". Nó cấu hình cho phần tử: href cho biết link dẫn tới đâu, src và alt mô tả ảnh, class và id giúp CSS và JavaScript tìm thấy phần tử.

class và id trong HTML khác nhau thế nào?

Một id phải là duy nhất trên trang và xác định đúng một phần tử, dùng cho link #fragment, <label for> và getElementById. Một class có thể dùng chung cho nhiều phần tử, và một phần tử có thể có nhiều class cách nhau bằng dấu cách. Hãy dùng class để định dạng.

Làm sao thêm nhiều class cho một phần tử HTML?

Viết tất cả trong một thuộc tính class, cách nhau bằng dấu cách: <div class="card featured dark">. Viết class hai lần sẽ không có tác dụng: trình duyệt chỉ giữ cái đầu tiên.

Giá trị thuộc tính HTML có cần dấu ngoặc kép không?

Dấu ngoặc kép có thể bỏ khi giá trị không chứa dấu cách hay ký tự đặc biệt, nhưng luôn đặt trong ngoặc kép là thói quen an toàn. class=big box cho phần tử class big cộng thêm một thuộc tính riêng tên là box.

Tại sao nút của tôi vẫn bị vô hiệu hóa khi viết disabled="false"?

disabled là thuộc tính boolean: chỉ cần có mặt là mang giá trị true, bất kể giá trị ghi gì. Để bật lại phần tử, hãy xóa thuộc tính đó, hoặc đặt button.disabled = false trong JavaScript, lệnh này sẽ xóa thuộc tính.

Tôi có thể tự đặt ra thuộc tính HTML không?

Hãy dùng tiền tố data-: data-price="12" hay data-user-id="7" hợp lệ trên mọi phần tử và đọc được trong JavaScript qua element.dataset. Những tên tự đặt không có tiền tố này là HTML không hợp lệ.

Khái niệm liên quan