Những thẻ thiết yếu giúp HTML hoạt động đúng như mong đợi

• Để trang web hiển thị đúng như mong đợi trong trình duyệt, cần обязательно bao gồm một số thẻ HTML cơ bản
• `` đảm bảo kết xuất ở chế độ tiêu chuẩn, giúp tránh lỗi tính toán bố cục
• `` cung cấp thông tin ngôn ngữ, cải thiện khả năng truy cập, tìm kiếm và chất lượng dịch
• và lần lượt kiểm soát mã hóa ký tự và tỷ lệ hiển thị trên di động
• Những thẻ này không chỉ là yếu tố hình thức, mà là các thành phần cốt lõi để duy trì tính nhất quán của tiêu chuẩn web và trải nghiệm người dùng

---

Tổng quan về cấu trúc cơ bản và các thẻ thiết yếu của HTML

• Bài viết được lấy cảm hứng từ bài trình bày “Incantations that make HTML work correctly” của Alex Petros
  • Tác giả đã tổng hợp đoạn mã cơ bản luôn nên có khi mở trực tiếp một tệp HTML trong trình duyệt
  • Cấu trúc cơ bản được đưa ra làm ví dụ như sau

• Mỗi thẻ đều có vai trò giúp trình duyệt diễn giải và hiển thị HTML theo chuẩn
  • Nếu thiếu, trình duyệt có thể chuyển sang chế độ không chuẩn (quirks mode), hoặc phát sinh vấn đề như lỗi ký tự, thu nhỏ màn hình di động, v.v.

`` — khai báo chế độ tiêu chuẩn

• `` là khai báo chỉ thị trình duyệt kết xuất ở chế độ tiêu chuẩn (standards mode)
  • Nếu không có khai báo này, trình duyệt sẽ chuyển sang quirks mode để mô phỏng hành vi HTML phi tiêu chuẩn trong quá khứ
  • Kết quả là cách tính bố cục, kích thước và căn chỉnh sẽ thay đổi, gây ra các lỗi hiển thị ngoài ý muốn
• không phân biệt chữ hoa chữ thường, nên các dạng như hay `` đều được nhận diện
  • Tác giả còn đùa rằng “nếu muốn viết markup kiểu năm 1998 thì cứ viết in hoa”

`` — chỉ định ngôn ngữ tài liệu

• `` là thẻ khai báo ngôn ngữ mặc định của tài liệu
  • Thông tin này được nhiều công cụ như trình duyệt, công cụ tìm kiếm và trình đọc màn hình sử dụng
• Một số ví dụ sử dụng chính
  • Trình đọc màn hình chọn cách phát âm và ngữ điệu giọng nói phù hợp
  • Công cụ tìm kiếm cải thiện độ chính xác của lập chỉ mục và dịch thuật
  • Áp dụng các tính năng dựa trên locale như kiểm tra chính tả
• Dù bỏ qua thuộc tính ngôn ngữ có thể không gây vấn đề rõ ràng trên màn hình, các công cụ xung quanh vẫn có thể xử lý sai
  • Vì vậy nên khai báo rõ ràng ngay trong HTML
• Có thể truyền thông tin ngôn ngữ bằng header phản hồi của máy chủ, nhưng khi mở trực tiếp tệp cục bộ thì khai báo trong HTML an toàn hơn
  • Mã ví dụ

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — chỉ định mã hóa ký tự

• `` giúp trình duyệt nhận biết cách mã hóa ký tự của tài liệu
  • Nhờ đó các ký tự ngoài ASCII như é, ü, ñ, ©, ™, ®, …, 👍 được hiển thị chính xác
• Nếu không có thẻ này, các ký tự đặc biệt hoặc dấu ngoặc kép thông minh trong tài liệu có thể bị lỗi hiển thị
  • Tác giả lấy ví dụ trường hợp “smart quotes” bị lỗi trên blog của mình
• So sánh ví dụ
  • Khi không có ``: ký tự đặc biệt và emoji bị lỗi
  • Khi có thẻ này: mọi ký tự đều hiển thị bình thường
• Bài blog có đính kèm ảnh chụp màn hình so sánh hai trường hợp

`` — thiết lập viewport cho di động

• Thẻ này kiểm soát tỷ lệ màn hình và mức thu phóng trên trình duyệt di động
  • Nếu thiếu, trang sẽ bị thu nhỏ và hiển thị rất bé trên thiết bị di động
• Tác giả kể lại trường hợp “trên desktop thì trông ổn, nhưng mở trên di động thì mọi thứ đều quá nhỏ” như một ví dụ quên thẻ meta viewport
  • Tác giả cũng minh họa trực quan sự khác biệt bằng ảnh chụp màn hình so sánh bên trái (không có thẻ) và bên phải (có thẻ)
• Vì vậy, ngay cả với một nguyên mẫu đơn giản, bạn vẫn nên thêm thẻ này để giữ tỷ lệ bố cục như mong đợi

Kết lại — những điều cơ bản thật sự của HTML

• Ở cuối bài, tác giả đùa rằng mình đã “quên mất đoạn mã quan trọng nhất”
  • Ví dụ được đưa ra là đoạn mã sau

• Đây là cách nhắc đến mang tính châm biếm về cấu trúc ứng dụng dựa trên JavaScript vốn rất phổ biến trong phát triển web hiện đại
• Nhìn chung, bài viết nhấn mạnh rằng các thẻ nền tảng của HTML là yếu tố cốt lõi bảo đảm web hoạt động đúng theo tiêu chuẩn

[GN⁺]

Ý kiến Hacker News

• Một điều thú vị là HN và paulgraham.com đều không có khai báo DOCTYPE, nên được render ở Quirks Mode Có thể kiểm tra bằng document.compatMode trong công cụ dành cho nhà phát triển Tôi dùng một userscript để dễ sao chép văn bản của phần tử đang được hover, nhưng trong Quirks Mode thì nó hoạt động không ổn định Có thể ép chuyển bằng document.write("" + document.documentElement.innerHTML), nhưng cách này sẽ reset toàn bộ tài liệu và gây ra vấn đề Tôi tự hỏi liệu từ phía người dùng có cách nào sạch sẽ hơn để ép sang Standards Mode hay không
  • Mong dang cải thiện một chút về tính khả dụng của HN Cỡ chữ mặc định tầm 12px nên trên hầu hết thiết bị hiện đại nhìn quá nhỏ Có vẻ CSS cũng vẫn dùng mã cũ được công khai khoảng 13 năm trước
  • Có thể giải quyết bằng bộ lọc uBlock Ví dụ: `||news.ycombinator.com/*$replace=/

[ahwjdekf]

Nếu là bắt buộc thì tại sao lại không hoạt động mặc định nhỉ? Dù sao thì web đúng là kỳ lạ thật. Cách tư duy cũng khác người nữa.

[dongho42]

Có lẽ là vì khả năng tương thích ngược? Nếu cứ thay đổi hẳn cách hoạt động mặc định thì những thứ trước đây vẫn chạy tốt có thể sẽ bị hỏng.