New HTML dialog Tag

Hyper-text Markup Language (HTML) lately received some love through the addition of a new element, the dialog tag. The newest member of the HTML family aims to simplify the process of creating accessible dialog boxes when developing web applications. In this blog post, we'll walk you through how to utilize this element in your upcoming web projects.

1. The dialog Tag Syntax:

The dialog element is yet another HTML tag that accepts a single attribute called open. It can be included in an HTML document as follows: 

<dialog open> <!-- Content of the dialog box --> </dialog>

It is important to note that the open attribute specifies that the dialog box is visible and that the user can interact with it. To hide the dialog box, simply remove the open attribute.  

2. JavaScript Manipulation: 

It is possible to manage the dialog element from within the JavaScript code. In particular, the following code snippet demonstrates how one can open a non-modal dialog box. 

const dialog = document.querySelector("dialog");

dialog.show(); // Spawn a non-modal dialog box

Additionally, by using the showModal() method you can instruct the browser to display a modal dialog element. To dismiss the dialog box, the close() method can be used. 

3. Additional Resources: 

For more information about the newly introduced dialog tag, refer to the following resources:

- W3Schools 

- MDN Web Docs 

The dialog tag is a versatile and powerful addition to HTML. It has support in every modern browser and as such should be your go-to choice whenever you decide to equip your web app with a non-modal/modal dialog box.