Liên kết, ảnh & đa phương tiện

Ở hai bài trước, mèo con đã đánh dấu được chữ nghĩa trong MỘT trang. Nhưng điều khiến web trở thành "web" (mạng lưới) là các trang nối được với nhau. Sợi dây đó là thẻ <a> (anchor) - thứ tạo ra siêu văn bản (hypertext): bấm vào một chữ là nhảy sang trang khác.

Thẻ a dùng thuộc tính href để nói liên kết trỏ tới đâu, còn nội dung giữa hai thẻ là phần chữ người ta thấy và bấm vào.

<p>Đọc thêm tại <a href="https://meohamhoc.vn">Mèo Ham Học</a>.</p>
<p>Hoặc xem <a href="bai-tiep.html">bài tiếp theo</a>.</p>

• ▸Thẻ a tạo liên kết - thứ làm web trở thành một mạng lưới các trang.
• ▸href cho biết liên kết trỏ tới đâu; chữ giữa hai thẻ là phần bấm vào.
• ▸Liên kết là cốt lõi của "hypertext" - chữ H trong HTML.

Giá trị của href có hai kiểu. Kiểu tuyệt đối ghi địa chỉ đầy đủ (bắt đầu bằng https://) - dùng để trỏ sang website khác. Kiểu tương đối chỉ ghi đường dẫn trong cùng website (vd bai-tiep.html) - gọn và không gãy khi đổi tên miền.

Mặc định, bấm liên kết sẽ mở ngay trên tab đang xem. Muốn mở tab mới, thêm target="_blank". Khi mở tab mới ra trang ngoài, nên kèm rel="noopener noreferrer" để trang vừa mở không can thiệp ngược lại trang của mình - một thói quen an toàn.

<a href="https://meohamhoc.vn" target="_blank" rel="noopener noreferrer">
  Mở Mèo Ham Học ở tab mới
</a>

Chèn ảnh bằng thẻ <img>. Đây là một thẻ rỗng: nó không bọc nội dung nên không có thẻ đóng, mọi thông tin nằm ở thuộc tính. Hai thuộc tính quan trọng: src (đường dẫn tới file ảnh) và alt (chữ mô tả ảnh).

Người mới hay bỏ qua alt vì "ảnh hiện rồi cần gì chữ". Nhưng alt âm thầm làm ba việc quan trọng - một trong số đó là giúp Google hiểu ảnh nói gì:

Việc đầu tiên - phục vụ người khiếm thị - là một phần của a11y: web cho mọi người, thứ mèo con sẽ học thành một bài riêng ở phần sau khoá. alt chính là một trong những viên gạch a11y dễ làm nhất.

<img src="meo-ngu.jpg" alt="Mèo con đang ngủ trên bàn phím" />

• ▸img là thẻ rỗng: không có thẻ đóng, thông tin nằm ở thuộc tính.
• ▸src trỏ tới file ảnh; alt mô tả ảnh bằng chữ.
• ▸alt tốt cho SEO, cho người khiếm thị (screen reader đọc), và hiện thay khi ảnh lỗi.
• ▸Ảnh chỉ để trang trí thì đặt alt="" (rỗng) để máy đọc bỏ qua - đó là chủ ý.

Ảnh thường là thứ nặng nhất trên trang, nên đáng tối ưu. Hai thuộc tính của img giúp việc đó mà không cần JavaScript. Thứ nhất: srcset khai báo nhiều phiên bản cùng tấm ảnh ở các bề rộng khác nhau, để trình duyệt tự chọn cỡ hợp với màn hình - điện thoại tải ảnh nhẹ, máy tính tải ảnh nét.

<img
  src="meo-800.jpg"
  srcset="meo-480.jpg 480w, meo-800.jpg 800w, meo-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Mèo con đang ngủ trên bàn phím"
/>

Thứ hai: loading="lazy" bảo trình duyệt hoãn tải những ảnh nằm xa phía dưới cho tới khi người dùng cuộn gần tới. Trang nhiều ảnh nhờ vậy mở nhanh hơn hẳn. Lưu ý: ảnh quan trọng ngay đầu trang thì đừng lazy - để nó tải ngay.

<img src="meo-cuoi-trang.jpg" loading="lazy" alt="Mèo con vẫy tay tạm biệt" />

• ▸srcset: khai báo nhiều cỡ ảnh, trình duyệt chọn cỡ hợp màn hình (nhẹ cho điện thoại).
• ▸loading="lazy": hoãn tải ảnh nằm xa phía dưới tới khi cuộn gần tới.
• ▸Ảnh quan trọng ở đầu trang thì để tải ngay, đừng lazy.

Nhiều ảnh cần một dòng chú thích đi kèm. Mèo con có thể đặt một thẻ p ngay dưới ảnh, nhưng như vậy máy không biết dòng chữ đó thuộc về tấm ảnh nào. Cách đúng nghĩa: bọc ảnh và chú thích trong <figure>, rồi đặt dòng chú thích trong <figcaption>.

<figure>
  <img src="meo-di-hoc.jpg" alt="Mèo con đeo cặp tới trường" />
  <figcaption>Mèo con ngày đầu đi học</figcaption>
</figure>

Khác biệt tinh tế nhưng quan trọng: alt mô tả ảnh cho người KHÔNG thấy ảnh, còn figcaption là chú thích hiển thị cho MỌI người đọc. Hai thứ bổ sung cho nhau, không thay thế nhau.

• ▸figure bọc một hình (ảnh, biểu đồ…) như một khối độc lập.
• ▸figcaption là dòng chú thích gắn đúng vào hình đó.
• ▸alt mô tả cho người không thấy ảnh; figcaption là chú thích cho mọi người - khác nhau.

Web không chỉ có chữ và ảnh. Hai thẻ <audio> và <video> nhúng âm thanh và phim ngay trong trang. Thêm thuộc tính controls để hiện nút play, tạm dừng, âm lượng cho người dùng.

<audio src="meo-keu.mp3" controls></audio>

<video src="gioi-thieu.mp4" controls width="480">
  Trình duyệt của bạn không hỗ trợ video.
</video>

Để ý dòng chữ bên trong thẻ video: nó chỉ hiện khi trình duyệt không phát được video - gọi là nội dung fallback (phần dự bị, hiện ra khi cách chính thất bại). Tinh thần xuyên suốt khoá vẫn vậy: đánh dấu sao cho ai cũng tiếp cận được nội dung.