HTML Attributes – Thuộc tính trong HTML

Thuộc tính 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ó 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 và giá trị dạng: name = “value”

Thuộc tính href

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

Ví dụ:

<a href="https://duchuyblog.com">This is a link</a>

Xem thử

Bạn sẽ tìm hiểu chi tiết về link và phần tử <a> trong một bài viết thuộc chuỗi bài viết này.

Thuộc tính src

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

Tên tệp của nguồn hình ảnh được chỉ định trong thuộc tính src:

Ví dụ:

<img src="img-girl.jpg">

Xem thử

Chiều rộng và chiều cao

Hình ảnh trong HTML có một tập các thuộc tính kích thước, xác định chiều rộng và chiều cao của hình ảnh:

Ví dụ:

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

Xem thử

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

Bạn sẽ tìm hiểu thêm trong bài viết về hình ảnh trong HTML của chúng tôi .

Thuộc tính alt

Các alt thuộc tính 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ị của thuộc tính có thể được đọc bởi các trình đọc màn hình. Bằng cách này, ai đó “lắng nghe” trang web, ví dụ như một người mù, có thể “nghe” các phần tử.

Ví dụ:

<img src="img-girl.jpg" alt="Girl with a jacket">

Xem thử

Thuộc tính alt cũng hữu ích nếu hình ảnh không tồn tại:

Ví dụ:

Điều gì xảy ra nếu chúng ta cố gắng để hiển thị một hình ảnh không tồn tại:

<img src="img-typo.jpg" alt="Girl with a jacket">

Xem thử

Thuộc tính style

Thuộc tính style được sử dụng để chỉ định kiểu dáng của một phần tử, như màu sắc, phông chữ, kích thước vv

Ví dụ

<p style="color:red">I am a paragraph</p>

Xem thử

Bạn sẽ tìm hiểu thêm về cách tạo kiểu sau trong hướng dẫn này và trong Hướng dẫn CSS của chúng tôi.

Thuộc tính lang

Ngôn ngữ của 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 tuyên bố một ngôn ngữ rất quan trọng cho 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 (Mỹ).

Thuộc tính title

Ở đây, thuộc tính title đượ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ú giải công cụ khi bạn di chuột qua đoạn văn:

Ví dụ:

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

Xem thử

Đề xuất: Sử dụng chữ thường cho thuộc tính title

Lưu ý:

  • 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 TITLE .
  • W3C đề 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.

 

Đôi khi không cần sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị đúng thuộc tính title, bởi vì nó chứa một khoảng trắng:

Ví dụ:

<p title=Đức Huy Blog>

Xem thử

Sử dụng dấu ngoặc kép phổ biến nhất. Bỏ dấu ngoặc kép có thể gây ra lỗi.

Luôn luôn sử dụng dấu ngoặc kép quanh các giá trị thuộc tính.

Ngoặc kép hay ngoặc đơn?

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 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 nháy kép, cần phải sử dụng dấu nháy đơn:

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

Hoặc ngược lại:

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

Tóm lược

  • Tất cả các phần tử HTML có thể có thuộc tính
  • Các tiêu đề thuộc tính cung cấp thêm “tool-tip” thông tin.
  • Các href thuộc tính cung cấp thông tin địa chỉ cho các liên kết
  • Các chiều rộng và chiều cao thuộc tính cung cấp thông tin kích thước cho hình ảnh
  • Các alt thuộc tính cung cấp văn bản cho trình đọc màn hình
  • Chúng tôi luôn sử dụng các tên thuộc tính chữ thường
  • Chúng tôi luôn trích dẫn các giá trị thuộc tính với dấu ngoặc kép

 

Bài cùng chuyên mục
Bình luận bài viết
Loading...