Các phần tử trong HTML

Minh Nguyen

Bài trước

Mục lục

Bài sau

Phần tử HTML thường đi thành cặp, gồm thẻ mở, thẻ đóng và nội dung nằm bên trong 2 thẻ này.

<ten_the>Nội dung</ten_the>

Phần tử HTML là tất cả mọi thứ từ thẻ mở cho tới thẻ đóng.

Ví dụ về phần tử HTML

<h1>Học lập trình HTML</h1>
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>

Thẻ mở là <h1> và <p>
Nội dung của phần tử là “Học lập trình HTML” và “HTML là ngôn ngữ đánh dấu siêu văn bản.”
Thẻ đóng là </h1> và </p>

Phần tử HTML mà không có nội dung thì được gọi là phần tử rỗng. Phần tử rỗng không có thẻ đóng, ví dụ như <br> (dùng để ngắt dòng).

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

Phần tử HTML có thể lồng vào nhau (phần tử này nằm trong phần tử khác)

Tất cả các văn bản HTML đều có chứa phần tử HTML lồng nhau.

Ví dụ dưới đây có 4 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1>Học lập trình HTML</h1>
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>

</body>
</html>

Giải thích ví dụ

Phần tử <html> xác định cho cả văn bản, với thẻ mở là <html> và thẻ đóng là </html>. Nội dung phần tử này là một phần tử khác (chính là <body>).

<html>
<body>

<h1>Học lập trình HTML</h1>
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>

</body>
</html>

Phần tử <body> xác định toàn bộ phần thân của văn bản, bắt đầu bằng thẻ mở <body> và kết thúc là thẻ đóng </body>, nội dung là 2 phần tử HTML khác (<h1> và <p>).

<body>

<h1>Học lập trình HTML</h1>
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>

</body>

Phần tử <h1> xác định tiêu đề, có thẻ mở là <h1> và thẻ đóng là </h1>, nội dung là Học lập trình HTML.

<h1>Học lập trình HTML</h1>

Phần tử <p> xác định đoạn văn bản, gồm thẻ mở là <p> và thẻ đóng là </p>, nội dung là HTML là ngôn ngữ đánh dấu siêu văn bản.

<p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p>

Đừng quên thẻ đóng

Dù một số phần tử HTML vẫn hiển thị đúng ngay cả khi bạn quên thẻ đóng, trên trình duyệt vẫn sẽ hiển thị giống như khi có thẻ đóng, ví dụ như dưới đây.

<html>
<body>

<h1>Học lập trình HTML
<p>HTML là ngôn ngữ đánh dấu siêu văn bản.

</body>
</html>

Nhưng đừng quá dựa dẫm vào điều này vì trong trường hợp khác, có thể sẽ gây ra lỗi khi bạn quên thẻ đóng.

Phần tử HTML rỗng

Phần tử HTML rỗng là các phần tử không có chứa nội dung.

<br> là một phần tử rỗng, không có thẻ đóng và được dùng để ngắt dòng.

Phần tử rỗng có thể “đóng” ở thẻ mở như thế này <br />

HTML5 không bắt buộc phải đóng phần tử rỗng. Nhưng nếu muốn kiểm tra tính hợp lệ khắt khe hơn hay muốn các trình phân tích XML có thể đọc được văn bản của bạn, thì tốt nhất nên đóng tất cả các phần tử HTML đúng quy cách.

Thẻ đánh dấu với chữ viết hoa và chữ viết thường

Thẻ HTML không nhất thiết phải là chữ thường hay chữ hoa, <p> hay <P> cũng đều như nhau.

Chuẩn HTML5 không bắt buộc phải dùng chữ thường nhưng W3C khuyến khích nên dùng chữ thường trong HTML và yêu cầu dùng chữ thường cho các văn bản khắt khe hơn như XHTML chẳng hạn.

Bài trước: Các ví dụ cơ bản về HTML

Bài sau: Các thuộc tính trong HTML

Thứ Bảy, 28/04/2018 15:16

5 ★ 3 👨 5.512