Phân biệt ID và Class. Thẻ inline và thẻ block

Thuộc tính id trong HTML

Thuộc tính id dùng để đặt tên cho phần tử, tên này phải là duy nhất, không có trường hợp tên id của các phần tử bị trùng nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên id cũng giống như số CMND, nó dùng để xác định danh tính của phần tử)

Để khai báo id cho một phần tử thì chúng ta đặt thuộc tính id vào bên trong thẻ mở của phần tử đó với cú pháp id="tên id". Sau khi đã khai báo, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên id của nó với cú pháp #tên id

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		#step{color:red;}
	</style>
</head>
<body>
	<p>Chức năng của thuộc tính id</p>
	<p id="step">Cách sử dụng thuộc tính id</p>
	<p>Tầm quan trọng của thuộc tính id</p>
</body>
</html>

Thuộc tính class trong HTML

Thật ra thì chức năng của thuộc tính class cũng gần giống với thuộc tính id, đó chính là dùng để đặt tên cho phần tử. Tuy nhiên, việc đặt tên class khác với tên id ở chỗ là với cùng một tên class thì chúng ta có thể dùng để đặt cho nhiều phần tử khác nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên class cũng giống như một cái biệt danh, mà biệt danh thì có thể dùng để đặt cho nhiều người khác nhau)

Để khai báo class cho một phần tử thì chúng ta đặt thuộc tính class vào bên trong thẻ mở của phần tử với cú pháp class="tên class". Sau khi đã khai báo class, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên class của nó với cú pháp .tên class

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		.hello{color:red;}
	</style>
</head>
<body>
	<p>Chức năng của thuộc tính class</p>
	<p class="hello">Tầm quan trọng của thuộc tính class</p>
	<p>Cách sử dụng thuộc tính class</p>
	<p class="hello">Tìm hiểu cách đặt tên cho class</p>
	<p class="hello">Thuộc tính class là gì</p>
</body>
</html>

Lưu ý: Một người có thể có nhiều cái biệt danh thì phần tử cũng tương tự như vậy, một phần tử có thể có nhiều tên class (nhớ thêm một dấu "khoảng trắng" nằm ngăn cách giữa các tên class)

Ví dụ:

- Phần tử <p> thứ nhất có 1 class là: nguyen

- Phần tử <p> thứ hai có 2 class là: nguyen, thanh

- Phần tử <p> thứ ba có 3 class là: nguyen, thanh, nhan

<!DOCTYPE html>
<html>
<head>
	<title>Xem Ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		.nguyen{color:blue;}
		.thanh{font-size:30px;}
		.nhan{background-color:yellow;}
	</style>
</head>
<body>
	<p class="nguyen">Tài liệu học Lập Trình Web 01</p>
	<p class="nguyen thanh">Tài liệu học Lập Trình Web 02</p>
	<p class="nguyen thanh nhan">Tài liệu học Lập Trình Web 03</p>
</body>
</html>

Điểm khác nhau giữa "thuộc tính id" & "thuộc tính class"

Thuộc tính id

- Một phần tử chỉ nên nhận một id.

- Một tên id chỉ có thể dùng để đặt cho một phần tử duy nhất.

- Khi muốn chọn một phần tử dựa theo id thì ta dùng cú pháp #tên id

Thuộc tính class

- Một phần tử có thể nhận một hoặc nhiều class.

- Một tên class có thể dùng để đặt cho nhiều phần tử khác nhau.

- Khi muốn chọn một phần tử dựa theo class thì ta dùng cú pháp .tên class

Lưu ý: Bởi vì "thuộc tính id" & "thuộc tính class" là hai thuộc tính riêng biệt, cho nên với cùng một cái tên thì chúng ta vẫn có thể dùng nó để đặt cho id & class.

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		#hello{background-color:yellow;}
		.hello{font-size:40px;}
	</style>
</head>
<body>
	<p id="hello" class="hello">Tài liệu học Lập Trình Web</p>
</body>
</html>

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung của 2 thẻ p lại nằm ở 2 hàng khác nhau, còn ở 2 thẻ span thì lại nằm trên cùng một hàng? Đó là vì trình duyệt quy định cách hiển thị block và inline. Thẻ nào đang hiển thị kiểu block thì nằm trên một khối riêng biệt, còn thẻ nào hiện thị dạng inline thì nằm trên một hàng.

Thẻ HTML block là gì?

TML block là cách hiển thị của một thẻ HTML trên trình duyệt sẽ ở dạng khối, có độ dài 100% và có chiều cao phụ thuộc vào nội dung nằm bên trong. Điều này có nghĩa rằng tất cả những thẻ HTML nằm phía dưới khi hiển thị lên trình duyệt sẽ nằm ở một hàng khác.

Chúng ta có một số thẻ HTML dạng block như: div, p, header, footer, table, ul, li, section, article.. và nhiều thẻ khác.

Đặc điểm chung của các thẻ này là:

Có chiều dài mặc định là 100%
Có thể thiết lập khoảng trống giữa nội dung và đường viền.
Có thể thay đổi độ rộng bằng thuộc tính width.

<div>Nội dung thẻ div thứ nhất</div>
<div>Nội dung thẻ div thứ hai</div>

Thẻ HTML inline là gì?

HTML inline là cách hiển thị nội dung bên trong của thẻ HTML trong 1 phạm vi xác định. Nghĩa là chiều dài của nó sẽ phụ thuộc vào độ lớn của dữ liệu. Vì vậy, các thẻ inline sẽ hiển thị nối tiếp nhau chứ không xuống hàng như block.

Có rất nhiều thẻ HTML hiển thị dạng inline như: span, strong, i, b, a, br, big, button, textarea, label, ...

Ví dụ: Hai thẻ span sẽ hiển thị dữ liệu liên tiếp nhau, nó không nằm ở 2 hàng như trong ví dụ 1.

<span>Nội dung thẻ span thứ nhất</span>
<span>Nội dung thẻ span thứ hai</span>

Khi nào sử dụng thẻ HTML inline và block?

Việc phân ra hai định dạng như vậy là có lý do cả. Nếu bạn muốn tạo một thẻ HTML bao bọc một khối bên trong thì nên sử dụng thẻ div hoặc thẻ p, bởi vì nó hiển thị dạng block. Còn nếu bạn muốn hiển thị dữ liệu trên một hàng thì hãy sử dụng các thẻ inline.

Câu hỏi đặt ra là liệu ta có thể biến một thẻ block thành thẻ inline không? Rất đơn giản, chỉ cần sử dụng thuộc tính CSS display là được nhé.

Ví dụ: Thiết lập CSS display:inline cho hai thẻ div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
                display: inline
            }
        </style>
    </head>
    <body>
        <div>Nội dung thẻ div inline thứ nhất</div>
        <div>Nội dung thẻ div inline thứ hai</div>
    </body>
</html>

Ngược lại, nếu bạn muốn chuyển từ inline sang block thì sử dụng thuộc tính CSS: display:block.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            span{
                background: yellow;
                display: block
            }
        </style>
    </head>
    <body>
        <span>Nội dung thẻ span block thứ nhất</span>
        <span>Nội dung thẻ span block thứ hai</span>
    </body>
</html>

Như vậy là mình đã hướng dẫn xong cách sử dụng inline và block trong HTML. Sau này khi làm việc với CSS bạn sẽ gặp nó rất nhiều đấy nhé.

PreviousThẻ và thuộc tính thẻ trong html NextCác thẻ khai báo thông tin web cơ bản

Last updated 2 years ago

<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> <style type="text/css"> #step{color:red;} </style> </head> <body> <p>Chức năng của thuộc tính id</p> <p id="step">Cách sử dụng thuộc tính id</p> <p>Tầm quan trọng của thuộc tính id</p> </body> </html>

<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> <style type="text/css"> .hello{color:red;} </style> </head> <body> <p>Chức năng của thuộc tính class</p> <p class="hello">Tầm quan trọng của thuộc tính class</p> <p>Cách sử dụng thuộc tính class</p> <p class="hello">Tìm hiểu cách đặt tên cho class</p> <p class="hello">Thuộc tính class là gì</p> </body> </html>

<!DOCTYPE html> <html> <head> <title>Xem Ví dụ</title> <meta charset="utf-8"> <style type="text/css"> .nguyen{color:blue;} .thanh{font-size:30px;} .nhan{background-color:yellow;} </style> </head> <body> <p class="nguyen">Tài liệu học Lập Trình Web 01</p> <p class="nguyen thanh">Tài liệu học Lập Trình Web 02</p> <p class="nguyen thanh nhan">Tài liệu học Lập Trình Web 03</p> </body> </html>

<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> <style type="text/css"> #hello{background-color:yellow;} .hello{font-size:40px;} </style> </head> <body> <p id="hello" class="hello">Tài liệu học Lập Trình Web</p> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: yellow; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: yellow; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>