Trong HTML, “thuộc tính” là các thông tin bổ sung giúp kiểm soát cách hiển thị và hoạt động của các thẻ HTML. Mỗi thuộc tính bao gồm một tên thuộc tính và một giá trị tương ứng, được đặt trong thẻ mở. Chúng giúp xác định đặc điểm như màu sắc, kích thước, liên kết, hình ảnh, hoặc hành vi của phần tử. Một số thuộc tính phổ biến như href trong thẻ <a>, src trong <img>, hay style để tùy chỉnh giao diện. Việc hiểu rõ cách sử dụng thuộc tính sẽ giúp bạn xây dựng trang web chuyên nghiệp và tối ưu hơn. Hãy cùng Y2Graphic tìm hiểu nhé !
Thuộc tính (attribute) là gì?
– Trong ngôn ngữ HTML, thuộc tính có thể tạm hiểu là một loại thông tin nào đó liên quan đến phần tử.
– Mỗi thuộc tính sẽ được đại diện bởi một từ khóa bằng tiếng anh, ví dụ:
- Thuộc tính width dùng để nói đến chiều rộng của phần tử.
- Thuộc tính height dùng để nói đến chiều cao của phần tử.
- Thuộc tính target dùng để nói đến nơi mà tài liệu sẽ được mở khi người dùng nhấp vào liên kết.
- . . . .
Cách khai báo thuộc tính cho phần tử
Khi tạo một phần tử, việc khai báo đầy đủ các thuộc tính sẽ giúp cho trình duyệt hiểu rõ hơn về phần tử mà các bạn mong muốn (ví dụ như khi tạo một cái liên kết, khi chúng ta nhấp vào liên kết thì mặc định tài liệu sẽ được mở trong khung hiện tại, nếu các bạn khai báo cho nó thuộc tính target với giá trị _blank thì trình duyệt sẽ hiểu là các bạn muốn thiết lập khi người dùng nhấp vào liên kết thì tài liệu sẽ được mở bên trong một cái Tab mới)
Để khai báo một thuộc tính nào đó cho phần tử thì chúng ta viết thuộc tính vào bên trong thẻ mở của phần tử dựa theo một trong hai cú pháp như sau:
attribute="value"attribute='value'Ví dụ:
– Tôi thiết lập thuộc tính target với giá trị _blank cho phần tử <a> với mục đích là để trình duyệt hiểu rằng tôi muốn: “khi người dùng nhấp vào liên kết thì tài liệu sẽ được mở bên trong một Tab mới”
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<a href=".." target="_blank">TRANG CHỦ</a>
</body>
</html>– Lưu ý: Một phần tử có thể được thiết lập nhiều thuộc tính HTML.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<img src="../image/cat-2.jpg" width="420" height="250">
</body>
</html>Khi nào thì dùng nháy kép & khi nào thì dùng nháy đơn !?
– Khi chúng ta khai báo một thuộc tính HTML cho phần tử, việc giá trị của thuộc tính được đặt bên trong cặp dấu nháy kép ” “ hay cặp dấu nháy đơn ‘ ‘ đều có ý nghĩa như nhau, cho nên các bạn thích đặt nó bên trong cặp dấu nào thì đặt.
– Tuy nhiên, có hai trường hợp mà các bạn cần phải hết sức lưu ý:
- Nếu giá trị của thuộc tính có chứa ký tự là dấu nháy đơn ‘ thì giá trị đó bắt buộc phải được đặt bên trong cặp dấu nháy kép ” “
- Nếu giá trị của thuộc tính có chứa ký tự là dấu nháy kép ” thì giá trị đó bắt buộc phải được đặt bên trong cặp dấu nháy đơn ‘ ‘
Ví dụ:
– Để thiết lập thuộc tính style với giá trị background-image:url(‘../image/banana.png’) thì chúng ta cần phải đặt giá trị đó bên trong cặp dấu nháy kép, chứ nếu chúng ta đặt nó bên trong cặp dấu nháy đơn thì sẽ bị sai cú pháp (bởi vì giá trị đó có chứa ký tự là dấu nháy đơn)
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<!-- ĐÚNG -->
<div style="background-image:url('../image/banana.png')"></div>
<!-- SAI -->
<div style='background-image:url('../image/banana.png')'></div>
</body>
</html>
