☰

The <dialog> element is used to show some popup or dialog boxes. If we want to show some notification or additional info about any topic, we can use this tag to achieve this goal.

<dialog> .... </dialog>

Many times it has been seen that we need to put some additional info on mouse hover or on click for better understanding about the topic or particular section. We have also seen that, when we hover on some text we get some additional info.

At initial stage it was done with the help of <title> tag or some javascript code. The alternative was to use some text based images. Now with the development of HTML5 this can be achieved easily.

Here is the Syntax of DIALOG Element

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial


<dialog>
	
    Your contents goes here
    
</dialog>

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 <title>Title name will go here</title>
    </head>
    
    <body>
		
        <dialog>
	
    		This is the dialog content.
    
		</dialog>
		
		This is main content. Dialog content should be shown somewehre related to this content.
        
    </body>
    
</html>

Download


HTML5 Elements — Quick References