18/08/2018, 10:38

Phần tử HTML (HTML Element) là gì ?

Khái niệm về phần tử HTML Một phần tử HTML được tạo nên bởi 3 thành phần: <thẻ mở> Nội dung nằm bên trong thẻ mở và thẻ đóng (hay còn gọi là nội dung của phần tử ) </thẻ đóng> Ví dụ, chúng ta có một đoạn mã như sau: <h1>Hướng dẫn học HTML ...

Khái niệm về phần tử HTML

Một phần tử HTML được tạo nên bởi 3 thành phần:

  • <thẻ mở>
  • Nội dung nằm bên trong thẻ mở và thẻ đóng (hay còn gọi là nội dung của phần tử)
  • </thẻ đóng>

Ví dụ, chúng ta có một đoạn mã như sau:

<h1>Hướng dẫn học HTML 1</h1>
<p>Hướng dẫn học HTML 2</p>
<div>Hướng dẫn học HTML 3</div>

Đoạn mã trên có 3 phần tử HTML:

Phần tử HTML Thẻ mở Nội dung của phần tử Thẻ đóng
<h1>Hướng dẫn học HTML 1</h1> <h1> Hướng dẫn học HTML 1 </h1>
<p>Hướng dẫn học HTML 2</p> <p> Hướng dẫn học HTML 2 </p>
<div>Hướng dẫn học HTML 3</div> <div> Hướng dẫn học HTML 3 </div>

Lồng ghép các thẻ HTML

Các thẻ HTML có thể lồng ghép vào nhau. Dó đó, nội dung của một phần tử HTML có thể là một hoặc nhiều phần tử HTML khác.

Ví dụ, chúng ta có một đoạn mã như sau:

<html>
    <body>
        <h1>Thẻ heading</h1>
        <p>Thẻ đoạn văn bản</p>
    </body>
</html>

Đoạn mã trên có 4 phần tử HTML:

Phần tử HTML Thẻ mở Nội dung của phần tử Thẻ đóng
<html>
    <body>
        <h1>Thẻ heading</h1>
        <p>Thẻ đoạn văn bản</p>
    </body>
</html>
<html> <body>
    <h1>Thẻ heading</h1>
    <p>Thẻ đoạn văn bản</p>
</body>
</html>
<body>
    <h1>Thẻ heading</h1>
    <p>Thẻ đoạn văn bản</p>
</body>
<body> <h1>Thẻ heading</h1>
<p>Thẻ đoạn văn bản</p>
</body>
<h1>Thẻ heading</h1> <h1> Thẻ heading </h1>
<p>Thẻ đoạn văn bản</p> <p> Thẻ đoạn văn bản </p>

Ta nhận thấy

  • Ở phần tử HTML thứ nhất, nội dung của nó là một phần tử HTML có thẻ mở là <body>
  • Ở phần tử HTML thứ hai, nội dung của nó là hai phần tử HTML có thẻ mở là <h1> và <p>

Đừng quên </thẻ đóng>

Một phần tử HTML phải đầy đủ ba thành phần <thẻ mở>Nội dung của phần tử</thẻ đóng>

Nếu thiếu </thẻ đóng> thì sẽ ảnh hưởng đến các phần tử khác, dẫn đến việc hiển thị không như ý muốn của bạn.

Ví dụ
<h1>Thẻ heading
<p>Thẻ đoạn<p>
Xem ví dụ
Các thẻ HTML không phân biệt trường hợp chữ hoa hay chữ thường (Ví dụ: <H1> giống với <h1>)
Tuy nhiên, các lập trình viết thích sử dụng thẻ HTML bằng chữ thường hơn. Chúng tôi khuyến khích bạn viết tên thẻ bằng chữ thường.
0