HTML Attributes

Chúng ta đã tìm hiểu thuộc tính của thẻ HTML ở trong bài viết HTML Tags.
Trong bài viết này sẽ nói về một số thuộc tính cơ bản của một số thẻ HTML
Cần tóm tắt lại một số vấn đề thuộc tính:
- Thuộc tính của thẻ luôn viết ở trong thẻ mở
- Một thuộc tính thường gồm một cặp tên và giá trị. Một số thuộc tính không cần viết giá trị.
- Tên thẻ và tên thuộc tính, giá trị thuộc tính thường sẽ viết chữ thường
- Một thẻ có thể áp dụng nhiều thuộc tính, tuy nhiên các thuộc tính sẽ phải cách nhau bởi dấu cách

Cú pháp viết thuộc tính:

<element attribute_name="value">content</element>

Thuộc tính title trong thẻ HTML

Thuộc tính title có thể áp dụng cho hầu hết các thẻ HTML. Khi bạn viết thuộc tính title trong thẻ HTML thì khi hiển thị bạn đưa chuột lên thẻ sẽ hiển thị nội dung title.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
	<h1 align="center" title="Học HTML ở SNVN">Hello SNVN.net</h1>
 	<h2 title="Happy">Happy new year 2021</h2>
 	<p title="Happy">Chúc mừng năm mới 2021</p>
</body>
</html>

Chạy thử code

Bạn chạy thử code trên và đưa chuột lên từng nội dung để xem kết quả nhé.

Thuộc tính src

Thuộc tính này dùng để chỉ ra đường dẫn của 1 file nào đó cần nhúng vào trang web. Thường áp dụng với thẻ chèn ảnh <img> hoặc thẻ <script>...

Ví dụ code chèn ảnh vào trang web

<img src="https://zezo.dev/uploads/html/html5.png" />

Kết quả hiển thị ảnh:

Thuộc tính href

Thuộc tính này cũng dùng để chỉ ra đường dẫn liên kết tới 1 file hoặc một trang web. Thuộc tính này áp dụng cho thẻ chèn liên kết <a> hoặc thẻ nhúng css <link>

Ví dụ

<a href="https://zezo.dev">Xem SNVN</a>
<a href="https://zezo.dev/uploads/html/html5.png">Xem ảnh</a>

Kết quả hiển thị:

Xem SNVN

Xem ảnh

hoặc

 <link href="https://zezo.dev/themes/spx/font-awesome/css/font-awesome.min.css" rel="stylesheet">

Nên sử dụng ký tự dấu nháy kép " hoặc đơn ' để bao gói giá trị thuộc tính?

Khi viết giá trị thuộc tính thì phải được bao gói trong cặp nháy kép để giới hạn phạm vi giá trị của 1 thuộc tính. Tuy nhiên bạn có thể sử dụng nháy đơn cũng được. Thông thường thì nên để ký tự nháy kép bao gói giá trị thuộc tính thẻ HTML.

<a href="https://zezo.dev">Xem SNVN</a>
<a href='https://zezo.dev/uploads/html/html5.png'>Xem ảnh</a>

Ở trong ví dụ trên thì đều hoạt động như nhau, nhưng sau này sẽ có tình huống nhúng thêm nhiều mã lệnh trong thuộc tính phải dùng đến ký tự đó thì bạn nên dùng dấu nháy kép " để bao gói giá trị thuộc tính.