Bài đăng blog chứa mọi phần tử HTML

 (patrickweaver.net)
5 điểm bởi GN⁺ 2023-08-14 | 1 bình luận | Chia sẻ qua WhatsApp
  • Khi học về khả năng truy cập web, Patrick Weaver đã thử nghiệm HTML ngữ nghĩa bằng cách áp dụng hơn 100 thẻ HTML vào một trang thực trên website cá nhân xây bằng Eleventy
  • Mục tiêu ban đầu là để sau này khi viết bài không bị chậm lại vì CSS của những phần tử lạ, nhưng để hoàn thành riêng bài này anh đã mất một năm rưỡi
  • Dựa trên danh sách phần tử HTML của MDN Web Docs, anh rà soát lại các phần tử cấu trúc như , , , , ,
  • Các phần tử ít quen thuộc hơn như , , , , , cho thấy những trường hợp dùng cụ thể như hướng văn bản, ký âm phát âm, đầu ra chương trình, xuống dòng, tương tác, và web component
  • Giữa ý nghĩa của HTML và cách triển khai thực tế vẫn còn dấu vết của tính tương thích, thể hiện qua hỗ trợ trình duyệt, static site generator, phát video trên Safari, hay hành vi của các thẻ deprecated

Điểm khởi đầu của thử nghiệm và mục tiêu

  • Sau khi học thêm về khả năng truy cập web, anh bắt đầu xem xét những phần tử HTML ít được dùng và đưa chúng vào website cá nhân
  • Website được tạo bằng Eleventy, và phần thân bài viết trên blog được bọc bằng , đồng thời thêm vào template layout
  • Anh đã chỉnh sẵn style cho và để làm chú thích ảnh, đồng thời cũng hứng thú với việc triển khai footnote hoặc sidenote liên quan đến Recurse
  • Dựa trên danh sách phần tử HTML của MDN Web Docs, anh quyết định thử dùng mọi phần tử trong một bài viết
    • Mục tiêu là để sau này khi viết bài sẽ không bị trì hoãn cập nhật CSS vì gặp một phần tử chưa từng dùng trước đó
    • Nhưng trên thực tế, chỉ để sửa style và template cho riêng bài này đã mất một năm rưỡi
  • Có những phần tử như `` rất khó đặt trực tiếp vào nội dung bài, nhưng khi xem trên patrickweaver.net thì chúng được bố trí sao cho ở đâu đó trên trang vẫn có đủ mọi phần tử

Các phần tử cấu trúc tài liệu và metadata

  • `` không cần thay đổi gì đặc biệt, nhưng anh nhận ra mình không phải lúc nào cũng nhớ gắn thuộc tính lang như lang="en"
  • Trước khi viết bài này anh chưa quen với ``, và sau đó đã thêm nó vào template layout cùng các liên kết tương đối
    • Có phát sinh một vài vấn đề với phát triển local và liên kết tương đối, nhưng được giải quyết dễ dàng
    • , , , , `` là những phần tử anh đã quen và website vốn đã có sẵn
  • Khi đọc tài liệu về ``, anh gặp các thuộc tính như onbeforeprint, onblur
    • onbeforeprint liên quan đến một tính năng mà trước đây anh từng xử lý bằng cách vòng vèo hơn
    • onblur thì có vẻ chủ yếu dùng cho những popup gây khó chịu

Các vùng nội dung và phân cấp tiêu đề

  • Anh từng nghĩ `` chỉ dành cho địa chỉ thư tín, nhưng rồi biết rằng nó cũng có thể dùng cho địa chỉ email và liên kết
  • Template bài blog đã áp dụng ``, và sau khi đọc tài liệu anh cân nhắc liệu nó có thể phù hợp với mọi trang trên website hay không
  • Vùng footnote dùng ``
    • `` biểu thị phần có liên quan gián tiếp đến nội dung chính của tài liệu
    • Điều này để ngỏ khả năng sau này style nó giống sidenote hơn
  • Thiết kế website ban đầu không có ``, nhưng anh thêm nó vào bài này
  • Trước đây anh chỉ dùng `` ở đầu trang, nhưng sau khi xác nhận có thể dùng nhiều cái, anh áp dụng nó cả cho vùng header của từng bài blog
  • Anh cũng sắp xếp lại phân cấp tiêu đề
    • Trước kia anh dùng tên website là , tên mục là , tiêu đề bài là ``
    • Sau khi đọc tài liệu và mẹo từ W3C, anh đổi cách dùng để tùy theo trang mà đối tượng của `` thay đổi, còn style thì xử lý bằng class
    • Anh cho rằng cách này phù hợp hơn với việc tách bạch mối quan tâm giữa HTML và CSS
  • Sau khi bắt đầu thử nghiệm vào đầu năm 2022 và trước khi công bố vào mùa hè 2023, và đã được thêm vào tài liệu MDN
    • được dùng để nhóm tiêu đề phần với phụ đề
    • `` là phần tử ngữ nghĩa biểu thị ô nhập tìm kiếm chứ không phải kết quả tìm kiếm
    • Vì đây là website tạo tĩnh nên không có kết quả tìm kiếm từ server, ví dụ cần JavaScript
    • Tính đến 2023, anh không thấy `` trong ô tìm kiếm của MDN hay cả trên google.com
  • là một trong những tò mò ban đầu khiến anh bắt đầu cuộc khám phá này, và sau khi đọc danh sách MDN anh đã thêm vào menu trên cùng
  • Anh cũng đưa `` vào bài, nhưng khi viết trộn Markdown với HTML thì khó duy trì rõ ràng cấu trúc lồng nhau về mặt thị giác, nên chưa chắc sẽ dùng thường xuyên ở nơi khác

Những quan sát từ các phần tử nội dung văn bản

  • Trước đây anh từng dùng `` cho nhúng tweet, nhưng trong bài này anh thêm style cho trích dẫn độc lập
    • Trước khi đọc kỹ tài liệu, anh chưa biết tới thuộc tính cite của và phần tử
  • , , là những phần tử anh biết khá muộn, và anh thấy lạ khi lại tương đối ít được biết tới hơn so với và
    • và có margin mặc định, còn thì margin nằm ở
  • `` có tiếng xấu trên web hiện đại vì bị lạm dụng, nhưng ban đầu ở website này nó được dùng khá ít
    • Khi xuất hiện thêm những phần tử muốn style cùng, con số tăng lên khoảng 20
    • Điều đó cho thấy với một website không có nhiều “section” theo nghĩa thông thường thì nhiều `` có thể là không cần thiết
  • và là những phần tử đầu tiên được thêm vào khi anh chuyển bài từ Medium sang để biểu đạt chú thích ảnh theo cách ngữ nghĩa hơn
    • Theo tài liệu, `` không chỉ dùng cho ảnh mà còn có thể dùng cho minh họa, sơ đồ, hay đoạn mã
    • Anh cho rằng hiện có khá nhiều khối mã cũng có thể dùng ``
  • Khi đọc tài liệu nói rằng `` được định nghĩa là phân tách ngữ nghĩa chứ không phải đường kẻ ngang mang tính thị giác, anh đã xem lại style của nó
    • Anh thêm emoji bằng hr:after, nhưng cần kiểm tra cách screen reader xử lý
  • là phần tử anh mới gặp lần đầu, và anh ngạc nhiên vì nó vẫn tồn tại đến tận HTML5 dù trình duyệt gần như đối xử nó như
  • Tài liệu về `` có ít hướng dẫn hơn anh mong đợi, và để lại câu hỏi rằng một đoạn văn bản không dài thì có “thật sự là một đoạn văn” hay không
  • Trước đây anh chỉ nghĩ `` dành cho code block, nhưng rồi xác nhận được rằng nó cũng có thể dùng để biểu thị khoảng trắng có ý nghĩa

Các phần tử ngữ nghĩa văn bản inline

  • Anh từng dùng [link](#) như kiểu placeholder, nhưng thực ra nó là liên kết đưa lên đầu trang
  • `` được MDN mô tả là “dành cho sự tiện lợi của tác giả”, nên có vẻ là thẻ ít có khả năng được dùng nhất
  • Sự khác nhau giữa và không giống với cách hiểu trước đây của anh rằng trong HTML5 thì thay thế
    • Về quy tắc thực dụng, anh tạm kết luận sẽ chủ yếu dùng ở mức từ, còn ở mức câu hoặc cụm từ
    • Đây là một kinh nghiệm thực tế để đơn giản hóa phân biệt thật sự
  • `` là phần tử xử lý văn bản có thể có hướng khác với văn bản xung quanh
    • Ví dụ thường là tên riêng, nhưng anh cho rằng nó cũng áp dụng được cho văn bản Unicode do người dùng nhập ngẫu nhiên
    • Sau này anh định bọc các thẻ có thể chứa dữ liệu nhập tùy ý bằng ``
  • `` có vẻ sẽ ít dùng vì anh không thường xuyên làm việc với ngôn ngữ RTL, nhưng biết cách xử lý một ít văn bản RTL vẫn hữu ích
  • từng có thời bị lạm dụng giống `` trong quá khứ, nhưng anh cho rằng với CSS mạnh hơn thì điều đó giờ ít xảy ra hơn
    • Việc tài liệu lấy ví dụ là thơ khiến anh tò mò ranh giới giữa đoạn văn và dòng độc lập đã được cân nhắc thế nào
    • Trong một số trường hợp thì `` có thể phù hợp hơn
  • và dùng để biểu đạt lại bằng phần tử ngữ nghĩa HTML những ý nghĩa mà nhiều ngôn ngữ vốn đã thể hiện bằng dấu câu nhìn thấy được
    • Style mặc định của là in nghiêng, còn thì thêm dấu ngoặc kép không có trong văn bản
  • được dùng rất nhiều xuyên suốt bài viết, và anh tự hỏi hỗ trợ Markdown của Google Docs có dùng không, nhưng khi xem HTML tài liệu thì hiện Google Docs render bằng ``
  • `` có ví dụ MDN gắn ID sản phẩm vào value của tên sản phẩm nên anh khó hình dung trường hợp dùng thực tế
    • Nếu đó là ID người dùng cần nhìn thấy thì nên hiển thị ra, còn nếu là ID người dùng không thấy thì không rõ dữ liệu ấy phục vụ ai
    • Anh xác nhận `` không xuất hiện trong W3C HTML5 specification
  • `` không phải là chính định nghĩa mà là phần tử bọc thuật ngữ nằm trong định nghĩa, nên anh thấy cái tên hơi kỳ
    • Anh kết luận có vẻ nó chỉ xuất hiện trong đề xuất HTML 2.0 chưa từng được chấp nhận chính thức
  • và cũng khiến anh phải suy nghĩ về tiêu chí sử dụng giống như và
    • Quy tắc thực dụng anh chốt là đa phần dùng cho từ, cho câu hoặc cụm từ
    • Ví dụ trong tài liệu thường dùng `` để thu hút sự chú ý tới biểu đạt có thể gây nhầm lẫn
  • `` dành cho việc chỉ định phím trên bàn phím, nhưng anh tò mò ranh giới liệu nó có hợp với thao tác như “Right click” hay không
  • `` trông như dấu vết của một web hai chiều nơi người dùng có thể đánh dấu bằng bút dạ quang như trong sách
  • , , `` được dùng trong typography Đông Á để cung cấp thông tin phát âm, dịch nghĩa, hoặc phiên âm
    • `` dùng để ẩn các ký tự ngoặc có trong mã nguồn
  • `` là phần tử gạch xóa cho văn bản trước đây đúng nhưng nay không còn chính xác hoặc không còn liên quan
    • Nó bị deprecated trong HTML 4.01 rồi được định nghĩa lại về ngữ nghĩa trong HTML5
    • Một số screen reader không thông báo gạch xóa nên có thể gây nhầm lẫn, và anh đã thêm CSS được MDN khuyến nghị vào website
  • dùng để hiển thị đầu ra của chương trình, và anh đã cập nhật bài viết về Raspberry Pi trước đây từ sang ``
  • `` dùng để render chữ nhỏ, nhưng anh cho rằng phần lớn trường hợp vẫn sẽ tiếp tục dùng CSS
  • Khi đọc tài liệu về , đây là lần đầu anh thắc mắc vì sao người ta cho phép những style có vẻ mâu thuẫn như hay ``
  • và có thể trước đây anh từng dùng bản triển khai bằng CSS, nhưng ở đây anh áp dụng cho ví dụ footnote và công thức toán
  • `` có vẻ hữu ích cho HTML ngữ nghĩa nên anh áp dụng vào ngày tháng của bài blog
    • Anh cũng quan sát rằng ngay cả kết quả tìm kiếm của Google dường như không dùng ``
  • `` là phần tử mà MDN cảnh báo khá mạnh rằng “trong hầu hết trường hợp bạn sẽ không thực sự muốn dùng”, và công dụng được khuyên chính dường như là đánh dấu lỗi chính tả
  • biểu thị ngữ nghĩa cho chuỗi biến trong toán học hoặc lập trình, và anh dùng cùng trong ví dụ định lý Pythagoras
  • `` giải quyết vấn đề xuống dòng tại điểm xác định trong các từ dài, đặc biệt là URL
    • Khi chèn break point vào URL dài, việc xuống dòng sẽ dễ đọc hơn theo từng độ rộng màn hình
    • Ngay cả khi có thêm dấu gạch nối vào URL thì trên trình duyệt hiện đại cũng tạo ra break point rõ ràng
    • Các URL không có điểm xuống dòng được bọc riêng trong `` có thể cuộn để tránh phá vỡ layout

Hình ảnh, multimedia, embed

  • và là những phần tử anh chưa quen dù trước đây từng làm website kiểu image map
    • Việc công cụ debug đường viền `` khó dùng cũng cho thấy ngày nay chúng không còn được dùng nhiều
    • Khi tab focus thì chỉ thấy đường viền của từng `` một, còn styling thì không hoạt động
    • Anh xem như một có hình dạng
  • `` là thẻ multimedia tiêu biểu của HTML5 nên anh đã từng dùng, nhưng anh ngạc nhiên vì trong thập niên 2020 nó lại không xuất hiện thường xuyên như mong đợi
    • Trình phát Bandcamp là tổ hợp UI tùy biến của , , , nhưng vẫn dùng ẩn bên dưới
  • Với ``, anh xem kỹ lại thuộc tính srcset
    • Anh tạo demo cung cấp 3 ảnh khác nhau theo từng độ rộng màn hình
    • Vì cache trình duyệt và scaled display ảnh hưởng đến hành vi, để thấy hiệu quả có thể cần private window và màn hình non-scaled hoặc non-retina
  • và ít được dùng rộng rãi hơn ``, và anh cho rằng video online phần lớn đã bị tập trung vào YouTube
    • Còn audio thì phân tán hơn dưới dạng các tệp riêng như podcast
  • `` có một vài hạn chế
    • Khi tạo bằng self-closing tag thì nó không render
    • Safari vào thời điểm viết có thể không hỗ trợ video trên server phát triển vì server không hỗ trợ request header “Range”
    • Anh tò mò liệu phiên bản được host trên GitHub Pages có phát được trên Safari hay không
    • Vấn đề với `` là do build Eleventy không cấu hình đúng tệp .vtt
  • và vẫn chưa bị deprecated dù nhiều công dụng của chúng đã được thay bằng các thẻ chuyên biệt như và, điều này khiến anh ngạc nhiên
  • vẫn giữ cái tên kiểu thập niên 90 là “inline frame”, còn thì bị deprecated trong HTML5
    • Anh cũng xác nhận rằng nó được render với display: inline
  • và được thiết kế để chuyển đổi các phiên bản ảnh trong các tình huống khác nhau
    • Anh làm ví dụ hiển thị biểu tượng máy tính với chuột/trackpad, biểu tượng điện thoại với touchscreen, còn nếu không thuộc cả hai thì dùng ảnh fallback
  • `` có vẻ là một phần tử thử nghiệm liên quan đến xem trước liên kết kiểu iPad và lợi ích hiệu năng như SPA
    • Tính đến 2023, chưa có trình duyệt nào bật mặc định
    • Có vẻ từng có cờ thử nghiệm trong Chrome trước đây, nhưng đến 2023 thì không còn dùng được trong chrome://flags
    • Nó có vẻ không nằm trong HTML 5 Spec, và anh không chắc vì sao lại có trong tài liệu MDN

SVG, MathML, scripting

  • Anh thấy thú vị khi tài liệu MDN nhóm và cùng nhau
    • `` được dùng rộng rãi vì có thể dễ dàng prototype và export nhờ các công cụ như Figma và Sketch
    • `` thì có vẻ hiếm hơn nhiều
  • `` được dùng trong ví dụ tự vẽ một hình tròn
  • Anh xem `` như một wrapper bọc các phần tử không phải HTML thuộc namespace MathML, và chỉ đưa vào một công thức đơn giản
  • Năm 2020 tại Recurse Center, anh từng đào khá sâu vào vấn đề vẽ đường nét sắc trên ``
    • Qua tài liệu MDN anh mới biết mỗi trình duyệt có giới hạn kích thước tối đa cho ``
    • Trên trình duyệt hiện đại, mỗi chiều vào khoảng 32.000 pixel
    • Anh dựng lại một giả bằng, ,
  • Anh không ngờ `` lại là phần tử dễ tạo cảm giác cũ kỹ, nhưng khi viết bài thì nhận ra mình hiếm khi trực tiếp dùng nó
    • Phần lớn JavaScript được build tool gói lại và chèn vào một thẻ ``
    • Vì vậy `` tạo cảm giác giống boilerplate hơn là một thẻ markup
  • Anh cho rằng `` là phần tử mình chưa đưa vào đủ trên các website có tính tương tác
    • Đặc biệt với SPA đã minify/compile, nếu không có `` thì người dùng có thể chỉ thấy một trang trống
    • Trong bài này, anh thêm đi cùng mọi thẻ

Đánh dấu chỉnh sửa, bảng, form, tương tác

  • và là những phần tử anh lần đầu biết tới khi đọc tài liệu MDN, và chúng trông như kiểu phần tử dùng trong trình xử lý văn bản
    • Anh cũng nghĩ đến cách Google Docs render, nhưng rồi xác nhận rằng nó lại render bằng ``
  • `` từng bị lạm dụng để làm layout ở web thời kỳ đầu, nhưng anh thấy mỉa mai là trong web hiện đại, khi dữ liệu nhiều hơn, nó lại tương đối hiếm
    • Anh nêu lý do là giao diện mặc định của nó khá thô, và vì dữ liệu lưu trong bảng cơ sở dữ liệu thường được giao diện web trình bày theo góc nhìn khác
    • Bản thân bài viết là tài liệu nên không có dữ liệu bảng thật, nhưng anh đã thêm một bảng ví dụ dùng dữ liệu emoji có thể dựa trên bộ emoji của Apple năm 2023
    • và là những phần tử anh chưa biết trước đó, và anh cũng không chắc liệu mình sẽ dùng chúng thường xuyên hơn so với thiết kế không phải `` tùy biến hay không
  • `` và các phần tử liên quan thường được anh dùng khi submit sẽ chuyển sang trang mới, nhưng chúng cũng hợp lệ cho tương tác người dùng ngay trong trang
    • Anh cho rằng về mặt accessibility thì các phần tử form có lẽ là quan trọng nhất, và sau này khi triển khai sẽ tham khảo tài liệu kỹ hơn
  • và thường được nêu như ví dụ “làm được mà không cần JavaScript”
    • Kiểu UI mở/đóng này trước đây là một trong những thứ đầu tiên anh từng làm bằng JavaScript hoặc jQuery, nên việc HTML vài thẻ là đủ khiến anh thấy thú vị
    • Anh đoán nếu được đề xuất trong spec HTML ngày nay thì có lẽ nó sẽ bị rút lại vì có thể bị thay bằng hiệu ứng tương tự bằng CSS
  • `` là phần tử mà anh không hề biết là có sẵn chỉ bằng HTML
    • Để hữu ích hơn là hiệu ứng style đơn thuần thì vẫn cần JavaScript
    • Nó là cách đơn giản để tạo tương tác tùy biến hơn alert() mà vẫn có thể style bằng CSS

Web component và các phần tử deprecated

  • Web component từ lâu đã nằm trong danh sách những thứ anh cần học thêm, nên anh rất vui khi nhân dịp này đọc phần đó trên MDN

  • Việc render web component cần JavaScript và cú pháp Class là điều khiến anh bất ngờ

    • Sau khi đọc thêm về Shadow DOM, anh thấy điều đó hợp lý vì HTML không có cơ chế đóng gói style tích hợp sẵn
    • Về mặt khái niệm, anh thấy nó hơi giống ``

  • Anh dùng web component để tạo mục lục của bài bằng và

    • Anh không nhanh chóng tìm ra cách truyền property để dùng như thuộc tính của phần tử template con giống component trong frontend framework
    • Anh truyền toàn bộ phần tử `` cho từng phần tử con để đặt đúng href bên trong `

  • `

  • Anh cũng đưa các phần tử HTML deprecated vào cuối bài

    • , , , , `` là ví dụ cho những chức năng liên quan đến layout đã được chuyển sang CSS
    • và từng là một phần của spec web component nhưng không được triển khai đầy đủ nên anh không thể hiện thực thật
    • trông như kiểu máy chủ web để liệt kê thư mục, và anh dùng nó trong ví dụ danh sách thư mục của một static site Eleventy

  • và được thiết kế để dùng thay cho , nên khó chèn trực tiếp vào nội dung bình thường và anh chỉ dùng chúng bên trong

  • Vì MDN nói `` không phải là một phần của specification chính thức, anh đoán nó sẽ không hoạt động, nhưng tới 2023 thì trên một số trình duyệt nó dường như vẫn chạy

    • Anh cho rằng có thể đây là fallback để tránh nhầm với ``

  • `` được nói là có hỗ trợ một phần trên Firefox 8~84, nhưng ngay cả với phiên bản cũ cài local anh cũng không làm ví dụ chạy được

  • khá giống một dạng fallback như, nhưng lại bị deprecated, trong khi `` vẫn còn trong spec khiến anh thấy bất ngờ

  • Anh không rõ vì sao lại là một phần tử riêng thay vì chỉ là thuộc tính

    • Khi bắt đầu bài viết, nó còn nằm trong mục “Embedding Content” của MDN, nhưng đến khi kết thúc thì đã bị deprecated

  • Trong số các phần tử deprecated, `` nổi bật ở chỗ nó thực sự vẫn hoạt động

    • Nếu dùng nguyên trạng thì các trang phía sau sẽ bị render như mã nguồn, nên anh bọc nó trong ``

  • và có thẻ đóng nên có thể dùng trong thân bài để hiển thị source code hoặc văn bản monospace kiểu teletype

  • và từng dùng để ghi chú phát âm cho ký tự Đông Á, nhưng anh kết luận rằng spec dường như đã được đơn giản hóa

  • Anh cũng thêm `` sau khi kiểm tra các danh sách thẻ HTML khác, dù nó không có trong danh sách MDN

  • Trong danh sách cũ từ năm 2013 của MDN có các phần tử như , , ,

    • `` hiện bị hầu hết trình duyệt bỏ qua vì lý do accessibility
    • `` không hoạt động trên trình duyệt hiện đại và là loại chức năng nên xử lý bằng CSS
    • `` gợi ý về một tầm nhìn web tài liệu thiên về multimedia hơn
    • `` trông như một phần tử đến từ thế giới không có JavaScript

  • Anh cũng nhắc tới ``, nhưng không thử

  • Anh phát hiện ra khá muộn rằng HTML không có triển khai native cho footnote

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-08-14
Các ý kiến trên Hacker News

  • Có vẻ tác giả còn quá trẻ để nhớ đến frame :) Tôi chỉ định liên kết bài Wikipedia (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)), nhưng phần giải thích cũng không hay lắm Khi web thời kỳ đầu trở nên phổ biến, frame thường được dùng cho menu, sidebar, header luôn hiển thị, v.v.; kiểu bố cục hay gặp là header cố định ở trên, sidebar bên trái và frame nội dung ở giữa Mỗi frame hoạt động khá độc lập, chẳng hạn có lịch sử lùi/tiến riêng, nên mặc định liên kết đôi khi chỉ thay đổi frame đó. Vì vậy nút quay lại, tiến tới, làm mới trở nên không trực quan; nếu nội dung sai bị tải vào một frame thì rất khó khôi phục ngoài việc vào lại từ đầu May là CSS đã thay thế hầu hết các cách dùng chính của frame, vì từ góc nhìn người dùng, frame thật sự rất khổ sở khi phải xử lý

    • Một cách dùng frame mà tôi nhớ là các site chỉ mục của những site khác. Có nhiều liên kết ở sidebar bên trái, còn site tương ứng mở trong frame bên phải Vào thời chưa có tab trình duyệt, đây là một công dụng khá ổn; duyệt danh sách liên kết trong các frame của một cửa sổ vẫn tốt hơn việc nhảy qua lại trong lịch sử hoặc quản lý nhiều cửa sổ
    • Eric Meyer, ông vua CSS, đến giờ vẫn giữ tài liệu tham chiếu CSS cũ của mình dưới dạng trang frame: https://meyerweb.com/eric/css/references/css1ref.html
    • Website đầu tiên tôi làm trên GeoCities hồi thập niên 90 cũng dùng frameset, và đúng là bố cục như đã nói ở trên
    • https://tintara.tripod.com/FramesSuck.html
    • và giờ không chỉ đơn giản là không được khuyến nghị nữa, mà đã là phần tử bị loại bỏ từ lâu: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Dù có được nhắc qua, tôi vẫn thấy thật vô lý khi đến giờ vẫn chưa có một khai báo CSS chuẩn, đơn giản để ẩn khỏi màn hình nhưng vẫn để lại cho screen reader Những gì tôi từng thấy đến nay vẫn chỉ là dùng clip, đẩy nội dung ra ngoài trang, hoặc các mẹo tương tự. Tôi không hiểu vì sao chuyện này không phải là một giá trị thay thế của display hoặc một thuộc tính bổ sung Thuộc tính speak, về lý thuyết, từng lơ lửng trong một trong các mô-đun CSS, nhưng theo tôi biết thì gần như không có implementation nào áp dụng

  • Nói về phần tử mà người viết thấy khó hiểu: **HTML 5.2** đã bị W3C khai tử vào năm 2021 và được thay thế bằng WhatWG HTML Living Standard Khác với HTML 5.2, chuẩn WhatWG không loại bỏ mà định nghĩa lại nó là “một thanh công cụ ở dạng danh sách không thứ tự gồm các phần tử li, biểu thị các lệnh mà người dùng có thể thực hiện hoặc kích hoạt” Danh sách phần tử và thông tin phiên bản HTML trên Wikipedia có vẻ đã cũ ở điểm này, và vẫn còn sống. Tuy vậy, xét lịch sử từng bị đánh dấu không khuyến nghị nhiều lần và việc các trình duyệt gần đây cũng từng lúng túng trong việc gán đúng ngữ nghĩa, hầu như lúc nào dùng kèm vai trò ARIA phù hợp (toolbar, menu, menubar) cũng tốt hơn

  • Lý do hầu hết các phần tử này không được dùng rộng rãi là vì chúng hoặc là những nỗ lực cũ nhằm giải quyết các vấn đề không còn tồn tại, hoặc như tác giả cũng thừa nhận, có thể giải quyết tốt hơn bằng CSS, hoặc phụ thuộc quá nhiều vào implementation của trình duyệt Ví dụ, khi và xuất hiện trên tất cả các trình duyệt cập nhật thường xuyên, tôi đã kỳ vọng nhiều, nhưng để mở ra bằng hiệu ứng trượt như hướng dẫn người dùng thay vì bung nội dung đột ngột thì vẫn cần JavaScript. Implementation tốt nhất tôi từng thấy dùng WAAPI, còn Safari thì thậm chí thêm cả pseudo-element riêng

    • Không cần JavaScript thì animation trượt vẫn có thể làm được, nhưng khi đóng thì không đẹp lắm, còn khi mở thì ổn: https://codepen.io/dada1smo/pen/LYydWBg Không phải code của tôi; tôi tìm thấy nó trong phần bình luận của một liên kết css-tricks
    • trước đây là thẻ định dạng, nhưng trong HTML5 đã trở thành thẻ cho **chú thích chữ nhỏ (fine print)**.[1] Các thẻ thuần định dạng như đã bị đánh dấu không khuyến nghị và biến mất từ lâu [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

  • Có thể lồng các thẻ /. Có lần tôi dùng thứ này để làm một game phiêu lưu lựa chọn rồi đưa lên intranet của công ty Tôi có một script sinh để ghép các mảnh lại với nhau, còn phần văn bản thực tế chỉ dài vài trang, vậy mà HTML thành 5MB. Hôm đó tôi đã làm hỏng rất nhiều trình duyệt và cuối cùng phải xóa nó

    • Nghe thú vị nhưng tôi chưa hiểu lắm. Việc lồng details/summary dẫn đến HTML 5MB như thế nào, và nó làm hỏng nhiều trình duyệt ra sao? Muốn nghe thêm

  • Nhớ lại khoảng năm 1995, khi tôi mới học HTML. Có ai còn nhớ Barebones Guide to HTML của Kevin Werbach không? Đó là một site liệt kê hầu như mọi thẻ HTML và vai trò của chúng. Chỉ cần tài liệu đó, một trình soạn thảo văn bản và phiên bản đầu của Netscape Navigator là có thể học và thử nghiệm ngay

  • Vài ngày trước, khi cố làm một AI agent duyệt web, tôi đã sốc khi thấy bình luận Hacker News được triển khai bằng bảng trong bảng trong bảng

    • Biết được điều đó lại làm tôi vui. Tôi đã tạo userContent.css để HN dễ đọc hơn, giới hạn chiều rộng phần nội dung, đặt line-height là 1.5em và thêm khoảng cách phía trên cho mọi đoạn văn Giờ tôi không còn phải khổ sở đọc HN với 250 ký tự trên một dòng trong trình duyệt rộng nữa. Mỗi đoạn văn dễ đọc hơn, và ranh giới giữa các đoạn cũng rõ hơn so với chỉ dùng giãn dòng

  • HTML ngữ nghĩa có tiềm năng rất lớn. Cá nhân tôi thích kiểu đặt chú thích cuối bài ở lề phải bằng phông chữ nhỏ hơn hoặc bán trong suốt, và nếu cần thì gắn thêm phần tử mở rộng / Nhưng để thật sự triển khai những kiểu như vậy, lần nào cũng có vẻ phải biết CSS khá chi tiết thì mới chạy đúng

  • Trước hết, đây thật sự là một cách học rất hay và là một bài luyện tập tốt Việc tác giả nhìn vào những phần tử cũ kỹ, nay không còn dùng nữa — những thứ ngày xưa bỗng nhiên có thể dùng được nên rất phấn khích — rồi đoán công dụng của chúng cũng khá thú vị Tuy nhiên, với tư cách là người đã viết tay mọi phiên bản HTML kể từ sau Mosaic, tôi không thích việc MDN đổi tên hồi tố kiểu như description list. Tôi thích definition list trong đặc tả gốc hơn Với tôi, nghĩ về dl, dt, dd lần lượt là “danh sách định nghĩa”, “thuật ngữ được định nghĩa”, “định nghĩa” thì tự nhiên hơn. description đúng là một từ rộng hơn definition, nhưng nếu xem là definition list thì dễ nhớ rằng trong dl có thuật ngữ (dt) và định nghĩa (dd) W3 cũng gọi là definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • Bạn đã từng thấy trường hợp nào trong thực tế đi tới tận `` chưa?

    • Có. Công việc kỹ thuật đầu tiên của tôi là ở một agency marketing siêu địa phương, và phần lớn thời gian tôi dùng để cập nhật menu nhà hàng và thông tin bán hàng cho các cửa hàng nhỏ trong khu vực Menu nhà hàng thường có phân cấp sâu đến vô lý, vì nhiều nhà hàng tạo ra quá nhiều món. Để hiển thị đúng mozzarella sticks và arancini, đôi khi cần một phân cấp kiểu Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy
    • Có. Nó xuất hiện trong đặc tả hoặc các tài liệu kỹ thuật khác. Ví dụ chính đặc tả HTML[1] là như vậy [1]: https://html.spec.whatwg.org/#link-type-next
    • Đây là một trong những điều gây khó chịu. Tôi không hiểu tại sao lại giới hạn ở 1~6, mà không cho phép một thuộc tính để chỉ định kích thước tùy ý
    • Tôi từng làm phiên bản web cho một cuốn sách đồ sộ do giáo sư cũ kiêm sếp của tôi viết; chắc chắn đã dùng 6 cấp tiêu đề, và có khi còn cần nhiều hơn nữa