Khi chúng ta đang học những điều mới, chúng ta chỉ muốn học càng nhiều thứ càng nhanh càng tốt và cuối cùng chúng ta lại bỏ lỡ những nguyên tắc cơ bản. Vì vậy, ở đây tôi sẽ cho bạn biết về những gì bạn có thể đã biết hoặc đã thấy! Đó chính là câu hỏi Phần tử HTML là gì?
Phần tử HTML là gì?
Để làm cho nó đơn giản, mình muốn nói rằng một phần tử HTML được chia thành ba phần.
- Thẻ
- Nội dung
- Thuộc tính
Một phần tử HTML trông giống như sau:
<start-tag attribute="value"> Content </end-tag>
Code language: HTML, XML (xml)Ví dụ:
<h1 id="heading">This is a heading.</h1>
<div class="container">Some content</div>
<input type="text">
<br>Code language: HTML, XML (xml)Thẻ
Thẻ HTML phải có thẻ mở, được bao bọc giữa bởi 2 dấu < và >. Chúng có thể có hoặc không có các thuộc tính, nội dung bên trong chúng và thẻ đóng.
Dựa trên các thẻ, chúng ta có thể chia các phần tử HTML theo 3 loại sau:
- Void elements
- Block level elements
- Inline elements
Void elements
Như chúng ta đã thấy các phần tử HTML có thẻ mở và thẻ đóng, tuy nhiên vẫn sẽ có một nhóm các phần tử ngoại lệ đối với quy tắc này. Các phần tử này được gọi là Void elements hoặc phần tử trống và chúng không thể chứa bất kỳ nội dung nào. Sau đây là danh sách đầy đủ các phần tử void trong HTML:
<br>, <col>, <img>, <hr>, <base>, <area>, <command>, <embed>, <param>, <meta>, <wbr>, <track>, <source>, <input>, <keygen>, <link>.Code language: HTML, XML (xml)Block-level elements
Theo mặc định, block-level elements (phần tử cấp khối) là bất kỳ phần tử nào bắt đầu một dòng mới và chiếm toàn bộ không gian ngang của phần tử mẹ của nó và có các lề trên và dưới. Các phần tử mức khối được sử dụng phổ biến nhất là div, xác định một bộ phận hoặc một phần trong tài liệu HTML và p, xác định một đoạn văn. Các ví dụ khác về các phần tử cấp khối được đưa ra dưới đây:
<h1></h1>, <ul></ul>, <form></form>, <pre></pre>, <ol></ol>, <li></li>, etc.
Code language: HTML, XML (xml)Inline elements
Inline elements không bắt đầu trên một dòng mới và chỉ chiếm nhiều dung lượng khi cần thiết. Các ví dụ về các phần tử nội tuyến được đưa ra dưới đây:
<a></a>, <button></button>, <script></script>, <span></span>, <select></select>, <var></var>, etc.
Code language: HTML, XML (xml)Nội dung
Các phần tử HTML có thể được lồng vào nhau, điều đó có nghĩa là một phần tử có thể chứa các phần tử khác. Tất cả các tài liệu HTML đều bao gồm các phần tử HTML lồng nhau. Hãy tưởng tượng nó giống như việc giữ các hộp nhỏ hơn trong một hộp lớn hơn. Nó tạo ra một cấu trúc cây. Ví dụ,
<!DOCTYPE html>
<html>
<body>
<div>
<p>
<span>
<b> This is some text</b>
</span>
</p>
</div>
</body>
</html>Code language: HTML, XML (xml)Ở đây, phần tử html là phần tử gốc định nghĩa toàn bộ tài liệu HTML. Bên trong phần tử html có các phần tử head & body. Bên trong phần tử body có nhiều phần tử như div, p, span, b.
Thuộc tính
Tất cả các phần tử HTML đều có thể có các thuộc tính. Các thuộc tính này cung cấp thông tin bổ sung về các phần tử. Các thuộc tính luôn được chỉ định trong thẻ mở. Chúng thường có các cặp tên/giá trị như: name = ”value”.
Ví dụ,
<div class="container"> this is an example.</div>
<div id="unique"> this is another example.</div>Code language: HTML, XML (xml)Trong ví dụ đã cho, class là một thuộc tính và container là giá trị của nó. Tương tự với id. Nó là một thuộc tính và unique là giá trị của nó.
Trên đây là toàn bộ những điều cơ bản của các phần tử HTML để giúp các bạn nắm rõ hơn về Phần tử HTML là gì?
Cảm ơn bạn đã theo dõi bài viết!
2 thoughts on “Phần tử HTML là gì? Khái niệm, đặc điểm”