Online Training for MVC Web Designing Development, MS SQL, Digital Marketing

HTML <dialog> Tag

We can use <dialog> tag to create a new popup dialog on a web page just like dialog in window.
dialog is a new element introduced in HTML5.

use of <dialog> tag in html5

  • You can’t write text directly inside the <dialog> element
  • div or span element cannot be nested inside <dialog> element
  • easy way to write text using a <p> tag inside dialog

dialog example

This is an example of dialog element in html5


code for creating dialog in html5

<dialog id="dialogExample" style="padding:10px;border:solid 1px #0094ff;border-radius:10px;">
This is an example of dialog element in html5
<p id="hideDialog">Dismiss </p>
<button id="btnDisplay">Display Dialog Content</button>

//javascript code
<script type="text/JavaScript">
(function () {
var _dialog = document.getElementById('dialogExample');
document.getElementById('btnDisplay').onclick = function () {;

document.getElementById('hideDialog').onclick = function () {

Using dialog element you can show highlighted text on mouse over or on click, very easy to use

Dialog Tag HTML5

Group Training