Hướng Dẫn Cách Dùng Thuộc Tính ID Và Thuộc Tính CLASS Trong HTML

5/5 - (2 đánh giá)

Khi học HTML thì bạn không thể không quan tâm tới việc sử dụng các thuộc tính. Trong bài viết trước đây mình đã giới thiệu và hướng dẫn các bạn cách dùng 1 thuộc tính rất thường xuyên được sử dụng đó là thuộc tính STYLE trong HTML. Nhưng đó không phải thuộc tính duy nhất bạn hay sử dụng, khi làm web với HTML còn có thuộc tính ID và thuộc tính CLASS hầu như rất thường xuyên được sử dụng, theo mình thấy thì 2 thuộc tính này còn dùng nhiều hơn cả thuộc tính STYLE. Hai thuộc tính này giúp bạn xác định được chính xác đối tượng nào đó để có thể thiết lập CSS cho nó hoặc cao siêu hơn thì sẽ dùng để kết hợp với JS.

Để bạn hiểu rõ hơn về tác dụng và chức năng của thuộc tính ID và thuộc tính CLASS trong HTML chúng ta sẽ cùng đi tìm hiểu ở dưới đây.

Thuộc tính ID trong HTML

Thuộc tính ID dùng để đặt tên cho 1 phần tử HTML nào đó. Mỗi phần tử chỉ có 1 ID duy nhất và để khai báo ID trong HTML bạn sử dụng cú pháp như sau: id=”ten-id”

Ví dụ

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #thuoc-tinh-id {
            background-color: red;
            color: black;
            font-size: 15px;
        }
        #thuoc-tinh-class {
            background-color: blue;
            color: #fff;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id="thuoc-tinh-id">Thuộc tính ID</p>
    <p id="thuoc-tinh-class">Thuộc tính CLASS</p>
</body>
</html>

Như bạn thấy trong ví dụ trên có 2 thẻ <p> và để phân biệt chúng thì ta sẽ gán thêm thuộc tính ID cho từng phần tử. Khi khai báo trong HTML thì chúng ta có 2 thuộc tính ID là id=”thuoc-tinh-id” và id=”thuoc-tinh-class”. Còn khi khai báo trong CSS thì chúng ta sẽ sử dụng cú pháp #ten-id. Về phần CSS này thì mình sẽ nói rõ hơn trong series học CSS cơ bản.

Lưu ý

Chỉ được phép sử dụng các chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( – ) để đặt tên cho ID.
Tên ID không nên bắt đầu bằng chữ số vì nó sẽ không hoạt động trên một số trình duyệt.

Tham khảo thêm

Thuộc tính CLASS trong HTML

Thuộc tính CLASS dùng để đặt tên cho 1 hoặc nhiều phần tử HTML khi bạn muốn chúng có cùng định dạng. Thông thường sẽ sử dụng cho nhiều phần tử HTML chứ nếu có 1 phần tử thì không nên lạm dụng thuộc tính CLASS. Ngoài ra, 1 phần tử có thể sử dụng nhiều class và mỗi class cách nhau bằng 1 khoảng trống (khoảng cách). Để khai báo class trong HTML chúng ta dùng cú pháp: class=”ten-class”

Ví dụ

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
		.id {
			background: #50e5fc;
			padding: 10px;
		}
		.class {
			border: 2px solid #78b43d;
			font-size: 12px;
		}
		.thuoc-tinh-id {
			background-color: red;
			color: black;
			font-size: 15px;
		}
		.thuoc-tinh-class {
			background-color: blue;
			color: #fff;
			font-size: 30px;
		}
    </style>
</head>
<body>
<div class="id class">
	<p class="thuoc-tinh-id">Thuộc tính ID</p>
	<p class="thuoc-tinh-class">Thuộc tính CLASS</p>
	<p class="thuoc-tinh-id">Thuộc tính ID</p>
	<p class="thuoc-tinh-class">Thuộc tính CLASS</p>
</div>
</body>
</html>

Trong ví dụ trên, bạn có thể thấy 1 class chúng ta dùng cho 2 phần tử hoặc có thể nhiều hơn tùy ý. Và 1 phần tử chúng ta có thể sử dụng 2 class hoặc nhiều hơn. Ở đây bạn có thể thấy thẻ <div> mình dùng 2 class là class=”id class”. Ngoài ra, khi khai báo class trong CSS chúng ta dùng cú pháp .ten-class. Để tìm hiểu rõ hơn bạn có thể xem trong series học CSS cơ bản nhé.

Lưu ý

Chỉ được phép sử dụng các chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( – ) để đặt tên cho CLASS.
Tên CLASS không nên bắt đầu bằng chữ số vì nó sẽ không hoạt động trên một số trình duyệt.

Lời kết

Trên đây là tất cả những gì mình muốn nói về thuộc tính ID và thuộc tính CLASS trong HTML. Hi vọng với những kiến thức mình chia sẻ sẽ giúp bạn biết cách sử dụng thuộc tính ID và CLASS sao cho phù hợp khi thiết kế web với HTML.

Cảm ơn bạn đã ghé qua blog của Hùng. Nếu thấy bài viết hay và có ý nghĩa thì like và share ủng hộ cho mình nhé. Ngoài ra bạn có thể đọc thêm các bài viết khác trong series học HTML để học thêm nhiều kiến thức về HTML hơn nhé. Chúc bạn thành công!