Attribute trong HTML là gì? Tìm hiểu về thuộc tính trong HTML

Attribute trong HTML là gì? Nó có nhiệm vụ gì trong HTML. Hãy cùng Mẫu Website 24h tìm hiểu về khái niệm cũng như các Attribute trong HTML để có thể vận dụng nó một cách hợp lý nhé.

Attribute trong HTML là gì?

HTML Attributes là thuộc tính của thẻ HTML, nó bổ trợ các thông tin cho thẻ HTML đó:Attribute trong HTML là gì?

  • Các thẻ HTML đều có thể có các thuộc tính
  • Những thuộc tính cung cấp thông tin bổ sung cho 1 thẻ HTML cụ thể
  • Thuộc tính được chỉ định trong lúc mở thẻ HTML
  • Những thuộc tính thường có các cặp tên / giá trị: name = “value”

Thuộc tính href

Thẻ <a> dùng để biểu diễn đường dẫn đến trang khác từ trang web hiện tại, đích đến của trang web đó được biểu diễn trong thuộc tính href của thẻ a này.

 <a href="https://mauwebsite24h.com"> Mẫuwebsite24h</a> 

Kết quả
Mẫuwebsite24h

Thuộc tính src

Thuộc tính src được sử dụng khá phổ biến trong việc biểu diễn giá trị của file ảnh trong thẻ <img>. Ngoài ra nó cũng được sử dụng cho 1 số thẻ khác như <iframe>, <video>…

<img src="file_hinh_anh.jpg"/>

Các thuộc tính chiều rộng và chiều cao

Thẻ <img> cũng cần chứa các thuộc tính width và height, việc này chỉ định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):

 <img src="file_hinh_anh.jpg" width="500" height="600"> 

Thuộc tính alt

Thuộc tính alt yêu cầu cho thẻ <img> chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh có lý do nào đó không thể hiển thị. Có thể là do kết nối chậm hay lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình.

 <img src="img_girl.jpg" alt="Girl with a cafedev"> 

Thuộc tính phong cách (style)

Thuộc tính style được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước và hơn thế nữa.

 <p style="color:blue;">This is a blue paragraph.</p> 

->This is a blue paragraph.

Thuộc tính lang

Cần đảm bảo rằn, thuộc tính lang bên trong thẻ <html> để khai báo ngôn ngữ của trang Web. Thuộc tính này hỗ trợ công cụ tìm kiếm và trình duyệt.

Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:


<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Mã quốc gia cũng có thể được thêm vào Code ngôn ngữ trong thuộc tính lang. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối xác định quốc gia.

Ví dụ sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia:

 <!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>   

Thuộc tính tiêu đề

Thuộc tính title định nghĩa một số thông tin bổ sung cho một phần tử.

Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải khi bạn di chuột qua phần tử:

 <p title="Mẫu website 24h">This is a paragraph.</p> 

Một số kinh nghiệm

  • Luôn sử dụng các thuộc tính bằng chữ thường

Ví dụ: Không nên ghi là TITLE hãy ghi là title

  • Luôn trích dẫn giá trị thuộc tính

Nên

 <a href="https://cafedev.vn/html/">Visit our HTML tutorial</a> 

Không nên

 <a href=https://cafedev.vn/html/>Visit our HTML tutorial</a> 

Nên dùng dầu nháy đơn hay đôi?

Dấu ngoặc kép xung quanh các giá trị thuộc tính là phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc đơn.

Trong một vài trường hợp, khi chính giá trị thuộc tính chứa dấu ngoặc kép, cần sử dụng dấu ngoặc đơn

Ví dụ:


<p title='John "ShotGun" Nelson'>
 <p title="John 'ShotGun' Nelson">

Lời kết

Bạn đã hiểu Attribute trong HTML là gì hay chưa?. Hi vọng sau bài viết mà Mẫu Website 24h chia sẻ có thể giải đáp được các thắc mắc của các bạn, và có thể sử dụng nó một cách thành công. Mọi thắc mắc hãy liên hệ với chúng tôi- Dịch vụ thiết kế website hàng đầu.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *