Thuộc tính trong HTML - HTML Attributes

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    27 thg 9, 2022

  • Số lượt xem

    510 lượt xem


Html attributes (thuộc tính) được dùng để bổ sung thông tin cho các HTML Element.

HTML Attributes là gì?

Tất cả các HTML element đều có các attribute.
Các Attribute cung cấp các thông tin bổ sung cho HTML element
Các Attribute luôn luôn được khai báo trong thẻ mở
Các Attribute thường được khai báo như sau: name="value"

Attribute href 

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

Ví dụ:

<a href="https://truonghoclaptrinh.com">Đến truonghoclaptrinh.com</a>

 

Attribute 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ị:

Ví dụ:

<img src="img_girl.jpg">

 

Có hai cách để chỉ định src attribute:

1. Absolute URL (URL tuyệt đối) - Liên kết tới một đường dẫn hình ảnh nằm bên ngoài website trên một đường dẫn khác. Ví dụ: src="https://www.w3schools.com/images/img_girl.jpg".

Lưu ý: Hình ảnh bên ngoài có thể chứa bản quyền. Nếu bạn không có quyền sử dụng nó, bạn có thể vi phạm bản quyền. Mặc khác bạn không thể kiếm soát hình ảnh bên ngoài, nó có thể bị thay đổi hoặc xoá bất cứ lúc nào.

2. Relative URL (URL tương đối) - Liên kết tới một hình ảnh được lưu trữ trên website của bạn. URL sẽ không bao gồm tên miền. Nếu URL mà bắt đầu mà không có dấu gạch chéo, nó sẽ dẫn đến trang hiện tại. Ví dụ: src="img_girl.jpg". Nếu URL bắt đầu với dấu gạch chéo nó sẽ dẫn đến tên miền hiện tại. Ví dụ: src="/images/img_girl.jpg".

Mẹo: Sử dụng đường dẫn tương đối là lựa chọn tốt nhất vì chúng ta không phải lo lắng việc bị thay đổi tên miền. Nó sẽ không bị lỗi nếu bạn thay đổi tên miền.

Attribute width và height

Thẻ <img> nên chứa các attribute widthheight, nó chỉ định chiều dài và chiều rộng của ảnh (đơn vị pixels):

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

 

Attribute alt

Attribute alt là attribute bắt buộc cho thẻ <img> nó sẽ chỉ định cho hình ảnh một đoạn văn bản hiển thị thay thể nếu một cách nào đó mà hình ảnh bị lỗi hoặc không hiển thị được. Điều này có thể do kết nối chậm hoặc lỗi ở src attribute, hoặc có thể người dùng đang ở chế độ screen reader.

Ví dụ:

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

 

Ví dụ

Bạn sẽ thấy điều gì xảy ra nếu hình ảnh bị lỗi:

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

 

Attribute style

Attribute style được dùng để thêm styles cho element, như màu sắc, font chữ, và hơn thế nữa.

Ví dụ:

<p style="color:red;">Đây là một đoạn văn chữ đỏ</p>

 

Attribute lang

Bạn nên cung cấp attribute lang bên trong thẻ <html> để khai báo ngôn ngữ trong website và hỗ trợ cho các công cụ tìm kiếm.

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

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

 

Mã quốc gia có thể được thêm vào trong attribute lang. Vì vậy, hai kí tự đầu sẽ xác định ngôn ngữ được dùng trong website và hai kí tự cuối cùng xác định quốc gia.

Ví dụ chỉ đinh Tiếng Anh làm ngôn ngữ và Hoa Kỳ làm quốc gia:

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

 

Attribute title

Attribute title xác định một số thông tin bổ sung về element.

Giá trị của title attribute sẽ được hiển thị dưới dạng tooltip khi bạn di chuột trên element:

Ví dụ:

<p title="Tôi là tooltip">Đây là văn bản</p>

 

Luôn sử dụng chữ thường cho các Attribute

Mặc định trong HTML không bắt buộc sử dụng chữ thường để đặt tên cho.

Attribute title (và tất cả attribute khác) có thể viết dưới dạng chữ thường title hoặc chữ hoa TITLE.

Tuy nhiên, W3C khuyến nghị nên dùng chữ thường cho các attribute trong HTML, và yêu cầu chữ thường cho các tài liệu chặt chẽ như XHTML

Luôn dùng dấu ngoặc kép cho giá trị Attribute

Mặc định trong HTML không bắt buộc dùng dấu ngoặc kép cho giá trị Attribute.

Tuy nhiên, W3C khuyến nghị dùng dấu ngoặc kép, và yêu cầu dấu ngoặc kép cho các tài liệu chặt chẽ như XHTML.

Nên:

<a href="https://truonghoclaptrinh.com">Đến truonghoclaptrinh.com</a>

 

Không nên:

<a href=https://truonghoclaptrinh.com>Đến truonghoclaptrinh.com</a>

 

Thỉnh thoảng bạn bắt buộc phải sử dụng dấy ngoặc kép. Ví dụ dưới đây sẽ không hiển thị attribute một cách chính xác do có chứa khoảng trắng:

<p title=About truonghoclaptrinh>

 

Sử dụng dấu ngoặc đơn hay dấu ngoặc kép

Dấu ngoặc kép được sử dụng phổ biến hơn trong HTML, tuy vậy dấu ngoặc đơn cũng có thể dùng để thay thế.

Trong một số trường hợp, khi giá trị attribute có chứa dấu ngoặc kép thì việc sử dụng dấu ngoặc đơn là cần thiết:

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

 

Hoặc ngược lại:

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

Tổng số đánh giá: 1

Xếp hạng: 5.0 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.