Web Cơ Bản

Tìm hiểu khái niệm "phần tử" trong HTML

1) Phần tử là gì !?

- Trong trang web, thông thường thì bất kỳ một nội dung gì cũng có thể được xem là phần tử.

- Ví dụ như trong trang web nằm bên dưới: đoạn văn bản là một phần tử, trình phát audio là một phần tử, tấm hình là một phần tử, . . . .

- Một phần tử HTML thường được xác định dựa trên ba thành phần:

  1. Thẻ mở
  2. Nội dung nằm bên trong cặp thẻ (hay còn được gọi là nội dung của phần tử)
  3. Thẻ đóng

- Tuy nhiên, có một số trường hợp đặc biệt mà phần tử chỉ có một thành phần duy nhất chính là thẻ mở, những phần tử này được gọi là phần tử rỗng.

Ví dụ:

- Tôi có một đoạn mã như bên dưới.

<p>Tài liệu hướng dẫn học Lập Trình Web</p>
<u>Từ cơ bản đến nâng cao</u>
<br>
<hr>

- Trong đó:

<p>Tài liệu hướng dẫn học Lập Trình Web</p> là một phần tử, nó có:

  • Thẻ mở là: <p>
  • Nội dung là: Tài liệu hướng dẫn học Lập Trình Web
  • Thẻ đóng là: </p>

<u>Từ cơ bản đến nâng cao</u> là một phần tử, nó có:

  • Thẻ mở là: <u>
  • Nội dung là: Từ cơ bản đến nâng cao
  • Thẻ đóng là: </u>

<br> là một phần tử rỗng

<hr> là một phần tử rỗng

- Lưu ý: Một phần tử thường được gọi dựa theo tên thẻ của nó, ví dụ như bốn phần tử ở phía trên sẽ được gọi lần lượt là: phần tử <p>, phần tử <u>, phần tử <br>, phần tử <hr>

2) Phần tử lồng nhau

- Thông thường, một phần tử có thể được lồng vào bên trong "phần nội dung" của một phần tử khác.

- Trong đó:

  • Phần tử mà nội dung của nó có chứa phần tử khác thì được gọi là phần tử cha.
  • Phần tử được lồng vào bên trong nội dung của phần tử khác thì được gọi là phần tử con.
Ví dụ:
<html>
	<body>
		<h1>Tài liệu HTML</h1>
		<p>Tài liệu CSS</p>
	</body>
</html>

- Với một đoạn mã giống như phía trên thì chúng ta có tất cả là bốn phần tử:

Phần tử HTML Thẻ mở Nội dung của phần tử Thẻ đóng
<html> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> </html> <html> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> </html>
<body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body>
<h1>Tài liệu HTML</h1> <h1> Tài liệu HTML </h1>
<p>Tài liệu CSS</p> <p> Tài liệu CSS </p>

- Dưới đây là bảng mô tả phần tử cha & phần tử con của bốn phần tử trên:

Phần tử HTML Phần tử cha Phần tử con
<html> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> </html> không có <body>
<body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> <html> <h1>
<p>
<h1>Tài liệu HTML</h1> <body> không có
<p>Tài liệu CSS</p> <body> không có

3) Một số vấn đề cần lưu ý

- Trong một tập tin HTML, nếu chúng ta soạn thảo mã sai quy tắc thì khi chạy tập tin - các phần tử sẽ hiển thị không được chính xác như mong đợi. Cho nên, các bạn cần phải hết sức lưu ý đến vấn đề cú pháp để tránh mắc phải những lỗi không đáng có.

3.1) Đừng bao giờ quên thẻ đóng

- Ngoại trừ các phần tử rỗng, những phần tử còn lại tuyệt đối không được thiếu thẻ đóng, việc thiếu thẻ đóng sẽ gây ảnh hưởng nghiêm trọng đến các phần tử khác, nó sẽ khiến những phần tử khác bị xem là nội dung của phần tử thiếu thẻ đóng.

Ví dụ:

- Phần tử <h1> thiếu thẻ đóng, nó khiến các phần tử bên dưới bị xem là nội dung của nó.

<!DOCTYPE html>
<html>
	<head>
		<title>Xem ví dụ</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Tài liệu học HTML
		<p>Tài liệu học CSS<p>
		<p>Tài liệu học JavaScript<p>
	</body>
</html>
Xem ví dụ

3.2) Không được xáo trộn thứ tự giữa các thẻ đóng

- Các bạn tuyệt đối không được xáo trộn thứ tự giữa các thẻ đóng, việc xáo trộn thứ tự giữa các thẻ đóng cũng gây ảnh hưởng gần giống như việc thiếu thẻ đóng.

Đúng

<div><p>Tài liệu học lập trình web</p></div>
Sai

<div><p>Tài liệu học lập trình web</div></p>

3.3) Trình bày mã lệnh

- Trong ngôn ngữ HTML, vấn đề khoảng trắng & ngắt xuống dòng giữa các thẻ là không quan trọng.

- Ví dụ: Ba đoạn mã bên dưới có cách viết khác nhau, nhưng khi thực thi lại hiển thị giống nhau:

<html>
<head>
<title>Khái niệm phần tử trong HTML</title>
</head>
<body>
<h1>Tài liệu hướng dẫn học HTML</h1>
<h2>Tài liệu hướng dẫn học CSS</h2>
<p>Tài liệu <u>hướng dẫn học</u> JavaScript</p>
</body>
</html>
<html><head><title>Khái niệm phần tử trong HTML</title></head><body><h1>Tài liệu hướng dẫn học HTML</h1><h2>Tài liệu hướng dẫn học CSS</h2><p>Tài liệu <u>hướng dẫn học</u> JavaScript</p></body></html>
<html>    <head>   <title>Khái niệm phần tử trong HTML</title>
</head>
      <body>
<h1>Tài liệu hướng dẫn học HTML</h1><h2>Tài liệu hướng dẫn học CSS</h2>

                <p>Tài liệu <u>hướng dẫn học</u> JavaScript</p>
</body></html>

- Tuy nhiên, chúng ta không nên trình bày mã lệnh một cách ngẫu hứng mà tốt nhất là phải tuân theo một tiêu chuẩn chung để đảm bảo tối ưu hóa việc viết mã lệnh, phần tử con cần phải được ngắt xuống dòng và thụt vào bốn dấu khoảng trắng so với phần tử cha của nó.

<html>
	<head>
		<title>Khái niệm phần tử trong HTML</title>
	</head>
	<body>
		<h1>Tài liệu hướng dẫn học HTML</h1>
		<h2>Tài liệu hướng dẫn học CSS</h2>
		<p>Tài liệu <u>hướng dẫn học</u> JavaScript</p>
	</body>
</html>

3.4) Tên thẻ không phân biệt chữ hoa - chữ thường

- Trong ngôn ngữ HTML, tên của các thẻ không phân biệt trường hợp chữ in hoa hay chữ thường, ví dụ như ba thẻ <title>, <TITLE>, <TiTLe> đều có chung một ý nghĩa.

- Tuy nhiên, hầu hết các lập trình viên đều sử dụng chữ thường để viết tên thẻ, ví dụ: <title>, <div> <p>, . . . .