Thuộc tính trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Thuộc tính trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Thuộc tính cung cấp thông tin bổ sung về các phần tử trong HTML.

Thuộc tính trong HTML

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

Thuộc tính lang

Ngôn ngữ trong tài liệu có thể được khai báo trong thẻ <html>.

Ngôn ngữ được khai báo với thuộc tính lang.

Việc khai báo một ngôn ngữ rất quan trọng đối với các ứng dụng khả năng truy cập (trình đọc màn hình) và công cụ tìm kiếm:

<!DOCTYPE html>
<html lang=”en-US”>
<body>…</body>
</html>

Hai chữ cái đầu tiên chỉ định ngôn ngữ (en). Nếu có một phương ngữ, hãy sử dụng thêm hai chữ cái (US).

Thuộc tính Tiêu đề

Ở đây, một thuộc tính tiêu đề được thêm vào phần tử <p>. Giá trị của thuộc tính tiêu đề sẽ được hiển thị như một chú thích khi bạn di chuột qua đoạn văn:

Ví dụ

<p title=”Đây là chú thích”>
This is a paragraph.
</p>

Thuộc tính href

Liên kết trong HTML được định nghĩa bằng thẻ <a>. Địa chỉ liên kết được chỉ định bằng thuộc tính href:

<a href=”http://demo.pveser.com/”>This is a link</a>

Trong bài viết này, bạn sẽ được tìm hiểu thêm về liên kết và thẻ <a> trong HTML.

Thuộc tính kích thước

Hình ảnh trong HTML được định nghĩa bằng thẻ <img>.

Tên file ảnh (src) và kích thước của hình ảnh (chiều rộng và chiều cao) được cung cấp dưới dạng các thuộc tính:

<img src=”anhmau.jpg” width=”104″ height=”142″>

Kích thước hình ảnh được xác định bằng pixel: width = “104” có nghĩa là 104 pixel chiều rộng.

Thuộc tính alt

Thuộc tính alt xác định một văn bản thay thế sẽ được sử dụng, khi một hình ảnh không thể được hiển thị. Giá trị này của thuộc tính dùng cho các công cụ tìm kiếm đọc phần hình ảnh trong HTML.

Ví dụ:

<img src=”anhmau.jpg” alt=”fedu” width=”104″ height=”142″>

Sử dụng thuộc tính (viết thường)

Tiêu chuẩn HTML5 không yêu cầu tên thuộc tính chữ thường.

Thuộc tính tiêu đề có thể được viết bằng chữ hoa hoặc chữ thường như tiêu đề hoặc TIÊU ĐỀ.

W3schools đề xuất chữ thường trong HTML và yêu cầu chữ thường cho các loại tài liệu chặt chẽ hơn như XHTML.

Trích dẫn các giá trị thuộc tính

Tiêu chuẩn HTML5 không yêu cầu trích dẫn xung quanh giá trị thuộc tính.

Thuộc tính href được minh họa ở trên có thể được viết như sau:

<a href=http://demo.pveser.com/>

W3C đề xuất trích dẫn trong HTML và yêu cầu trích dẫn các loại tài liệu chặt chẽ hơn như XHTML.

Đôi khi bạn cần phải dùng dấu ngoặc kép. Ví dụ này sẽ không hiển thị đúng thuộc tính tiêu đề vì chứa một khoảng trống:

<p title=Fedu Demo>

Vì thế bạn nên sử dụng dấu ngoặc kép quanh các giá trị thuộc tính.

Dấu ngoặc đơn hay dấu ngoặc kép

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

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

<p title=’John “ShotGun” Nelson’>

Hoặc ngược lại:

<p title=”John ‘ShotGun’ Nelson”>

Tổng kết

  • Tất cả các phần tử HTML có thể có thuộc tính.
  • Thuộc tính title cung cấp thêm thông tin bổ sung.
  • Thuộc tính href cung cấp thông tin địa chỉ cho các liên kết.
  • Thuộc tính widthheight cung cấp thông tin kích thước cho hình ảnh.
  • Thuộc tính alt cung cấp văn bản cho trình đọc màn hình.
  • Bạn nên sử dụng các tên thuộc tính chữ thường.
  • Bạn nên trích dẫn các giá trị thuộc tính với dấu ngoặc kép.

Các thuộc tính trong HTML

Thuộc tính Mô tả
alt chỉ định một văn bản thay thế cho một hình ảnh, khi hình ảnh không thể được hiển thị
disabled chỉ định rằng một phần tử đầu vào phải được vô hiệu hóa
href chỉ định URL (địa chỉ web) cho một liên kết
id chỉ định một id duy nhất cho một phần tử
src chỉ định URL (địa chỉ web) cho một hình ảnh
style chỉ định kiểu CSS cho một phần tử
title chỉ định thêm thông tin về một phần tử (được hiển thị như chú thích)

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: