HTML <dialog> Dialog  Tag
Tags: learnhtml, htmld
Published: 2021-05-10 08:41:05

---
title: HTML <dialog> Dialog  Tag
published: true
date: 2021-02-23 20:43:51 UTC
tags: LearnHTML,HTMLD
canonical_url: https://sharepointanchor.com/learn-html/html-dialog-tag/
---

HTML **<dialog> Dialog tag** is used to **create a new popup dialog box** or alert box on a web page. You can create **pop-up messages** , **alert messages** , or **forms** by using this tag. It is the **new sectioning element in HTML 5**.

Normally, the **dialog box is hidden from user view** , you can activate it by using the **“open”** attribute. For styling the <dialog> tag, you can use the CSS **“::backdrop“** pseudo-element.

**Info** : If you need **to display/hide the content** within the <dialog> tag, you **must** use the **JavaScript API**.

To combine the **<form>** element within the dialog, it should be specified with the **method=”dialog”** attribute and the dialog tag is closed with the **“returnValue“** attribute.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 5 minutes

## Syntax:

The dialog contains both the **starting <dialog> tag** and **ending </dialog> tag**. The Content is written between these two tags.

```

<dialog open> Write your text here.. </dialog>

```

### HTML <dialog> Tag Characteristics:
<style> th, td{ padding: 20px; } </style>

| HTML <dialog> tag | Used to create a dialog box |
| Content categories | Flow content, Sectioning root. |
| Permitted content | Flow content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content. |
| Implicit ARIA role | dialog |
| Permitted ARIA roles | alertdialog |
| DOM interface | HTMLDialogElement |

## Sample of HTML <dialog> Tag:

```

<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
    <body> 
        <h2>Example of HTML <dialog> tag</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html> 

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-1-8.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-Dialog-Tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Dialog-Tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Dialog-Tag.html)

## Use CSS property to style an HTML <dialog> Tag:

```

<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
 <style> 
            dialog { 
                color: #C40655;; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
            } 
            body { 
                text-align:center; 
            } 
        </style>  
    <body> 
        <h2>Example of HTML <dialog> tag with CSS property</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html> 

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-css-2.png)<figcaption>Result</figcaption>

## HTML <dialog> tag with JavaScript:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dialog> Dialog Tag</title>
    <style>
      dialog {
        	width: 40%;
		color: Green;
		text-align:center; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Welcome to Share Point Anchor
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Clik here to Open</button>
    </div>
    <script type="text/JavaScript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/oZG1x75HZt.gif)<figcaption>Result</figcaption>

## Attributes:

The  **<dialog>**  Dialog tag supports the  **global attributes**  and the  **event attributes** in HTML.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| open | open | This attribute will **idicate that the dialog box is active** , and the user can interact with it. |

## Styling Methods for <dialog> Tag:

You can use the following properties to style an HTML **<dialog>** Dialog tag.

### Properties to style the visual weight/emphasis/size of the text in <dialog> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <dialog> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <dialog> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <dialog> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/browsers.png)

### Related Articles:

- **[HTML <dd> Definition Description Tag](https://sharepointanchor.com/learn-html/html-dd-definition-description/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

The post [HTML <code><dialog></code> Dialog Tag](https://sharepointanchor.com/learn-html/html-dialog-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).