Thuộc tính HTML

Trong bài này, chúng ta tìm hiểu các khái niệm về thuộc tính HTML.

Thuộc tính HTML (Attribute)

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

  • Mọi phần tử HTML đều có thể có thuộc tính.
  • Các thuộc tính cung cấp thêm thông tin cho phần tử HTML.
  • Mọi thuộc tính của một phần tử HTML đều được khai báo trong phần mở thẻ, giữa ký tự <tên-thẻ và ký tự >.
  • Thuộc tính thường được khai báo theo cặp : name="value".

Ví dụ : phần tử p có thuộc tính align với giá trị la center thì ta khai báo: <p align="center" >

<html>
    <head>
    	<meta charset="UTF-8">
        <title>Ví dụ về Thuộc tính</title>
    </head>
    <body>
        <p align="center">
              Đoạn văn này được căn giữa trang nhờ vào thuộc tính <b>align</b> có giá trị là <b>center</b>.
        </p>
    </body>
</html>
Ví dụ về thuộc tính align="center"

Các lưu ý khi viết thuộc tính

Luôn sử dụng ký tự viết thường

HTML không phân biệt ký tự hoa thường cho việc khai báo tên thuộc tính, các tên thuộc tính đều có thể viết bằng ký tự hoa hay thường ví dụ thuộc tính title cũng giống như TITLE.

Tuy nhiên, W3C khuyến khích viết thường cho tên thuộc tính, và các văn bản có cấu trúc chặt chẽ hơn như XHTML sẽ yêu cầu tên thuộc tính viết thường.

Chúng ta sẽ luôn sử dụng ký tự thường cho tên thuộc tính.

Luôn sử dụng dấu nháy kép cho giá trị của thuộc tính

HTML không bắt buộc dùng dấu nháy kép để bao giá trị.

Tuy nhiên, W3C Yêu cầu dùng dấu nháy kép để bao giá trị thuộc tính

Ví dụ:

Cách 1:

<a href="http://yesmy.net/language/html-c1"> Truy cập để học HTML </>

Cách 2:

<a href=http://yesmy.net/language/html-c1> Truy cập để học HTML </>

Cả hai cách khai báo thuộc tính href trên đều được, tuy nhiên chúng ta nên dùng cách thứ nhất vì cách thứ hai có thể hiển thị sai kết quả như ví dụ sau:

<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về hiển thị sai <title>
</head>
<body>
<p title=About YesMY>
    Ví dụ này không hiển thị đúng thuộc tính title vì giá trị <b>About YesMy</b> có chứa khoảng trằng và không được bao bởi dấu nháy kép
</p>
</body>
</html>

Chúng  ta sẽ luôn sử dụng nháy kép để bao giá trị của thuộc tính

Dấu nháy kép và dấu nháy đơn

Chúng ta thường sử dụng dấu nháy kép để bao giá trị của thuộc tính HTML, tuy nhiên dấu nháy đơn cũng có thể được sử dụng.

Trong một vài trường hợp, khi giá trị có chứa dấu nháy kép thì ta có thể sử dụng nháy đơn để bao giá trị.

<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Ví dụ về dấu nháy đơn <title>
	</head>
	<body>
		<p title='truy cập "YesMy" nhé'>
    		Giá trị của thuộc tính title có chứa dấu nháy kép thì ta có thể bao bằng dấu nháy đơn
		</p>
	</body>
</html>

 

Một số thuộc tính cơ bản

Thuộc tính href

Thẻ a định nghĩa một siêu liên kết, sử dụng thuộc tính href chỉ định một đường dẫn đến trang mà liên kết chuyển đến

<a href="http://yesmy.net/">Visit YesMy.net </a>

Thuộc tính title

Thuộc tính title dùng để hiển thị thêm thông tin của một phần tử.

Khi ta di chuột lên trên phần tử thì giá trị của thuộc tính title sẽ hiển thị dưới dang tooltip

<p title="Tooltip hiển thị thêm thông tin"> di chuột lên đây sẽ hiển thị tooltip </p>
ví dụ về thuộc tính title

Thuộc tính src

Thẻ <img> dùng để nhúng hình ảnh vào trang HTML thông qua thuộc tính src chỉ định đường dẫn đến hình ảnh

<img src="http://yesmy.net/logos/html-logo-1686836363.svg" />
Ví dụ thuộc tính src

Có hai cách để chỉ định đường dẫn cho thuộc tính src:

  1. Đường dẫn tuyệt đối liên kết bao gồm cả domain vd: src="http://yesmy.net/logos/html-logo-1686836363.svg" dùng cách này có thể liên kết đến một hình ảnh ở trang web khác hoặc subdomain khác.
  2. Đường dẫn tương đối Liên kết không bao gồm domain vd: src="/logos/html-logo-1686836363.svg" đùng để trỏ đến một hình ảnh được lưu trữ trong hệ thông website hiện tại.

 

Thuộc tính alt

Thẻ <img> bắt buộc có thuộc tính alt để chỉ định văn bản thay thế cho hình ảnh, nếu vì lý do nào đó mà hình ảnh khôn hiển thị được thì nội dung giá trị của alt sẽ được hiển thị thay thế

<img src="beautiful.jpg" alt="Cô gái này rất đẹp" />

 

Ví dụ thuộc tính alt

Thuộc tính kích thước width và height

Thuộc tính này thiết lập độ rộng (width) và chiều cao (height) của phần tử, nó có tác động đến các phần tử như: <img />, <hr >, <object >,…

Ví dụ sau định dạng hình ảnh có chiều rộng 60px và chiều cao 80px

<img width="60px" height="80px" src="http://yesmy.net/logos/html-logo-1686836363.svg"  />
Ví dụ về width height

 

« Bài trước Phần tử HTML (element)
Thuộc tính chung toàn cục (global attribulte)
Làm sao để khai báo một giá trị của thuộc tính?

Giá trị của thuộc tính được khai báo liên sau dấu = và không yêu cầu phải bao bằng dấu nháy (đơn hoặc kép). Tuy nhiên nếu giá trị có khoảng trắng thì bắt buộc phải dùng dấu nháy (đơn hoặc kép) để bao giá trị.

Tên thuộc tính HTML có yêu cầu phân biệt ký tự hoa, thường không?

Tên thuộc tính không yêu cầu phân biệt hoa thường, tuy nhiên W3C yêu cầu chỉ sử dụng ký tự viết thường.

Thuộc tính HTML là gì?

Thuộc tính HTML là phần khai báo thêm thông tin cho một phần tử HTML.

Bài mới
Mục lục