Bài 4: Các phần tử trong HTML

Các tài liệu HTML được định nghĩa bằng các phần tử trong HTML.

Các phần tử trong HTML

Các thành phần HTML được viết với một thẻ bắt đầu, một thẻ kết thúc và nội dung ở giữa:

<tên_thẻ>Nội dung</tên_thẻ>
Một phần tử HTML là phần bắt từ thẻ bắt đầu (thẻ mở) đến thẻ kết thúc ( thẻ đóng):

Thẻ bắt đầu	Thành phần nội dung	Thẻ kết thúc
<h1>	Tiêu đề đầu tiên của tôi	</h1>
<p>	Đoạn văn đầu tiên của tôi.	</p>
<br>

	Một vài phần tử HTML không có thẻ kết thúc.

Các phần tử HTML lồng nhau

Các phần tử trong HTML có thể lồng nhau (các phần tử này có thể chứa các phần tử khác).

Tất cả tài liệu HTML bao gồm các phần tử HTML lồng nhau.

Ví dụ sau có 4 phần tử HTML:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<h1>Tiêu đề đầu tiên của tôi</h1>
<p>Đoạn văn đầu tiên của tôi.</p>
</body>
</html>

Giải thích ví dụ HTML

Thành phần <html> định nghĩa toàn bộ tài liệu.

Nó có một thẻ bắt đầu là <html> và một thẻ kết thúc </html>.

Phần nội dung là một phần tử HTML khác ( phần tử <body> )

Thành phần <body> định nghĩa thân tài liệu.

Nó có thẻ bắt đầu là <body> và thẻ kết thúc là </body>.

Thành phần nội dung là 2 thành phần HTML khác (<h1> and <p>).

<body>

</body>

Phần tử <h1> định nghĩa một tiêu đề.

Nó được bắt đầu bởi thẻ <h1> và kết thúc bởi thẻ </h1>.

Phần nội dung là: Tiêu đề đầu tiên của tôi.

Phần tử <p> định nghĩa một đoạn văn.

Nó bắt đầu bởi thẻ <p> và kết thúc bởi thẻ </p>.

Phần nội dung là: Đoạn văn đầu tiên của tôi.

Đừng quên thẻ kết thúc

Một vài phần tử HTML sẽ hiển thị một cách chính xác, thậm chí nếu bạn quên thẻ kết thúc:

Ví dụ

<html>
<body><p>Đây là một đoạn văn
<p>Đây là một đoạn văn

</body>
</html>

Ví dụ ở trên làm việc trong tất cả các trình duyệt, bởi vì các thẻ đóng được xem là tùy chọn.

Nhưng không nên tin tưởng tuyệt đối vào điều này bởi nó có thể tạo ra kết quả không mong muốn hoặc có lỗi nếu bạn quên thẻ kết thúc.

Các phần tử HTML trống

Các phân tử HTML không có nội dung đi kèm được gọi là phần tử trống.

<br>là một thành phần trống không có thẻ đóng (thẻ <br>đĩnh nghĩa một lệnh ngắt dòng).

Phần tử trống có thể “đóng” ngay trong thẻ mở như thế này: <br/>.

HTML5 không yêu cầu phần tử trống phải đóng. Nhưng nếu bạn muốn xác nhận chính xác, hoặc bạn muốn tài liệu của bạn có thể đọc được bằng cách phân tích ngôn ngữ XML, bạn nên đóng tất cả các thẻ HTML.

Mẹo HTML: Sử dụng thẻ chữ thường

Các thẻ HTML không phân biệt hoa thường: <P> Có nghĩa tương tự như <p>.

Chuẩn HTML5 không yêu cầu các thẻ chữ thường, nhưng W3C khuyến nghị sử dụng chữ thường trong HTML4, và yêu cầu chữ thường chặt trẽ trong tài liệu giống XHTML.