Trong HTML, thuộc tính (attribute) là các thông tin bổ sung mà bạn có thể thêm vào các thẻ HTML để điều chỉnh hoặc mở rộng chức năng của chúng. Thuộc tính cung cấp thêm thông tin về phần tử hoặc điều khiển cách phần tử hoạt động hoặc được hiển thị.

Cấu Trúc Thuộc Tính#

• Cú pháp: Thuộc tính luôn nằm bên trong thẻ mở của phần tử và được viết theo định dạng tên="giá trị". Nhiều thuộc tính có thể được áp dụng cho cùng một thẻ, và các thuộc tính được phân cách nhau bằng dấu cách.

<thẻ tên="giá trị" thuộc tính2="giá trị2"> <!-- Nội dung --> </thẻ>

Ví Dụ Cơ Bản#

`

Hello, World!

Visit Example.com `

Giải Thích Các Thuộc Tính#

• style: Thẻ: <h1>

  • Mô Tả: Thuộc tính style dùng để áp dụng các kiểu CSS trực tiếp cho phần tử. Ví dụ, style="color: blue;" thay đổi màu chữ của tiêu đề.

• href: Thẻ: <a>

  • Mô Tả: Thuộc tính href xác định URL mà liên kết sẽ dẫn đến. Ví dụ, href="https://www.example.com" chỉ định liên kết đến trang web của Example.com.

• target: Thẻ: <a>

  • Mô Tả: Thuộc tính target xác định nơi mà liên kết sẽ mở. target="_blank" mở liên kết trong một cửa sổ hoặc tab mới.

• src: Thẻ: <img>

  • Mô Tả: Thuộc tính src chỉ định URL của hình ảnh. Ví dụ, src="image.jpg" cho trình duyệt biết nơi để lấy hình ảnh.

• alt: Thẻ: <img>

  • Mô Tả: Thuộc tính alt cung cấp mô tả thay thế cho hình ảnh nếu hình ảnh không thể tải được. Ví dụ, alt="A description of the image" giúp cải thiện khả năng truy cập và SEO.

Một Số Thuộc Tính Thường Gặp#

• id: Xác định một định danh duy nhất cho phần tử. Ví dụ: <div id="main-content">.

• class: Xác định một hoặc nhiều lớp CSS cho phần tử. Ví dụ: <p class="important">.

• name: Đặt tên cho phần tử, thường được sử dụng trong các biểu mẫu. Ví dụ: <input type="text" name="username">.

• value: Đặt giá trị của một phần tử form, như ô input hoặc button. Ví dụ: <input type="text" value="Default Value">.

• placeholder: Cung cấp văn bản gợi ý trong ô input. Ví dụ: <input type="text" placeholder="Enter your name">.

• title: Cung cấp thông tin bổ sung khi người dùng di chuột qua phần tử. Ví dụ: <div title="This is a tooltip">.

Lưu Ý#

• Các thuộc tính có thể bỏ qua: Một số thuộc tính có thể bỏ qua, tức là nếu không được chỉ định, phần tử sẽ sử dụng giá trị mặc định hoặc không có thuộc tính đó.

• Nối nhiều thuộc tính: Bạn có thể nối nhiều thuộc tính vào cùng một phần tử, ví dụ: <input type="text" name="username" placeholder="Enter your name" maxlength="30">.

Ví Dụ Tích Hợp#

`

Welcome to My Website

Visit Example.com

Username:

`

Trong ví dụ trên:

• <h2> có các thuộc tính id, class, và style để định dạng và xác định phần tử.

• <a> có thuộc tính href, target, và title để liên kết và cung cấp thông tin bổ sung.

• <img> có thuộc tính src, alt, width, và height để chèn hình ảnh và định dạng kích thước.

• <input> trong biểu mẫu có các thuộc tính id, name, placeholder, và required để thu thập và xác thực dữ liệu từ người dùng.

Thuộc tính trong HTML cho phép bạn điều chỉnh và tinh chỉnh cách các phần tử được hiển thị và hoạt động, tạo ra các trang web phong phú và tương tác hơn.