Văn bản và danh sách HTML

Nội dung cần có thứ bậc

Một bài giới thiệu câu lạc bộ có tên, các đề mục, đoạn mô tả và danh sách hoạt động. Ta đánh dấu đúng vai trò từng phần trước khi chỉnh màu hay cỡ chữ.

Chọn phần tử theo ý nghĩa

`h1` đến `h6` là các cấp tiêu đề; `p` tạo đoạn, `br` ngắt dòng, `hr` đánh dấu sự chuyển chủ đề. `strong` thể hiện mức quan trọng, `em` thể hiện nhấn giọng; `sub`, `sup` thường dùng cho chỉ số dưới/trên. Không chọn cấp tiêu đề chỉ vì muốn chữ nhỏ hơn. | Danh sách | Cấu trúc | Khi dùng | |---|---|---| | Có thứ tự | ol chứa li | Các bước cần theo trình tự | | Không thứ tự | ul chứa li | Liệt kê các mục ngang hàng | | Mô tả | dl, dt, dd | Thuật ngữ và phần giải thích | Xuống dòng trong tệp nguồn thường không tự tạo đoạn mới trên trang; cần dùng phần tử thích hợp.

Các bước tham gia câu lạc bộ

```html <h2>Cách tham gia</h2> <ol> <li>Đọc thông tin hoạt động.</li> <li>Điền phiếu đăng kí.</li> <li>Nhận thông báo từ nhóm.</li> </ol> ``` Dùng ol vì đây là trình tự. Mỗi bước nằm trong một li; không đặt cả ba bước vào cùng một li chỉ bằng cách xuống dòng mã nguồn.

Thử vận dụng

Phần tử nào phù hợp để liệt kê ba sở thích ngang hàng, không cần thứ tự?

AulBtitleCtableDform

Danh sách thuật ngữ

```html <dl> <dt>HTML</dt> <dd>Ngôn ngữ đánh dấu siêu văn bản.</dd> <dt>CSS</dt> <dd>Ngôn ngữ định dạng trang web.</dd> </dl> ``` dt nêu thuật ngữ, dd giải thích thuật ngữ; ta không dùng li trong cấu trúc này.

Ví dụ xem cách làm

Viết một đoạn văn thể hiện H₂O bằng thẻ chỉ số dưới.

Ví dụ xem cách làm

Vì sao không nên dùng nhiều br để giả làm các đoạn văn riêng?

Những điều cần nhớ

Nội dung quyết định phần tử: tiêu đề, đoạn hay danh sách. HTML tạo cấu trúc có ý nghĩa; phần trình bày chi tiết tiếp tục xử lí bằng CSS.