Gốc html và hai phần chính
Trong tài liệu mẫu, `html` là phần tử gốc, chứa hai phần tử con trực tiếp là `head` và `body`.
| Phần | Vai trò trong mẫu |
|---|---|
| `head` |Thông tin về tài liệu: cách mã hóa và tên trang|
| `meta charset="utf-8"` |Khai báo mã hóa UTF-8 để trình duyệt đọc văn bản|
| `title` |Tên tài liệu, thường thấy ở thẻ trình duyệt|
| `body` |Nội dung chính hiển thị trong vùng trang|
| `h1` |Tiêu đề cấp 1 nằm trong nội dung trang|
`title` chứa văn bản tên tài liệu, không lồng các phần tử HTML khác bên trong. `title` và `h1` có thể khác nội dung: tên trên thẻ trình duyệt khác tiêu đề hiện trong trang.
Đọc mã từ ngoài vào trong
```html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Góc đọc sách</title>
</head>
<body>
<div>
<h1>Góc đọc sách lớp 12</h1>
<img src="quyen_sach.svg" alt="Quyển sách minh họa">
<p>Mỗi tuần chọn <em>một cuốn sách</em>.</p>
<hr>
<p>Ghi lại điều đã học.</p>
</div>
</body>
</html>
```
Thụt lề giúp nhìn quan hệ lồng nhau. `div` nhóm nội dung, gồm tiêu đề, ảnh, hai đoạn văn và đường ngắt chủ đề. Đoạn văn đầu chứa `em`; đoạn sau không chứa phần tử con.
Cây chỉ vẽ các phần tử
Mỗi ô trong hình biểu diễn một phần tử. Nhánh nối từ cha tới con **trực tiếp**, nghĩa là không có phần tử trung gian giữa chúng.
`div` là con trực tiếp của `body`. `em` là con trực tiếp của đoạn `p₁`; nó nằm trong `div` nhưng không phải con trực tiếp của `div`.
Cây có 12 phần tử: `html`, `head`, `meta`, `title`, `body`, `div`, `h1`, `img`, hai `p`, `hr` và `em`. Kí hiệu `p₁`, `p₂` chỉ phân biệt hai đoạn trong hình, không phải tên thẻ mới. Nội dung văn bản và thuộc tính không được vẽ thành ô phần tử.
Bài luyện
Trong tệp mẫu, cặp nào là hai phần tử con trực tiếp của html?
Hai phần tử này nằm trong head.
Đúng. Đây là hai nhánh chính ngay dưới gốc html.
Hai phần tử này nằm trong div.
em nằm trong đoạn p đầu, không ngay dưới html.
Lời giải
Đọc hai cặp thẻ ngay trong html sẽ thấy head rồi body. meta và title thuộc head, còn h1, img và các đoạn văn thuộc nhánh body. Vì thế hai con trực tiếp của gốc là head và body.
Bài luyện
Tên thẻ trình duyệt là “Góc đọc sách”, còn tiêu đề trong trang là “Góc đọc sách lớp 12”. Cặp phần tử nào tương ứng?
p tạo đoạn văn; hr ngắt chủ đề.
body chứa nội dung, còn meta khai báo thông tin như mã hóa.
img tạo ảnh, div nhóm nội dung.
Đúng. title đặt tên tài liệu, h1 là tiêu đề trong nội dung.
Lời giải
Trong head, title chứa tên Góc đọc sách được dùng cho tài liệu và thường hiện trên thẻ trình duyệt. Trong body, h1 chứa Góc đọc sách lớp 12 và hiện như tiêu đề của nội dung trang.
Bài luyện
Trong cây của tệp mẫu, phần tử cha trực tiếp của `em` là phần tử nào?
Đúng. Cặp thẻ em nằm ngay trong đoạn p đầu.
Giữa div và em còn phần tử p.
Giữa body và em còn div rồi p.
em thuộc nhánh body, không thuộc head.
Lời giải
Đi từ `em` lên một nhánh trong cây sẽ tới p₁. Đoạn p này mới nằm trong div, rồi div nằm trong body. Do hỏi cha trực tiếp, đáp án là đoạn p đầu tiên, không phải các phần tử tổ tiên ở xa hơn.
Bài luyện
Nếu thêm một chú thích vào mã mẫu nhưng không thêm thẻ HTML nào, số phần tử trong cây thay đổi thế nào?
Chú thích không được tính là phần tử HTML.
Thêm chú thích không xóa phần tử nào.
Đúng. Các phần tử của mẫu được giữ nguyên.
Chú thích không thay thế hoặc xóa gốc html.
Lời giải
Cây đang đếm các phần tử HTML, gồm 12 phần tử đã liệt kê. Chú thích chỉ thêm ghi chú trong mã nguồn, không thêm một phần tử vào cây đó, nên số phần tử vẫn là 12.
Đang học