{"id":22923,"date":"2024-02-14T20:14:53","date_gmt":"2024-02-14T19:14:53","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/creando-etiquetas-interactivas-con-html5\/"},"modified":"2024-06-03T17:29:57","modified_gmt":"2024-06-03T16:29:57","slug":"creando-etiquetas-interactivas-con-html5","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/","title":{"rendered":"Creating interactive tags with HTML5"},"content":{"rendered":"<p> In web development, it is important to create an interactive experience for users. One way to achieve this is by using HTML5 interactive tags. One of these tags is `<dialog>`, which provides the ability to create interactive pop-ups on a website. In this article, we will explore what the ` tag is<dialog>` in HTML and how to use it to improve interactivity in our projects. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#%C2%BFQue_es_la_etiqueta_en_HTML\" >What is the `` tag in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Titulo_de_la_ventana_emergente\" >Popup Title<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#%C2%BFComo_utilizar_la_etiqueta_en_HTML\" >How to use the `` tag in HTML?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Paso_1_Crear_la_estructura_basica_de_la_ventana_emergente\" >Step 1: Create the basic structure of the popup<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Titulo_de_la_ventana_emergente-2\" >Popup Title<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Paso_2_Mostrar_la_ventana_emergente\" >Step 2: Show the popup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Paso_3_Agregar_interactividad_y_comportamiento\" >Step 3: Add interactivity and behavior<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#%C2%BFPuedo_utilizar_estilos_personalizados_en_la_ventana_emergente_creada_con_la_etiqueta\" >Can I use custom styles in the popup created with `` tag?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#%C2%BFLa_etiqueta_es_compatible_con_todos_los_navegadores\" >Is the `` tag supported by all browsers?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-interactive-tags-with-html5\/#%C2%BFComo_puedo_abrir_y_cerrar_la_ventana_emergente_utilizando_solo_HTML\" >How can I open and close the popup using just HTML?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_etiqueta_en_HTML\"><\/span> What is the ` tag<dialog>` in HTML? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p> The ` tag<dialog>` in HTML is a container tag used to create an interactive popup on a website. This tag allows you to display additional information or request input from the user without interrupting site navigation. The ` tag<dialog>` is especially useful for creating custom dialog boxes, modal windows, and popups. <\/p>\n<p> The basic syntax of the ` tag<dialog>` is the following: <\/p>\n<pre>\n    <code>\n        <dialog open>\n            <h2><span class=\"ez-toc-section\" id=\"Titulo_de_la_ventana_emergente\"><\/span>Popup Title<span class=\"ez-toc-section-end\"><\/span><\/h2>\n            <p>Popup window content.<\/p>\n            <button>action button<\/button>\n        <\/dialog>\n    <\/code>\n<\/pre>\n<p> The ` tag<dialog>` can contain any HTML content, such as headers, paragraphs, images, buttons, forms, among other elements. Additionally, you can control the behavior of the popup using JavaScript to open, close, and perform specific actions when you interact with it. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_utilizar_la_etiqueta_en_HTML\"><\/span> How to use the ` tag<dialog>` in HTML? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p> To use the ` tag<dialog>` in HTML, we must follow the following steps: <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_1_Crear_la_estructura_basica_de_la_ventana_emergente\"><\/span> Step 1: Create the basic structure of the popup <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> First of all, we need to create the basic structure of our popup using the ` tag<dialog>`. This tag can be inside any container, such as a `<\/p>\n<div>`, a `<\/p>\n<section>` or directly in the `<body>`. Inside the ` tag<dialog>`, we can add the content we want to display in the popup, such as titles, text, images, and buttons. <\/p>\n<pre>\n    <code>\n        <dialog>\n            <h2><span class=\"ez-toc-section\" id=\"Titulo_de_la_ventana_emergente-2\"><\/span>Popup Title<span class=\"ez-toc-section-end\"><\/span><\/h2>\n            <p>Popup window content.<\/p>\n            <button>action button<\/button>\n        <\/dialog>\n    <\/code>\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_2_Mostrar_la_ventana_emergente\"><\/span> Step 2: Show the popup <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> In order for the popup to display, we must use JavaScript to open the dialog. We can do this by using JavaScript events, such as clicking a button, or directly in the JavaScript code. <\/p>\n<pre>\n    <code>\n        const dialogElement = document.querySelector(&#039;dialog&#039;); const openButton = document.querySelector(&#039;#open-dialog-button&#039;); openButton.addEventListener(&#039;click&#039;, () =&gt; { dialogElement.showModal(); });\n    <\/code>\n<\/pre>\n<p> In this example, we are selecting the element `<dialog>` and the button we want to use to open the popup window. Next, we add a click event to the button to show the dialog using the `showModal()` method. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_3_Agregar_interactividad_y_comportamiento\"><\/span> Step 3: Add interactivity and behavior <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> Once the popup is displayed, we can add interactivity and behavior by using events and manipulating the DOM with JavaScript. For example, we could add events to the buttons within the popup to close it or perform a specific action when clicked. We can also modify the content of the popup dynamically based on user interaction. <\/p>\n<pre>\n    <code>\n        const closeButton = document.querySelector(&#039;#close-dialog-button&#039;); closeButton.addEventListener(&#039;click&#039;, () =&gt; { dialogElement.close(); });\n    <\/code>\n<\/pre>\n<p> In this example, we are selecting the close button inside the popup and adding a click event to close the window using the `close()` method. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span> Conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p> The ` tag<dialog>` in HTML allows us to create interactive and customizable pop-ups on our websites. Using this tag, we can improve the user experience by providing additional information or requesting input without interrupting navigation. Additionally, we can control the behavior of the popup using JavaScript to open, close, and perform specific actions. Keep exploring the possibilities of the ` tag<dialog>` and create interactive experiences in your HTML projects. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span> Frequently asked questions <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_utilizar_estilos_personalizados_en_la_ventana_emergente_creada_con_la_etiqueta\"><\/span> Can I use custom styles in the popup created with ` tag<dialog>`? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> Yes, you can use custom styles in the popup created with the ` tag<dialog>`. You can apply CSS styles to change the appearance of the popup, such as the background color, font size, spacing, and element arrangement. You can also use specific JavaScript styles to control things like the position and behavior of the popup. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFLa_etiqueta_es_compatible_con_todos_los_navegadores\"><\/span> Does the tag<dialog>` is it compatible with all browsers? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> No, the ` tag<dialog>` is not supported by all browsers. Currently, the ` tag<dialog>` is compatible with most modern browsers, such as Google Chrome, Mozilla Firefox and Microsoft Edge. However, some older versions of browsers may not support this tag or may have inconsistent behavior. To ensure cross-browser compatibility, it is recommended to use libraries or frameworks that provide additional support for unsupported HTML5 tags. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_abrir_y_cerrar_la_ventana_emergente_utilizando_solo_HTML\"><\/span> How can I open and close the popup using just HTML? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p> Currently, it is not possible to open and close the popup using just HTML. The ` tag<dialog>` requires JavaScript to function correctly. You can use the `open` attribute in the ` tag<dialog>` to have the popup automatically display when the page loads, but to open and close the window in response to user events, such as clicking a button, you must use JavaScript. <\/p>","protected":false},"excerpt":{"rendered":"<p>En el desarrollo web, es importante crear una experiencia interactiva para los usuarios. Una forma de lograr esto es utilizando las etiquetas interactivas de HTML5. Una de estas etiquetas es \u00ab, que brinda la posibilidad de crear ventanas emergentes interactivas en un sitio web. En este art\u00edculo, exploraremos qu\u00e9 es la etiqueta \u00ab en HTML [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22924,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[205,90,652,476,475,782,803],"class_list":["post-22923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-blog","tag-con","tag-creando","tag-etiquetas","tag-html","tag-html5","tag-interactivas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22923"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22924"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}