Văn bản, tiêu đề & danh sách

Mở một quyển sách giáo khoa, mèo con thấy gì? Tên chương to nhất, rồi tên bài nhỏ hơn, rồi các mục nhỏ hơn nữa. Đó là một dàn ý có thứ bậc: cái lớn chứa cái nhỏ. Trang web cũng vậy, và HTML có sáu mức tiêu đề để diễn đạt thứ bậc đó: <h1> đến <h6>.

Điểm hay vấp nhất của người mới: chọn thẻ tiêu đề theo cỡ chữ nhìn thấy. Sai rồi. h1 không có nghĩa là "chữ to nhất", mà là "tựa đề chính của trang". Chọn thẻ theo vai trò trong dàn ý, còn chữ to hay nhỏ để CSS lo sau.

<h1>Mèo Ham Học</h1>

<h2>Khoá học</h2>
<h3>HTML</h3>
<h3>JavaScript</h3>

<h2>Về chúng tôi</h2>

• ▸h1-h6 là SÁU MỨC thứ bậc của dàn ý, không phải sáu cỡ chữ.
• ▸Mỗi trang nên có một h1 (tựa chính); phần lớn dùng h2, phần con dùng h3…
• ▸Đừng nhảy cóc cấp (h1 thẳng sang h3) chỉ để được cỡ chữ mong muốn - đó là việc của CSS.

Khối nội dung quen thuộc nhất là đoạn văn, đánh dấu bằng thẻ <p> (paragraph). Mỗi ý một đoạn, mỗi đoạn một thẻ p.

Có một điều khiến người mới ngạc nhiên: trong file HTML, mèo con gõ bao nhiêu dấu cách hay xuống dòng cũng được, nhưng trình duyệt gộp mọi khoảng trắng liền nhau thành một dấu cách khi hiển thị. Gõ 5 dòng trống giữa hai câu cũng không tạo ra khoảng cách - muốn sang đoạn mới thì mở một thẻ p mới.

<p>Mèo con chào cả nhà.</p>

<p>Đây    là    đoạn   thứ   hai.
Dù gõ cách xa nhau, trình duyệt vẫn hiển thị dính liền.</p>

Muốn làm nổi một từ, mèo con sẽ gặp bốn thẻ trông na ná nhau. Chia làm hai nhóm. Nhóm mang nghĩa: <strong> đánh dấu nội dung quan trọng, <em> đánh dấu chỗ cần nhấn giọng (emphasis). Nhóm chỉ hình thức: <b> cho đậm, <i> cho nghiêng - không thêm nghĩa gì.

Trên màn hình, strong và b đều in đậm như nhau, nên nhiều người tưởng chúng giống hệt. Khác biệt nằm ở chỗ máy đọc trang: screen reader có thể nhấn giọng ở strong/em, máy tìm kiếm hiểu được mức quan trọng. Với b/i thì máy chỉ thấy "đậm/nghiêng" mà không hiểu vì sao.

<p><strong>Cảnh báo:</strong> không chạm vào ổ điện.</p>
<p>Mèo con <em>thật sự</em> thích cá.</p>
<p>Quyển <i>Mèo Ham Học</i> rất hay.</p>

• ▸strong = quan trọng, em = nhấn giọng: hai thẻ MANG NGHĨA.
• ▸b = đậm, i = nghiêng: chỉ đổi HÌNH THỨC, không thêm nghĩa.
• ▸In đậm/nghiêng chỉ là cách trình duyệt hiển thị mặc định - nghĩa mới là thứ máy dùng.

Khi nội dung là một loạt mục, hãy đánh dấu nó thành danh sách thật, chứ đừng gõ tay từng gạch đầu dòng. Có hai loại. Danh sách không thứ tự <ul> (unordered - chấm đầu dòng), và danh sách có thứ tự <ol> (ordered - đánh số). Mỗi mục bên trong là một thẻ <li> (list item).

Chọn loại nào? Hỏi: thứ tự có quan trọng không? Các bước pha mì thì thứ tự là cốt lõi - dùng ol. Danh sách món mèo con thích ăn thì đảo qua đảo lại vẫn thế - dùng ul.

<ul>
  <li>Cá khô</li>
  <li>Sữa ấm</li>
  <li>Hạt thưởng</li>
</ul>

<ol>
  <li>Đun sôi nước</li>
  <li>Cho mì vào</li>
  <li>Đợi 3 phút</li>
</ol>

Còn khi mèo con dẫn lại nguyên một đoạn lời của người khác, hãy bọc nó trong <blockquote> (trích dẫn khối). Thẻ này nói với máy "đây là lời trích từ nguồn khác", chứ không phải một mẹo để thụt lề cho đẹp.

<p>Khẩu hiệu của tụi mình là:</p>
<blockquote>
  Hãy học như thể bạn sẽ tồn tại mãi mãi.
</blockquote>

• ▸ul = danh sách không thứ tự (chấm); ol = có thứ tự (số); mỗi mục là một li.
• ▸Chọn ul/ol theo NGHĨA: thứ tự có quan trọng hay không.
• ▸blockquote dùng để trích dẫn cả đoạn, không phải để thụt lề cho đẹp.

Sợi chỉ xuyên suốt bài này: chọn thẻ theo nghĩa của nội dung, không theo dáng vẻ mong muốn. Đây chính là tinh thần Semantic HTML mà cả khoá xoay quanh. Vài kiểu lạm dụng hay gặp - và cách nghĩ đúng:

• ▸Dùng nhiều h1 cho chữ to khắp nơi → sai; cỡ chữ là việc của CSS, dàn ý mới dùng heading.
• ▸Dùng blockquote để thụt lề một đoạn không phải trích dẫn → sai; canh lề là việc của CSS.
• ▸Dùng b thay cho strong ở chỗ cảnh báo quan trọng → mất nghĩa với máy đọc và screen reader.

Vì sao phải kỹ vậy với một trang trông còn mộc mạc (chưa có CSS)? Vì đánh dấu đúng nghĩa là món quà cho ba phía: Google hiểu trang để xếp hạng, screen reader đọc đúng cho người khiếm thị, và chính mèo con vài tháng sau đọc lại vẫn hiểu ngay. Cấu trúc đúng trước, đẹp sau.