Phần tử HTML (element)

Tìm hiểu cú pháp và cách sử dụng phần tử HTML.

Phần tử HTML

Một văn bản HTML được cấu tạo từ nhiều phần tử HTML (HTML element). Một phần tử HTML được viết bởi thẻ: bắt đầu bằng mở thẻ, kết thúc bằng đóng thẻ, ở giữa là phần nội dung.

Cú pháp phần tử HTML: <tên-thẻ> Nội dung </tên-thẻ>

Ví dụ: <h1>Xin chào bạn </h1>

Chú ý:

Có một số phần tử HTML không có phần đóng thẻ và nội dung mà chỉ có phần mở thẻ và có thể có thêm thuộc tính được gọi là các phần tử rỗng (empty element).

vd: <hr /> <br /> <img /> <base /> <link /> …

Phần tử lồng nhau

Các phần tử HTML có thể lồng vào nhau, nghĩa là phần tử này chứa phần tử khác.

Một văn bản HTML được cấu tạo từ rất nhiều phần tử lồng nhau.

Ví dụ dưới đây chứa 5 phần tử : <html>, <body>, <h1>, <p>, <br>

VÍ dụ

<html>
	<body>
		<h1>Xin chào </h1>
		<p> Đây là ví dụ cơ bản về: <br /> "phần tử lồng nhau" </p>
	<body>
</html>

Giải thích ví dụ

  • Phần tử <html> là phần tử gốc (root element), toàn bộ nội dung của văn bản sẽ nằm trong phần tử này. nó bao gồm thẻ mở <html> và thẻ đóng </html>. Bên trong phần tử html là phần tử body.
  • Phần tử <body> xác định phần thân của tài liệu, nó cũng bao gồm phần mở thẻ <body> và phần đóng thẻ </body>. Bên trong phần tử <body> cũng chứa 2 phần tử khác là <h1> và <p>.
  • Phần tử <h1> định nghĩa tiêu đề của trang, nó cũng bao gồm mở thẻ <h1>, đóng thẻ </h1> và phần nội dung.
  • phần tử <p> định nghĩa đoạn văn bản, nó cũng bao gồm phần mở thẻ <p>, đóng thẻ </p> và phần nội dung. Bên trong phần tử <p> có chư thêm phần tử <br>.
  • Phần tử <br> là phần tử rỗng dùng để thay ký tự xuống dòng, nó chỉ bao gồm phần mở thẻ <br> mà không có phần nội dung và đóng thẻ. các phần tử rỗng thường được thêm ký tự / ở trước dấu đóng > ví dụ: <br />.

Ví dụ trên được hiển thị trên trình duyệt:

Ví dụ về phần tử lồng nhau

Đừng quên đóng thẻ

Một vài phần tử html có thể hiển thị đúng nội dung mặc dù bạn quên đóng thẻ .

<html>
<body>

<p>Đây là đoạn văn bản quên đóng thẻ
<p>Đây là đoạn văn bản tiếp theo cũng quên đóng thẻ

</body>
</html>

Hiển thị đoạn văn bản trên:

Ví dụ quên đóng thẻ

Ở ví dụ này, văn bản vẫn hiển thị đúng ý đồ tác giả, tuy nhiên trong các trường hợp khác văn bản sẽ không hiển thị đúng theo mong muốn nếu ta quên đóng thẻ. Chúng ta hay gọi là phá thẻ hay vỡ thẻ.

Chú ý: Đừng bao giờ quên đóng thẻ

Không phân biệt hoa thường

Tên thẻ không phân biệt hoa thưởng ví dụ: <html>, <Html>, <HtMl>, <HTML> … đều có nghĩa giống nhau và không bị lỗi.

Chuẩn HTML không phân biệt ký tự hoa thường, tuy nhiên W3C yêu cầu viết thường đối với tên thẻ vì thế chúng ta nên dùng ký tự thường để viết tên thẻ.

YesMy cũng chỉ sử dụng ký tự thường cho tên thẻ.

Một trang HTML có rất nhiều thẻ, nếu bạn thấy khó hiểu và không biết sử dụng chúng thì cũng đừng lo lắng.

Tôi sẽ giới thiệu chi tiết từng nhóm thẻ trong các bài tiếp theo.

« Bài trước HTML cơ bản
Thuộc tính HTML
Tên thẻ có phân biệt ký tự hoa thường không?

Tên thẻ không phân biệt ký tự hoa thường.

Thế nào là phần tử lồng nhau?

Phần tử lồng nhau là phần tử mà có phần nội dung chứa nhiều phần tử khác

Phần tử HTML là gì?

Một tài liệu HTML được cấu tạo từ nhiều phần tử HTML. Một phần tử HTML thường được cấu tạo từ ba thành phần: mở thẻ, nội dung , đóng thẻ.

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