[HTML/HTML5] Phần 4: Phần tử HTML

Cập nhật lần cuối: 16/06/2017 lúc 11:34:10

Một phần tử HTML thường chứa 1 thẻ mở và 1 thẻ đóng, với nội dung ở giữa.

<tagname>Nội dung ở đây…</tagname>

Phần tử HTML là phần tử chứa tất cả mọi thứ từ thẻ mở cho đến thẻ đóng. Phần tử p sau chứa thẻ mở, nội dung và thẻ đóng.

<p>Đoạn văn bản đầu tiên.</p>

Thẻ mở	Nội dung phần tử	Thẻ đóng
<h1>	Tiêu đề đầu tiên	</h1>
<p>	Đoạn văn đầu tiên	</p>
<br>

Các phần tử HTML không chứa nội dung gọi là các phần tử rỗng. Các phần tử rỗng không có thẻ kết thúc, ví dụ như phần tử (có nghĩa là xuống dòng). Đôi khi, phần tử rỗng được định nghĩa theo kiểu hay .

Các phần tử HTML lồng nhau (Nested HTML elements)
Các phần tử HTML có thể được lồng nhau (phần tử chứa phần tử con). Tất cả tài liệu HTML đều chứa các phần tử lồng nhau. Trong ví dụ sau, chúng ta có 4 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1>Tiêu đề đầu tiên --- dammio.com</h1>
<p>Đoạn văn bản đầu tiên</p>

</body>
</html>

Giải thích ví dụ trên như sau. Phần tử <html> định nghĩa toàn bộ tài liệu, chứa thẻ mở <html> và thẻ đóng </html>. Nội dung của phần tử <html> lại là 1 phần tử HTML khác (phần tử <body>).

<body>

<h1>Tiêu đề đầu tiên --- dammio.com</h1>
<p>Đoạn văn bản đầu tiên</p>

</body>

Tiếp đến nội dung phần tử <body> lại là 2 phần tử <h1> và . Nội dung phần tử <h1> là dòng chữ “Tiêu đề đầu tiên — dammio.com”, còn nội dung phần tử là “Đoạn văn bản đầu tiên”.

Đừng quên thẻ đóng
Trừ 1 số thẻ đặc biệt không cần thẻ đóng (như và <hr>) thì bao giờ có 1 thẻ mở thì phải có 1 thẻ đóng. Điều này giúp cho tài liệu HTML hiển thị đúng nội dung trên trình duyệt.

<html>
<body>
<p>Đây là đoạn văn bản
</body>
</html>

Trong ví dụ trên, mặc dù không có thẻ đóng , đoạn mã HTML vẫn chạy tốt trên tất cả trình duyệt. Tuy nhiên, bạn tuyệt đối không viết mã như vậy, vì nó có thể gây ra nhiều lỗi tiềm ẩn khi hiển thị trên trình duyệt mà bạn không biết khi thực hiện với hàng nghìn dòng mã HTML. Vì vậy, hãy nghĩ quy tắc đơn giản, có thẻ mở thì phải có thẻ đóng.

Các phần tử HTML rỗng (trống)
Các phần tử HTML không có nội dung gọi là các phần tử rỗng. Phần tử là 1 phần tử rỗng không chứa thẻ đóng, định nghĩa việc xuống dòng cho 1 đoạn văn bản. Như trình bày ở trên, phần tử rỗng có thể được đóng như sau: hoặc .

HTML5 không yêu cầu các phần tử rỗng cần phải đóng. Tuy nhiên, nếu bạn muốn sự rõ ràng, hay bạn cần làm cho tài liệu HTML dễ đọc bởi các trình đọc XML, bạn nên đóng tất cả thẻ HTML theo đúng quy cách.

Sử dụng thẻ HTML viết thường
Thẻ trong HTML không phân biệt hoa thường, nghĩa là thẻ có ý nghĩa như thẻ . Website dammio.com khuyến cáo các bạn nên viết thường các thẻ HTML để không phải bận tâm nhiều đến phím CapsLock hay Shift (dùng để viết hoa).

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [HTML/HTML5] Phần 45: Các plug-in trong HTML

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 4: Phần tử HTML. https://www.dammio.com/2017/06/10/htmlhtml5-phan-4-phan-tu-html.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 4: Phần tử HTML}, year = {2017}, url = {https://www.dammio.com/2017/06/10/htmlhtml5-phan-4-phan-tu-html}, urldate = {2024-09-30} }

Kết nối