Phần tử HTML5 chính xác cho một hộp thoại phương thức

Question

Tôi đã tự hỏi một số nhà phát triển/nhà thiết kế web của tôi cảm thấy là yếu tố HTML 5 tốt nhất để sử dụng cho hộp thoại phương thức như hộp đèn, siêu hộp, hộp đèn hoặc bất kỳ thứ gì bạn thích hương vị có thể xảy ra.

Vì các loại giao diện người dùng này không tuân theo quy trình điển hình của trang web 'bình thường' (rõ ràng, theo chuyên gia HTML 5, về cơ bản, một blog), chúng không thực sự rơi vào vị trí giống như một số <header>, <nav>, <section>, <article> hoặc <footer> (trong số các phần tử 'ngữ nghĩa' mới khác) có thể.

Tất nhiên, luôn có <div>, nhưng, tôi chỉ nghĩ rằng có thể có điều gì đó về mặt ngữ nghĩa hơn một chút.

Thật không may, không có yếu tố <modal>. Suy nghĩ của bạn về việc liệu có nên có một trong spec? Và vì yếu tố không tồn tại, nên lựa chọn tốt nhất tiếp theo của bạn là gì?

Answer 1

<aside> có vẻ phù hợp. Spec hiện với các bộ phận liên quan được in đậm:

Yếu tố sang một bên đại diện cho một phần của một trang có chứa nội dung đó là tiếp tuyến liên quan đến nội dung xung quanh các yếu tố sang một bên, và mà có thể được coi là riêng biệt từ nội dung đó. Các phần như vậy là thường được biểu diễn dưới dạng thanh bên trong kiểu chữ in.

Yếu tố có thể được sử dụng cho tác đánh máy như dấu ngoặc kép kéo hoặc sidebars, quảng cáo, cho nhóm của các yếu tố nav, và cho nội dung khác được coi là riêng biệt từ nội dung chính của trang.

Trong trường hợp này, một phương thức "liên quan tiếp tuyến" với hành động gây ra. Mặc dù thông thường bạn có thể mong đợi một bên trong thanh bên, một trong những mục đích của nội dung ngữ nghĩa là để cho phép tính linh hoạt không bị giới hạn bởi các đặc điểm trang vật lý. Cụm từ cuối cùng của spec có vẻ hàm ý chỉ là trường hợp sử dụng linh hoạt này.

Answer 2

Bản nháp hiện tại của HTML có phần tử dialog. Nó đã được gỡ bỏ tại một thời điểm nhưng nó trở lại.

Yếu tố thoại đại diện cho một phần của một ứng dụng mà người dùng tương tác với để thực hiện một nhiệm vụ, ví dụ như một hộp thoại, thanh tra, hoặc cửa sổ.

Để truy cập (cho đến khi phần tử được hỗ trợ rộng rãi hơn), tôi cũng sẽ bao gồm dialog ARIA role.

Để nhận JavaScript API trong trình duyệt không hỗ trợ nguyên tố <dialog>, bạn có thể sử dụng polyfill.