Using the element is very simple, with its basic form looking like this:
This is a dialog box!
It overlays the entire complete page content, places itself in the middle of the screen, framed by a black border, with a size determined by the content of the box. The overlay puts a so-called backdrop on the page, preventing any interaction with the content outside of the box.
Backdrop is new as well, and it is the name of the according pseudo-element::backdrop, which can be styled via CSS to make it transparent, colorful, or however you want to. The dialog itself is designed as usual, via CSS, just like any other element.
Within the dialogue element, use other HTML elements to structure your dialog box, and build it to match your requirements. Theoretically, there is no limit to your imagination.
The first method adds the attribute, opening the dialog box. The second method removes the attribute, closing the dialog box. We don’t need more flexibility here anyways.
Speaking of New…
For the sake of vindication, it should be mentioned that the dialog element only makes sense from an accessibility standpoint. Screenreaders have an easier time identifying these elements. For the actual application case, which is the display of dialog boxes, there are several solutions, with the most popular being the implementation in Bootstrap, which can be realized in an accessible fashion as well.
So, the element is not new in a literal sense. However, it has been newly added to the standard, making it a part of HTML 5.2.