Bài 4: HTML Attributes | Thuộc tính HTML là gì?

html

Table of Contents

Các thuộc tính HTML (HTML Attributes) cung cấp thông tin bổ sung về các phần tử HTML.

Thuộc tính HTML

  • Tất cả các phần tử HTML có thể có các thuộc tính
  • Các thuộc tính cung cấp thêm thông tin về các phần tử
  • Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
  • Các thuộc tính thường đi theo cặp tên/giá trị như: name=”value”

Thuộc tính href

Thẻ <a> xác định một siêu liên kết. Thuộc tính href chỉ định URL của trang mà liên kết chuyển đến:

				
					<a href="https://www.w3schools.com">Đến trang W3Schools</a>

				
			

Thuộc tính src

Thẻ <img> được sử dụng để nhúng hình ảnh vào trang HTML. Thuộc tính src chỉ định đường dẫn đến hình ảnh sẽ được hiển thị:

				
					<img decoding="async" src="vi-du.jpg">

				
			

Có hai cách để chỉ định URL trong thuộc tính src:

1. URL tuyệt đối – Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src=”https://www.w3schools.com/images/img_girl.jpg”.
Lưu ý: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.
2. URL tương đối – Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src=”img_girl.jpg”. Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến tên miền. Ví dụ: src=”/images/img_girl.jpg”.
Mẹo: Hầu như luôn luôn tốt nhất khi sử dụng các URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi tên miền.

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

Thẻ <img> cũng phải chứa các thuộc tính chiều rộng và chiều cao, xác định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):

				
					<img loading="lazy" decoding="async" src="vi-du.jpg" width="500" height="600">
				
			

Thuộc tính thay thế (alt)

Thuộc tính alt bắt buộc cho thẻ <img> chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiển thị vì lý do nào đó. Điều này có thể là do kết nối chậm hoặc 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 decoding="async" src="vi_du.jpg" alt="Mo ta hinh anh Vi du">

				
			

Thuộc tính style

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

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

				
			

Thuộc tính lang

Bạn phải luôn bao gồm thuộc tính lang bên trong thẻ <html> để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các 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 mã 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 cùng 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 title

Thuộc tính tiêu đề xác định một số thông tin bổ sung về một phần tử.
Giá trị của thuộc tính tiêu đề sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua phần tử:

				
					<p title="I'm a tooltip">This is a paragraph.</p>

				
			

Hệ thống Website:

  • WePage: Nền tảng thiết kế website chuyên nghiệp.
  • WeHost: Nhà cung cấp Hosting, VPS, máy chủ uy tín.
  • WeSoft: Hệ sinh thái phần mềm chuyển đổi số toàn diện.
  • WeTech Software: Nhà phát triển phần mềm dành cho thị trường quốc tế.
  • WeTech Smart Cloud: Giải pháp điện toán đám mây toàn cầu theo tiêu chuẩn quốc tế.
  • SuperAds VietnamChuyên Gia Quảng Cáo

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 *