HTML Block Level Tags
HTML
Block element always occupies the whole horizontal space of its parent element.
HTML Block level Tags
➔ Block elements stack vertically and take up as much horizontal space as possible.
➔ Block elements force the text to start with a new line.
➔ One Block level element can be placed in a row by default, but using css we can put multiple block elements in a single line.
➔ Block-level elements may contain other block-level elements or inline elements.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
HTML <dialog> tag
➔ The <dialog> element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, subwindow.
➔ In HTML, the method="dialog" attribute is only used within a <form> element that is nested within a <dialog> element.
➔ The purpose is to close the dialog box without submitting the form data to the server.
Example <dialog> tag
<!DOCTYPE html>
<html>
<head>
<title>HTML dialog tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
button {
padding: 10px 20px;
margin: 20px;
background-color: #1177ff;
color: white;
border-radius: 5px;
}
button:hover {
background-color: #1199ff;
}
dialog {
border-radius: 0.5rem;
box-shadow: 1 1 1rem rgba(0, 0, 0, 0.3);
padding: 2rem;
border: none;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h2>HTML dialog tag example</h2>
<button id="showButton">Show dialog</button>
<dialog id="myDialog">
<h2>Dialog Title here</h2>
<p>The content of the modal dialog goes here.</p>
<form method="dialog">
<button id="closeButton" type="submit">Close</button>
</form>
</dialog>
<script>
const dialog = document.querySelector("#myDialog");
const showButton = document.querySelector("#showButton");
const closeButton = document.querySelector("#closeButton");
showButton.addEventListener("click", () => {
dialog.showModal();
});
closeButton.addEventListener("click", () => {
dialog.close();
});
</script>
</body>
</html>
Copy and click on the "TryitNow" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output