Chọn cấp tiêu đề theo quan hệ nội dung
HTML có sáu cấp tiêu đề từ `h1` đến `h6`. `h1` là cấp cao nhất, các cấp sau thấp dần. Ví dụ, tên chung “Góc đọc sách” dùng `h1`; hai mục ngang hàng “Lịch sinh hoạt” và “Tư liệu” cùng dùng `h2`.
Đây là cấp của **cấu trúc nội dung**, không chỉ là cách làm chữ lớn hoặc nhỏ. Khi cần đổi cỡ chữ mà giữ vai trò tiêu đề, dùng định dạng trình bày thích hợp. `title` trong `head` vẫn là tên tài liệu, khác tiêu đề trong vùng nội dung.
Chọn phần tử chứa đúng phạm vi
| Phần tử | Cách dùng trong bài |
|---|---|
| `p` |Một đoạn văn; không đặt một đoạn p, tiêu đề hoặc div bên trong|
| `div` |Nhóm nội dung thành một khối; mặc định bắt đầu trên dòng mới|
| `span` |Nhóm một phần nội dung trong dòng, như một cụm từ cần đổi màu|
| `br` |Ngắt dòng trong cùng đoạn|
| `hr` |Ngắt chủ đề, mặc định thường hiện thành đường kẻ ngang|
Không coi `span` là vùng chứa bất kì loại nội dung. Trong bài này nó chứa cụm chữ. Các nhận xét về dòng nói tới cách hiển thị mặc định, khi chưa có CSS thay đổi cách bố trí.
Một đoạn có hai dòng vẫn là một đoạn
```html
<h1>Góc đọc sách</h1>
<h2>Lịch sinh hoạt</h2>
<p>Đọc theo nhóm.<br>
Trao đổi sau khi đọc.</p>
<p>Ghi lại ý chính.</p>
<div>Nhóm
<span style="color:rgb(32,90,148)">
Sách xanh
</span> cùng chuẩn bị.
</div>
```
Phần đầu có h1 rồi h2. Đoạn “Đọc theo nhóm…” có một br để tách hai dòng chủ động nhưng vẫn là một p. “Ghi lại ý chính.” là đoạn p thứ hai. Trong div, span chỉ đổi màu cụm “Sách xanh”, không tự tách cụm này thành đoạn mới. Số dòng nhìn thấy còn phụ thuộc độ rộng vùng hiển thị.
Bài luyện
Tên chung của trang dùng h1. Hai mục ngang hàng ngay dưới tên chung nên dùng cách nào?
Hai mục ngang cấp nên có cùng cấp tiêu đề.
Đúng. h2 thể hiện hai mục cùng dưới tiêu đề chung h1.
title thuộc phần thông tin tài liệu, không thay tiêu đề mục trong body.
Cần chọn cấp theo cấu trúc, không chỉ theo cỡ chữ.
Lời giải
Tên chung ở cấp h1. Hai mục con ngang hàng ngay dưới nó nên cùng ở cấp h2, giúp cấu trúc thể hiện đúng quan hệ; muốn đổi cỡ chữ thì chỉnh trình bày, không tùy tiện đổi cấp.
Bài luyện
Cần ngắt dòng giữa hai câu nhưng vẫn giữ chúng trong một đoạn p. Phần tử nào đáp ứng trực tiếp?
hr dùng cho ngắt chủ đề, không chỉ ngắt dòng của câu.
title đặt tên tài liệu.
Một p mới tạo đoạn khác, trái yêu cầu giữ cùng đoạn.
Đúng. br ngắt dòng trong đoạn đang có.
Lời giải
Yêu cầu giữ một đoạn p nên không thêm p mới. Đặt br giữa hai câu sẽ tạo ngắt dòng chủ động trong chính đoạn đó; hr và title có vai trò khác.
Bài luyện
Chỉ muốn đổi màu cụm “Sách xanh” trong dòng ở ví dụ. Cách nào giữ đúng phạm vi?
Đúng. span nhóm riêng cụm chữ trong dòng để định dạng.
p không phải vùng chứa toàn bộ cấu trúc body.
Tiêu đề h1 không đặt trong p.
hr không chứa hoặc thay thế nội dung cụm chữ.
Lời giải
span phù hợp để nhóm cụm chữ trong dòng. Đặt style màu trên span ấy giới hạn định dạng vào Sách xanh, đồng thời giữ phần văn bản còn lại trong cấu trúc đang có.
Bài luyện
Đoạn “Đọc theo nhóm…” trong ví dụ có một br giữa hai câu. Nhận xét nào đúng?
br không tự tạo p mới.
br có thể dùng trong p để ngắt dòng.
Đúng. Ngắt dòng không làm tăng số đoạn p.
Khi vùng hiển thị hẹp, văn bản còn có thể tự xuống dòng.
Lời giải
Hai câu được bao bởi cùng một cặp thẻ p, còn br nằm giữa chúng. Vì vậy có một đoạn p với một ngắt dòng chủ động. Tổng số dòng nhìn thấy có thể tăng nếu trình duyệt phải xuống dòng theo độ rộng.
Đang học