The 3 content windows of HTML

A window conveys the content of a web document to users. There are 3 kinds of windows and only one can be active at a time. The active window bounds user interactions only to its content.

The 3 kinds of content windows in HTML are:

The 2 HTML elements and 1 ARIA value that create the 3 content windows are as follows:

body element

The body element specifies the primary window. It is the active window by default.

The syntax expects the following:

<body>
  <!-- 0 or more flow elements -->
</body>

dialog element

A dialog element specifies a secondary window a user may initiate.

The syntax expects the following:

<dialog>
  <!-- 0 or more flow elements -->
</dialog>

open attribute

The open boolean attribute of a dialog element signifies the element as the active window.

The syntax takes the form below:

<dialog open></dialog>

alertdialog value

An alertdialog value of a role attribute specifies a secondary window that an author may initiate. It is non-active by default.

The syntax expects the following:

<div 
  role="alertdialog" 
  aria-modal="true" 
  aria-describedby="[dialog-description-id]"
>
  <!-- 0 or more flow elements -->
</div>

aria-modal="true" attribute

An aria-modal attribute with a true value on an alertdialog role signifies the element as a window.

The syntax takes the form below:

<div
  role="alertdialog"
  aria-modal="true"
></div>