Thẻ là dấu đánh dấu; phần tử là cả đơn vị
Trong `<p>Ghi lại điều đã học.</p>`, `<p>` là **thẻ mở**, `</p>` là **thẻ đóng**. Toàn bộ thẻ mở, nội dung và thẻ đóng tạo thành một **phần tử p**, biểu diễn một đoạn văn.
Dấu `/` trong thẻ đóng đứng trước tên thẻ. Với các thẻ HTML thông thường đang học, tên không phân biệt chữ hoa, chữ thường; nên viết chữ thường thống nhất. Điều này không có nghĩa mọi tên tệp hay mọi giá trị trong HTML đều không phân biệt hoa, thường.
Lồng phần tử phải đúng thứ tự
```html
<p>Mỗi tuần chọn <em>một cuốn sách</em>.</p>
```
Phần tử `em` nằm trong phần tử `p`, dùng nhấn mạnh cụm từ “một cuốn sách”. Khi chưa có quy tắc trình bày riêng, trình duyệt thường hiển thị cụm này nghiêng. Thẻ mở ở trong được đóng trước, rồi mới đóng phần tử bao ngoài.
Đoạn trên có hai phần tử: `p` và `em`; không đếm mỗi thẻ mở hoặc đóng thành một phần tử riêng. Việc lồng còn phải phù hợp loại phần tử: `p` chứa được `em`, nhưng không đặt một đoạn `p` khác bên trong `p`.
Phân biệt phần tử không có nội dung với khai báo, chú thích
| Dạng trong mã nguồn | Ý nghĩa |
|---|---|
| `<hr>` |Phần tử ngắt chủ đề, thường hiện thành đường kẻ ngang|
| `<br>` |Phần tử ngắt dòng|
| `<!DOCTYPE html>` |Khai báo kiểu tài liệu, không phải phần tử HTML|
| `<!-- Ghi chú của người soạn -->` |Chú thích trong mã nguồn, không hiển thị như nội dung trang|
`hr`, `br`, `img` và `meta` là các phần tử rỗng: không có nội dung con và không dùng thẻ đóng. Trong sơ đồ chỉ đếm phần tử, không tính DOCTYPE hoặc chú thích.
Ví dụ `<img src="quyen_sach.svg" alt="Quyển sách minh họa">` vẫn là một phần tử. `src` cho biết tệp ảnh cần dùng; `alt` cung cấp văn bản thay thế. Phần ghi thuộc tính không phải một phần tử con.
Bài luyện
Trong `<p>Ghi lại điều đã học.</p>`, đâu là toàn bộ một phần tử p?
Một dấu riêng lẻ không tạo thành phần tử.
Văn bản là nội dung, chưa bao gồm cặp thẻ.
Thẻ đóng chỉ đánh dấu điểm kết thúc.
Đúng. Phần tử bao gồm toàn bộ đơn vị này.
Lời giải
Thẻ mở xác định điểm bắt đầu, thẻ đóng xác định điểm kết thúc. Phần tử p gồm hai thẻ ấy cùng nội dung ở giữa, nên phải xét toàn bộ đoạn mã đã cho.
Bài luyện
Đoạn `<p>Mỗi tuần chọn <em>một cuốn sách</em>.</p>` có bao nhiêu phần tử HTML?
Ngoài p còn có em nằm bên trong.
Đúng. Có p và em.
Bốn thẻ mở/đóng tạo hai phần tử, không phải bốn.
Các từ trong nội dung không được tính là phần tử HTML riêng.
Lời giải
Cặp thẻ p cùng nội dung tạo một phần tử p. Trong đó, cặp thẻ `em` cùng cụm từ được nhấn mạnh tạo phần tử `em` thứ hai. Do đó có hai phần tử, với quan hệ `em` là con của p.
Bài luyện
Nhận xét nào đúng về phần tử hr trong bài?
Đúng. hr là phần tử rỗng.
hr không chứa phần tử p.
hr là phần tử ngắt chủ đề, khác chú thích.
Tiêu đề cấp cao nhất dùng h1, không dùng hr.
Lời giải
hr thuộc nhóm phần tử rỗng, được viết bằng thẻ hr mà không có nội dung con hoặc thẻ đóng. Trong hiển thị thông thường, nó thể hiện một ngắt chủ đề bằng đường kẻ ngang.
Bài luyện
Khi đếm phần tử HTML trong một tệp, cách xử lí DOCTYPE và chú thích nào đúng?
Các từ trong chú thích không phải phần tử HTML.
Gốc phần tử là html; DOCTYPE là khai báo.
Đúng. Cần phân biệt phần tử với hai dạng đánh dấu này.
Dấu đánh dấu riêng lẻ không tạo một phần tử.
Lời giải
DOCTYPE khai báo kiểu tài liệu; chú thích lưu ghi chú trong nguồn. Cả hai không phải phần tử HTML để đưa vào phép đếm này. Phần tử gốc của tài liệu mẫu là html.
Đang học