{"id":23326,"date":"2025-10-23T20:23:28","date_gmt":"2025-10-23T20:23:28","guid":{"rendered":"https:\/\/wedesignmarbella.com\/herramienta-de-minimizacion-y-embellecimiento-de-html\/"},"modified":"2026-07-02T10:15:20","modified_gmt":"2026-07-02T10:15:20","slug":"herramienta-de-minimizacion-y-embellecimiento-de-html","status":"publish","type":"page","link":"https:\/\/wedesignmarbella.com\/es\/herramientas\/herramienta-de-minimizacion-y-embellecimiento-de-html\/","title":{"rendered":"Herramienta de minimizaci\u00f3n y embellecimiento de HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23326\" class=\"elementor elementor-23326 elementor-15074\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ba6b6a e-flex e-con-boxed e-con e-parent\" data-id=\"3ba6b6a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e1e8d19 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"e1e8d19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Herramienta de minimizaci\u00f3n y embellecimiento de HTML<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-998311e elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"998311e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Esta herramienta te ayuda a optimizar tu c\u00f3digo HTML, ya sea minimiz\u00e1ndolo para reducir el tama\u00f1o del archivo y mejorar la velocidad de carga de la p\u00e1gina, o formate\u00e1ndolo para que sea m\u00e1s legible y f\u00e1cil de editar. Simplemente pega tu c\u00f3digo HTML en el cuadro de entrada y elige si deseas comprimirlo para su implementaci\u00f3n o formatearlo para facilitar la edici\u00f3n. Ideal para desarrolladores web que buscan mejorar el rendimiento o mantener un c\u00f3digo limpio y organizado.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-06391fd e-flex e-con-boxed e-con e-parent\" data-id=\"06391fd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d494ab elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"3d494ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<label for=\"inputHtml\">Introduzca HTML<\/label>\r\n<textarea id=\"inputHtml\" placeholder=\"Pega tu c\u00f3digo HTML aqu\u00ed...\"><\/textarea>\r\n \t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e35243 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"8e35243\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <button onclick=\"minifyHtml()\">Minimizar HTML<\/button>\r\n\r\n<button onclick=\"beautifyHtml()\">Embellecer HTML<\/button>\r\n \t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a59f477 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"a59f477\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<label for=\"outputHtml\">Producci\u00f3n<\/label>\r\n<textarea id=\"outputHtml\" placeholder=\"Aqu\u00ed aparecer\u00e1 el c\u00f3digo HTML minimizado\/formateado...\" readonly>\r\n    \r\n<\/textarea>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa4de82 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"fa4de82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n\r\n    <script>\/**\r\n         * Minifies the HTML from the input textarea.\r\n         * This is a simple minifier and has limitations (e.g., doesn't properly handle <pre> or <textarea> tags).\r\n         *\/\r\n        function minifyHtml() {\r\n            try {\r\n                let inputHtml = document.getElementById('inputHtml').value;\r\n                \r\n                let minifiedHtml = inputHtml\r\n                    .replace(\/<!--[\\s\\S]*?-->\/g, '') \/\/ 1. Remove comments\r\n                    .replace(\/>\\s+<\/g, '><')          \/\/ 2. Remove whitespace between tags\r\n                    .replace(\/(\\r\\n|\\n|\\r)\/gm, \" \")   \/\/ 3. Replace newlines with a space\r\n                    .replace(\/\\s\\s+\/g, ' ')           \/\/ 4. Collapse multiple spaces to one\r\n                    .trim();\r\n                \r\n                document.getElementById('outputHtml').value = minifiedHtml;\r\n            } catch (e) {\r\n                console.error(\"Minification failed:\", e);\r\n                document.getElementById('outputHtml').value = \"Error during minification. Check console.\";\r\n            }\r\n        }\r\n\r\n        \/**\r\n         * Beautifies the HTML from the input textarea.\r\n         * This is a simple beautifier and may not format all HTML perfectly.\r\n         *\/\r\n        function beautifyHtml() {\r\n            try {\r\n                let inputHtml = document.getElementById('inputHtml').value;\r\n                document.getElementById('outputHtml').value = formatHtml(inputHtml);\r\n            } catch (e) {\r\n                console.error(\"Beautification failed:\", e);\r\n                document.getElementById('outputHtml').value = \"Error during beautification. Check console.\";\r\n            }\r\n        }\r\n\r\n        \/**\r\n         * Helper function to format HTML (beautify).\r\n         * @param {string} html - The raw HTML string.\r\n         * @returns {string} - The formatted HTML string.\r\n         *\/\r\n        function formatHtml(html) {\r\n            const indent = '  '; \/\/ Two spaces for indentation\r\n            let indentLevel = 0;\r\n            let result = '';\r\n            let inTag = false;\r\n            let inComment = false;\r\n            let tagBuffer = '';\r\n\r\n            \/\/ Clean up input first: remove newlines and collapse spaces between tags\r\n            let cleanHtml = html.replace(\/\\s*\\n\\s*\/g, '').replace(\/>\\s+<\/g, '><').trim();\r\n\r\n            for (let i = 0; i < cleanHtml.length; i++) {\r\n                const char = cleanHtml[i];\r\n                const nextChar = cleanHtml[i + 1] || '';\r\n                const prevChar = cleanHtml[i - 1] || '';\r\n\r\n                if (inComment) {\r\n                    \/\/ We are inside a comment\r\n                    result += char;\r\n                    if (char === '-' && nextChar === '-' && cleanHtml[i + 2] === '>') {\r\n                        result += '->'; \/\/ End of comment\r\n                        i += 2;\r\n                        inComment = false;\r\n                    }\r\n                    continue;\r\n                }\r\n\r\n                if (!inTag) {\r\n                    \/\/ We are outside a tag\r\n                    if (char === '<') {\r\n                        \/\/ --- START OF A TAG ---\r\n                        \r\n                        \/\/ Check for comment start\r\n                        if (nextChar === '!' && cleanHtml[i + 2] === '-' && cleanHtml[i + 3] === '-') {\r\n                            inComment = true;\r\n                            \/\/ Add newline and indent before comment\r\n                            result += (result.length > 0 ? '\\n' : '') + indent.repeat(indentLevel) + '<!--';\r\n                            i += 3;\r\n                            continue;\r\n                        }\r\n                        \r\n                        inTag = true;\r\n                        tagBuffer = '';\r\n                        \r\n                        \/\/ Check for closing tag\r\n                        if (nextChar === '\/') {\r\n                            indentLevel = Math.max(0, indentLevel - 1);\r\n                            \/\/ Add newline and indent before closing tag\r\n                            result += '\\n' + indent.repeat(indentLevel);\r\n                        } else {\r\n                            \/\/ Opening tag\r\n                            \/\/ Add newline and indent before opening tag\r\n                            result += (result.length > 0 ? '\\n' : '') + indent.repeat(indentLevel);\r\n                        }\r\n                        result += char;\r\n                    } else {\r\n                        \/\/ --- TEXT NODE ---\r\n                        if (char.trim().length > 0) {\r\n                             \/\/ Only add text if it's not just whitespace\r\n                             if (result.trim().slice(-1) === '>') {\r\n                                 \/\/ This text node follows a tag, so put it on a new line and indent it\r\n                                 result += '\\n' + indent.repeat(indentLevel);\r\n                             }\r\n                             result += char;\r\n                        }\r\n                    }\r\n                } else {\r\n                    \/\/ --- INSIDE A TAG ---\r\n                    result += char;\r\n                    tagBuffer += char;\r\n\r\n                    if (char === '>') {\r\n                        \/\/ --- END OF A TAG ---\r\n                        inTag = false;\r\n                        \r\n                        \/\/ Check tag name for void elements\r\n                        const tagNameMatch = tagBuffer.match(\/^([a-zA-Z0-9]+)\/);\r\n                        const tagName = tagNameMatch ? tagNameMatch[1].toLowerCase() : '';\r\n                        const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];\r\n                        \r\n                        const isSelfClosing = prevChar === '\/' || voidElements.includes(tagName);\r\n                        const isClosingTag = tagBuffer.startsWith('\/');\r\n\r\n                        \/\/ Increment indent level if it's an opening tag that is NOT self-closing\r\n                        if (!isClosingTag && !isSelfClosing) {\r\n                            indentLevel++;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n            return result.trim();\r\n        }\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Herramienta de minimizaci\u00f3n y embellecimiento de HTML Esta herramienta te ayuda a optimizar tu c\u00f3digo HTML, ya sea minimiz\u00e1ndolo para reducir el tama\u00f1o del archivo y mejorar la velocidad de carga de la p\u00e1gina, o formate\u00e1ndolo para que sea m\u00e1s legible y f\u00e1cil de editar. Simplemente pega tu c\u00f3digo HTML en el cuadro de entrada [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":23340,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ai_generated_summary":"","footnotes":""},"class_list":["post-23326","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/comments?post=23326"}],"version-history":[{"count":0,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23326\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23340"}],"wp:attachment":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media?parent=23326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}