HTML cơ bản – Bài 04: Tổ chức văn bản: heading, đoạn văn và danh sách
Bạn sẽ biến một đoạn nội dung rời rạc thành bài viết có tiêu đề, các mục và danh sách dễ đọc. Việc chọn phần tử dựa vào ý nghĩa nội dung, thay vì chỉ dựa vào chữ lớn hay chữ đậm.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Lập dàn ý trước khi gõ thẻ
Một bài giới thiệu HTML có tên bài, phần chuẩn bị và phần thực hiện. Dùng h1 cho tên chính của trang, h2 cho các mục ngang hàng, h3 cho mục con của một h2 khi cần. Trong lộ trình này ta dùng một h1 rõ nghĩa cho mỗi trang, giúp người mới giữ dàn ý nhất quán.
Đừng chọn h4 chỉ vì muốn chữ nhỏ, hoặc nhảy từ h1 tới h5 vì thấy giao diện đẹp. Kích thước là việc của CSS; cấp heading thể hiện quan hệ nội dung. Công cụ hỗ trợ có thể dùng danh sách heading để điều hướng.
Đoạn văn và ngắt dòng
Mỗi ý chính có thể là một p. Khoảng trắng và xuống dòng trong mã nguồn thường được gộp khi hiển thị, nên Enter nhiều lần trong tệp không tạo nhiều đoạn văn. br biểu diễn ngắt dòng có ý nghĩa, chẳng hạn trong một bài thơ hoặc địa chỉ được trình bày nhiều dòng, chứ không phải công cụ tạo khoảng cách giữa các khối.
pre giữ bố cục khoảng trắng cho văn bản được định dạng trước. Khi trình bày mã, kết hợp pre và code, đồng thời escape các ký tự cần thiết. Nội dung pre quá dài có thể cần cuộn ngang để không làm vỡ trang.
Chọn danh sách theo quan hệ giữa các mục
ul dùng khi thứ tự không quyết định ý nghĩa, như danh sách công cụ chuẩn bị. ol phù hợp với các bước thực hiện hoặc xếp hạng có thứ tự. Mỗi mục dùng li. Với các cặp thuật ngữ và mô tả, có thể dùng dl, dt, dd thay vì ép chúng thành danh sách gạch đầu dòng.
Khi lồng danh sách, danh sách con nằm trong li của mục cha. Không đặt một p hay ul tùy ý làm phần tử con trực tiếp thay cho li của ol. Trình duyệt có thể vẫn cố hiển thị, nhưng đó không phải bằng chứng cấu trúc đã đúng.
Nhấn mạnh theo nghĩa, không chỉ theo dáng chữ
strong thể hiện tầm quan trọng; em thể hiện sự nhấn giọng trong câu. b và i vẫn có những mục đích ngữ nghĩa riêng, không phải lúc nào cũng lỗi thời, nhưng không nên thay mọi yêu cầu chữ đậm hoặc nghiêng bằng một thẻ ngẫu nhiên. Nếu chỉ cần kiểu chữ, dùng CSS.
blockquote phù hợp với trích dẫn dạng khối, q với trích dẫn ngắn trong dòng. Không dùng blockquote chỉ để thụt lề một đoạn không phải lời trích. Những lựa chọn này giúp mã nói đúng nội dung.
Áp dụng vào trang bài viết
Mở bai-viet.html và dùng body của ví dụ. Đọc lại bài chỉ qua các heading: nếu vẫn hiểu bố cục, dàn ý đã có ích. Sau đó nhìn các danh sách và hỏi: đổi chỗ hai mục có làm đổi ý nghĩa không? Nếu có, danh sách có thứ tự thường phù hợp hơn.
Ở giai đoạn này, bạn chưa cần thuộc tất cả thẻ xử lý văn bản. Biết phân loại nội dung và tìm đúng tài liệu tra cứu khi gặp ký hiệu, thời gian hoặc trích dẫn là cách học bền vững hơn.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<h1>Học HTML từ đầu</h1>
<p>HTML giúp tổ chức <strong>nội dung</strong> của trang web.</p>
<h2>Bạn cần chuẩn bị</h2>
<ul><li>Trình soạn thảo</li><li>Trình duyệt</li></ul>
<h2>Các bước thực hiện</h2>
<ol><li>Tạo tệp HTML.</li><li>Lưu tệp và mở trong trình duyệt.</li></ol>
<p>Hãy <em>tự gõ lại</em> ví dụ để quan sát thay đổi.</p>Kết quả hiển thị
Trang có một tiêu đề chính, hai mục ngang hàng và hai loại danh sách. Nội dung vẫn có cấu trúc dễ đọc ngay cả khi chưa thêm CSS.
Mở ví dụ bài 04 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Dùng nhiều br để đẩy nội dung xuống: thay bằng đoạn văn hoặc khoảng cách CSS khi học CSS.
- Đặt h2 trong p: tách heading ra khỏi p.
- Dùng heading chỉ vì thích kích thước: chọn cấp theo dàn ý.
Tự kiểm tra
- Thêm một mục con h3 hợp lý dưới phần Các bước thực hiện.
- Giải thích vì sao danh sách công cụ dùng ul còn các bước dùng ol.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
