Thành phần trong HTML
Những tài liệu HTML đều được tạo nên từ những thẻ gọi là thành phần HTML (HTML Elements).
Thành phần HTML
Những thành phần HTML được viết dưới dạng kết hợp một thẻ mở đầu, một thẻ kết thúc và nội dung ở giữa.
<ThẻHTML>Nội dung</ThẻHTML>
Thành phần HTML gồm từ thẻ bắt đầu cho đến thẻ kết thúc:
<p>Đây là một đoạn văn.</p>
Thẻ bắt đầu | Nội dung thành phần | Thẻ kết thúc |
---|---|---|
<h1> | Đây là đề mục | </h1> |
<p> | Đây là đoạn văn. | </p> |
<br> |
Một vài thành phần HTML sẽ không có thẻ kết thúc. |
Tổ hợp thành phần HTML
Những thành phần trong HTML có thể được viết lồng ghép vào nhau. Thực tế thì tài liệu HTML là tổ hợp của những thành phần HTML lồng ghép vào nhau.Mời bạn xem đoạn mã ví dụ dưới đây chứa 4 thành phần:
Ví dụ
<html> <body> <h1>Đây là đề mục</h1> <p>Đây là nội dung đoạn văn.</p> </body> </html>Xem kết quả »
Giải thích đoạn mã
Thành phần <html> để định nghĩa xác định toàn bộ tài liệu HTML.
Nó bắt đầu với thẻ <html> và kết thúc với thẻ </html>.
Nội dung của thành phần này chính là những thành phần khác được lồng vào.
Thành phần <body> dùng để xác định thân của tài liệu HTML.
Nó bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>.
Nội dung của thành phần này chính là 2 thành phần khác (<h1> và <p>).
Thẻ <h1> dùng để định nghĩa đề mục.
Nó bắt đầu với thẻ <h1> và kết thúc với thẻ </h1>.
Nội dung mà thành phần chứa là: Đây là đề mục.
Thẻ <p> xác định đoạn văn bản.
Nó bắt đầu bằng thẻ <p> và kết thúc bằng thẻ </p>.
Nội dung của thành phần này là: Đây là nội dung đoạn văn.
Nó bắt đầu với thẻ <html> và kết thúc với thẻ </html>.
Nội dung của thành phần này chính là những thành phần khác được lồng vào.
<html> <body> <h1>Đây là đề mục</h1> <p>Đây là nội dung đoạn văn.</p> </body> </html>
Nó bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>.
Nội dung của thành phần này chính là 2 thành phần khác (<h1> và <p>).
<body> <h1>Đây là đề mục</h1> <p>Đây là nội dung đoạn văn.</p> </body>
Thẻ <h1> dùng để định nghĩa đề mục.
Nó bắt đầu với thẻ <h1> và kết thúc với thẻ </h1>.
Nội dung mà thành phần chứa là: Đây là đề mục.
<h1>Đây là đề mục</h1>
Thẻ <p> xác định đoạn văn bản.
Nó bắt đầu bằng thẻ <p> và kết thúc bằng thẻ </p>.
Nội dung của thành phần này là: Đây là nội dung đoạn văn.
<p>Đây là nội dung đoạn văn.</p>
Những lưu ý về thành phần
Đừng quên thẻ kết thúc
Một vài thành phần HTML có thể hiển thị đúng kết quả mong muốn ngay cả khi bạn quên thẻ kết thúc.
Đoạn mã ví dụ trên cho thấy nó vẫn hoạt động tốt trên trình duyệt, vì việc đóng thẻ HTML là việc không bắt buộc, một sự tùy chọn.
Và bạn đừng bao giờ dựa dẫm vào điều này. Khi bạn quên đóng thẻ HTML, đoạn mã có thể chạy sai cho hiển thị kết quả không mong muốn hoặc bị lỗi.
Ví dụ như thẻ xuống dòng là thẻ <br>.
<br> là thành phần rỗng không có thẻ kết thúc.
Những thành phần rỗng có thể "được đóng" ngay trong thẻ bắt đầu, giống như: <br />.
Trong HTML5, không yêu cầu bắt buộc bạn phải đóng những thẻ rỗng. Nhưng nếu bạn muốn tỷ mỹ, cẩn thận hơn, hay là làm cho mã nguồn bạn dễ đọc và phân tích. Bạn nên đóng cả thẻ rỗng trong HTML.
Cảm ơn bạn đã xem bài viết.
Và bạn đừng bao giờ dựa dẫm vào điều này. Khi bạn quên đóng thẻ HTML, đoạn mã có thể chạy sai cho hiển thị kết quả không mong muốn hoặc bị lỗi.
Thành phần rỗng
Trong HTML, có những thành phần không có chứa nội dung (content) được gọi là những thành phần rỗng.Ví dụ như thẻ xuống dòng là thẻ <br>.
<br> là thành phần rỗng không có thẻ kết thúc.
Những thành phần rỗng có thể "được đóng" ngay trong thẻ bắt đầu, giống như: <br />.
Trong HTML5, không yêu cầu bắt buộc bạn phải đóng những thẻ rỗng. Nhưng nếu bạn muốn tỷ mỹ, cẩn thận hơn, hay là làm cho mã nguồn bạn dễ đọc và phân tích. Bạn nên đóng cả thẻ rỗng trong HTML.
Mẹo hay
Thẻ HTML không có phân biệt hoa hay thường: <H1> cũng giống như <h1> thôi.
Trong chuẩn HTML5 không đòi hỏi bạn phải viết thẻ bằng chữ in thường nhưng W3C (Tổ chức quy định chuẩn web) khuyến cáo sử dụng chữ thường trong HTML4, bắt buộc chữ thường cho những tài liệu nghiêm ngặc như XHTML.
Những bài viết về HTML trong trang Tin Học Sóc Trăng đều được viết với chữ in thường. |
Cảm ơn bạn đã xem bài viết.
Bình luận