EnglishCác thuộc tính của HTML đóng vai trò quan trọng trong việc cung cấp thông tin bổ sung cho các phần tử HTML và tùy chỉnh cách chúng hiển thị hoặc hoạt động trên trang web. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng các thuộc tính phổ biến như id, class, style, src, và href, giúp bạn dễ dàng tùy chỉnh các phần tử HTML để xây dựng một trang web đẹp mắt và hiệu quả. Hãy cùng tìm hiểu chi tiết trong bài học này!
1. Thuộc tính HTML là gì?
Thuộc tính HTML là các cặp tên-giá trị được sử dụng để bổ sung thông tin cho phần tử. Một thuộc tính thường nằm trong thẻ mở của phần tử và được định nghĩa theo cú pháp:
<tagname attribute="value">Nội dung của phần tử</tagname>tagname: Là tên của thẻ HTML.attribute: Là tên thuộc tính.value: Là giá trị của thuộc tính.
Ví dụ:
<a href="https://codetuthub.com" target="_blank">Truy cập CodeTutHub</a>Trong ví dụ này, phần tử <a> có hai thuộc tính:
href: Xác định liên kết sẽ chuyển đến đâu.target: Định nghĩa nơi sẽ mở liên kết (ở đây là mở trong tab mới với giá trị_blank).
2. Các thuộc tính cơ bản của HTML
a. Thuộc tính href (dùng cho thẻ liên kết <a>)
href là một trong những thuộc tính quan trọng nhất đối với thẻ liên kết <a>. Nó cho biết địa chỉ URL mà người dùng sẽ chuyển đến khi nhấp vào liên kết.
Ví dụ:
<a href="https://codetuthub.com">Xem thêm bài viết</a>Trong ví dụ này, người dùng sẽ được chuyển đến trang https://codetuthub.com khi nhấp vào liên kết.
b. Thuộc tính src (dùng cho thẻ hình ảnh <img>)
src là thuộc tính cho biết nguồn của hình ảnh. Nó xác định đường dẫn tới tệp hình ảnh cần hiển thị.
Ví dụ:
<img src="logo.png" alt="Logo của trang web">src="logo.png": Đây là đường dẫn đến tệp hình ảnh.alt="Logo của trang web": Thuộc tínhaltcung cấp văn bản thay thế nếu hình ảnh không thể tải được.
c. Thuộc tính alt (dùng cho thẻ hình ảnh <img>)
alt là thuộc tính bắt buộc với thẻ <img>, cung cấp văn bản mô tả hình ảnh khi nó không thể hiển thị hoặc giúp các công cụ tìm kiếm hiểu về hình ảnh.
Ví dụ:
<img src="image.jpg" alt="Mô tả về hình ảnh">d. Thuộc tính id
id là thuộc tính giúp định danh duy nhất cho một phần tử trong trang web. Mỗi phần tử chỉ có thể có một id duy nhất trên trang.
Ví dụ:
<h1 id="main-title">Tiêu đề chính</h1>Bạn có thể sử dụng id trong CSS hoặc JavaScript để truy cập và tương tác với phần tử đó.
#main-title {
color: blue;
}e. Thuộc tính class
class được sử dụng để phân nhóm nhiều phần tử thành một class chung, giúp áp dụng cùng một kiểu CSS hoặc xử lý bằng JavaScript.
Ví dụ:
<p class="highlight">Đoạn văn nổi bật</p>
<p class="highlight">Một đoạn văn nổi bật khác</p>Trong CSS, bạn có thể tạo kiểu cho tất cả các phần tử có cùng class:
.highlight {
background-color: yellow;
}f. Thuộc tính style
style là thuộc tính cho phép bạn áp dụng các quy tắc CSS trực tiếp lên phần tử. Đây là cách thêm các kiểu nội tuyến.
Ví dụ:
<p style="color: red; font-size: 20px;">Đoạn văn màu đỏ</p>Tuy nhiên, việc sử dụng style trực tiếp thường không khuyến khích, thay vào đó nên sử dụng CSS ngoài.
g. Thuộc tính target (dùng cho thẻ liên kết <a>)
target xác định nơi mà liên kết sẽ mở. Một số giá trị thường dùng:
_blank: Mở trong tab mới._self: Mở trong tab hiện tại (mặc định).
Ví dụ:
<a href="https://codetuthub.com" target="_blank">Mở trong tab mới</a>h. Thuộc tính placeholder (dùng cho thẻ <input>)
placeholder cung cấp một gợi ý về nội dung người dùng cần nhập vào ô input. Văn bản này sẽ biến mất khi người dùng bắt đầu nhập liệu.
Ví dụ:
<input type="text" placeholder="Nhập tên của bạn">i. Thuộc tính disabled
disabled làm cho một phần tử HTML bị vô hiệu hóa, không cho phép người dùng tương tác với nó. Thuộc tính này có thể dùng với các phần tử như <button>, <input>, và các yếu tố form khác.
Ví dụ:
<input type="text" disabled value="Không thể nhập">
<button disabled>Không thể nhấn</button>j. Thuộc tính title
title cung cấp văn bản mô tả cho phần tử. Khi di chuột vào phần tử, trình duyệt sẽ hiển thị văn bản này dưới dạng tooltip.
Ví dụ:
<p title="Đây là đoạn văn mô tả">Di chuột vào đây để thấy mô tả</p>3. Các thuộc tính sự kiện (Event Attributes)
Các thuộc tính sự kiện được sử dụng để xử lý các tương tác của người dùng với trang web, thường được liên kết với JavaScript.
a. onclick
Thuộc tính onclick được sử dụng để thực hiện một hành động khi người dùng nhấp vào phần tử.
Ví dụ:
<button onclick="alert('Bạn đã nhấn vào nút!')">Nhấn vào đây</button>b. onmouseover
Thuộc tính onmouseover thực hiện một hành động khi người dùng di chuột qua phần tử.
Ví dụ:
<p onmouseover="this.style.color='blue'">Di chuột vào đây để đổi màu</p>4. Cách sử dụng nhiều thuộc tính trên một phần tử
Bạn có thể sử dụng nhiều thuộc tính cùng lúc trên một phần tử để cung cấp nhiều thông tin hơn và định nghĩa hành vi chính xác hơn.
Ví dụ:
<a href="https://codetuthub.com" target="_blank" title="Truy cập CodeTutHub">Truy cập ngay</a>Trong ví dụ này:
hrefđịnh nghĩa đường dẫn liên kết.targetyêu cầu mở liên kết trong tab mới.titlecung cấp tooltip khi di chuột vào liên kết.
5. Các thuộc tính đặc biệt trong HTML5
HTML5 bổ sung thêm một số thuộc tính mới để cải thiện trải nghiệm người dùng và tăng khả năng tương tác với trang web.
a. Thuộc tính data-*
data-* cho phép bạn lưu trữ thông tin tùy chỉnh trên các phần tử HTML. Dữ liệu này có thể được truy xuất bằng JavaScript.
Ví dụ:
<div data-id="123" data-name="product">Sản phẩm 123</div>Bạn có thể truy cập giá trị của thuộc tính này trong JavaScript:
let product = document.querySelector('div');
console.log(product.dataset.id); // Kết quả: 123
console.log(product.dataset.name); // Kết quả: productb. Thuộc tính autofocus
Thuộc tính autofocus tự động đặt con trỏ vào một ô nhập liệu khi trang được tải.
Ví dụ:
<input type="text" autofocus>c. Thuộc tính required
Thuộc tính required bắt buộc người dùng phải nhập liệu vào ô trước khi gửi biểu mẫu.
Ví dụ:
<input type="email" required placeholder="Nhập email của bạn">6. Thuộc tính aria-* cho khả năng truy cập
Thuộc tính aria-* được dùng để cải thiện khả năng truy cập cho người khuyết tật, đặc biệt trong các thiết bị hỗ trợ đọc màn hình.
- aria-label: Cung cấp mô tả ngắn cho các phần tử không có văn bản rõ ràng, như biểu tượng, nút.
<button aria-label="Đóng cửa sổ">×</button>- aria-hidden: Xác định phần tử sẽ bị bỏ qua khi đọc màn hình.
<div aria-hidden="true">Không đọc đoạn này</div>7. Các thuộc tính Global
Các thuộc tính này có thể áp dụng cho hầu hết các phần tử HTML:
- hidden: Ẩn phần tử, không hiển thị trên trang.
<p hidden>Nội dung này bị ẩn</p>- contenteditable: Cho phép người dùng chỉnh sửa nội dung trong phần tử.
<div contenteditable="true">Bạn có thể sửa nội dung này</div>- tabindex: Thiết lập thứ tự của phần tử khi người dùng di chuyển bằng phím Tab.
<input type="text" tabindex="1">8. Kết luận
Các thuộc tính HTML giúp mở rộng và nâng cao khả năng của các phần tử, hỗ trợ việc hiển thị, tương tác và truy cập tốt hơn trên trang web. Việc hiểu và sử dụng đúng các thuộc tính sẽ giúp bạn xây dựng những trang web linh hoạt, dễ sử dụng và đáp ứng nhu cầu người dùng hiệu quả.
