Estructura básica de un documento HTML explicada

Estructura básica de una página Web - html, head y body
Table
  1. Estructura básica de un documento HTML explicada
  2. Fundamentos de un documento HTML
    1. La declaración DOCTYPE y la etiqueta raíz
    2. El rol de las etiquetas head y body
  3. Elementos esenciales dentro del body
    1. Encabezados y párrafos para estructurar contenido
  4. y sirven para subtítulos y secciones. Por su parte, la etiqueta se utiliza para crear párrafos de texto, facilitando la presentación de información de manera clara. Usar estos elementos no solo ayuda a los usuarios a navegar por el contenido, sino que también optimiza el SEO, ya que los motores de búsqueda valoran una estructura jerárquica bien definida en HTML. Listas y enlaces para mayor interactividad
  5. Buenas prácticas para estructurar tu código HTML
    1. Indentación y comentarios para mayor claridad
    2. Semántica y accesibilidad en HTML

Estructura básica de un documento HTML explicada

¿Alguna vez te has preguntado cómo se construyen las páginas web que visitas todos los días? Todo comienza con HTML, el lenguaje de marcado que sirve como la base de cualquier sitio en internet. HTML, o HyperText Markup Language, no solo define el contenido de una página, sino también su estructura básica, permitiendo que navegadores como Chrome o Firefox interpreten y muestren la información de manera organizada. En este artículo, exploraremos de forma sencilla y amigable los componentes esenciales de un documento HTML, desde las etiquetas fundamentales hasta cómo se organiza el código para crear una página funcional. Si eres principiante en el desarrollo web o simplemente quieres entender mejor este lenguaje, ¡estás en el lugar correcto! Acompáñanos en este recorrido por la estructura de HTML y descubre cómo dar vida a tus ideas digitales.

Fundamentos de un documento HTML

Antes de sumergirnos en los detalles, es importante entender que un documento HTML es como el esqueleto de una página web. Este lenguaje utiliza etiquetas para definir elementos como encabezados, párrafos e imágenes, y cada documento sigue una estructura estándar que asegura su correcto funcionamiento en los navegadores. Vamos a desglosar los componentes clave que forman la base de cualquier archivo HTML y cómo se relacionan entre sí para crear una experiencia web coherente.

La declaración DOCTYPE y la etiqueta raíz

Todo documento HTML comienza con la declaración , que le indica al navegador que está interpretando un documento HTML5, la versión más reciente del estándar. Esta declaración no es una etiqueta, pero es esencial para evitar problemas de compatibilidad. Justo después, encontramos la etiqueta raíz , que envuelve todo el contenido del documento. Dentro de esta etiqueta se definen los dos bloques principales: y . La primera contiene información sobre la página, como el título o los enlaces a estilos, mientras que la segunda incluye el contenido visible para el usuario, como textos e imágenes.

El rol de las etiquetas head y body

La etiqueta es como el cerebro detrás de escena de una página web. Aquí se incluyen elementos como , que define el título que aparece en la pestaña del navegador, y <meta>, que proporciona datos sobre la codificación o la descripción del sitio para motores de búsqueda. Por otro lado, la etiqueta <body data-rsssl=1> es el corazón del documento, ya que contiene todo lo que los usuarios ven, desde encabezados (</p><a href="https://codeguias.site/como-crear-tu-primera-pagina-web-con-html/" class="enlazatom-show-box "><span>Cómo crear tu primera página web con HTML</span><div class="btn"><span class="chevron right"></span></div></a> <h1> a </p> <h6>) hasta párrafos (</p> <p>) y multimedia. Ambas secciones son fundamentales y trabajan juntas para ofrecer una experiencia completa en la web.</p> <h2><span id="elementos_esenciales_dentro_del_body">Elementos esenciales dentro del body</span></h2> <p>Una vez que hemos establecido la estructura básica de un documento HTML con las etiquetas principales, es hora de centrarnos en el contenido visible que aparece en el navegador. La sección <body data-rsssl=1> es donde ocurre la magia, ya que aquí se colocan los elementos que los usuarios interactúan directamente. Desde textos hasta enlaces y formularios, vamos a explorar los componentes más comunes que dan vida a una página web y cómo organizarlos correctamente.</p><a href="https://codeguias.site/diferencias-entre-html4/" class="enlazatom-show-box "><span>Diferencias entre HTML4</span><div class="btn"><span class="chevron right"></span></div></a> <h3><span id="encabezados_y_parrafos_para_estructurar_contenido">Encabezados y párrafos para estructurar contenido</span></h3> <p>Los encabezados, definidos por las etiquetas </p> <h1> a </p> <h6>, son cruciales para organizar el contenido y mejorar la legibilidad. </p> <h1> suele usarse para el título principal de la página, mientras que los niveles inferiores como </p> <h2> y </p> <h3> sirven para subtítulos y secciones. Por su parte, la etiqueta </p> <p> se utiliza para crear párrafos de texto, facilitando la presentación de información de manera clara. Usar estos elementos no solo ayuda a los usuarios a navegar por el contenido, sino que también optimiza el SEO, ya que los motores de búsqueda valoran una estructura jerárquica bien definida en HTML.</p> <h3>Listas y enlaces para mayor interactividad</h3> <p>Las listas, ya sean ordenadas (</p><a href="https://codeguias.site/como-usar-correctamente-las-etiquetas-html/" class="enlazatom-show-box "><span>Cómo usar correctamente las etiquetas HTML</span><div class="btn"><span class="chevron right"></span></div></a> <ol>) o no ordenadas (</p> <ul>), son herramientas poderosas para presentar información de forma esquemática. Cada elemento de una lista se define con la etiqueta </p> <li>, lo que permite crear contenido visualmente atractivo y fácil de entender. Además, los enlaces, creados con la etiqueta <a> y su atributo href, conectan páginas o recursos, mejorando la navegación. Por ejemplo, un enlace puede dirigir a otra sección de tu sitio o a un recurso externo, haciendo que tu página sea más dinámica y útil para los visitantes.</p> <h2><span id="buenas_practicas_para_estructurar_tu_codigo_html">Buenas prácticas para estructurar tu código HTML</span></h2> <p>Escribir un documento HTML no solo se trata de conocer las etiquetas, sino también de seguir ciertas prácticas que aseguran que tu código sea limpio, accesible y fácil de mantener. Una estructura bien organizada no solo facilita el trabajo de los desarrolladores, sino que también mejora la experiencia del usuario y la indexación en motores de búsqueda. A continuación, te compartimos algunos consejos clave para que tu código HTML sea eficiente y cumpla con los estándares modernos de desarrollo web.</p> <h3><span id="indentacion_y_comentarios_para_mayor_claridad">Indentación y comentarios para mayor claridad</span></h3> <p>La indentación, aunque no afecta el funcionamiento del código, es esencial para que sea legible. Al anidar etiquetas, como colocar un </p> <p> dentro de un </p> <div>, usa espacios o tabulaciones para visualizar claramente la jerarquía. Además, los comentarios, escritos entre <!-- y -->, son útiles para explicar secciones del código o dejar notas para otros desarrolladores. Por ejemplo, puedes comentar qué hace una sección específica del <body data-rsssl=1>. Estas prácticas no solo mejoran la colaboración en proyectos, sino que también te ayudan a mantener el control sobre tu propio código a medida que crece en complejidad.</p> <h3><span id="semantica_y_accesibilidad_en_html">Semántica y accesibilidad en HTML</span></h3> <p>Usar etiquetas semánticas como </p> <header>, </p> <nav>, <main>, </p> <article> y </p> <footer> es una práctica recomendada en HTML5. Estas etiquetas no solo describen el propósito de su contenido, sino que también mejoran la accesibilidad para usuarios con discapacidades que utilizan lectores de pantalla. Por ejemplo, un </p> <nav> indica claramente que contiene enlaces de navegación. Además, agregar atributos como alt en imágenes (<img loading="lazy">) asegura que el contenido sea comprensible para todos. Priorizar la semántica y la accesibilidad no solo es una cuestión de buenas prácticas, sino que también posiciona mejor tu sitio en términos de SEO y usabilidad.</p> <p>En resumen, comprender la estructura básica de un documento HTML es el primer paso para adentrarte en el fascinante mundo del desarrollo web. Desde la declaración <!DOCTYPE html> hasta las etiquetas semánticas dentro del <body data-rsssl=1>, cada elemento tiene un propósito específico que contribuye a crear páginas funcionales y atractivas. Al dominar estos conceptos, no solo podrás construir sitios web básicos, sino también sentar las bases para explorar tecnologías más avanzadas como CSS y JavaScript. Recuerda que la práctica constante y la atención a los detalles, como la semántica y la accesibilidad, marcarán la diferencia en tus proyectos. ¡Empieza a construir tu primer documento HTML hoy!</p> <p>Si quieres conocer otros artículos parecidos a <strong>Estructura básica de un documento HTML explicada</strong> puedes visitar la categoría <a href="https://codeguias.site/html/"><strong>Guias HTML</strong></a>.</p> </div> </div> <div class="social-buttons flexbox"> <a title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-facebook" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg></a> <a title="Facebook Messenger" href="fb-messenger://share/?link=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-facebook-m" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" /><path d="M8 13l3 -2l2 2l3 -2" /></svg></a> <a title="X" href="https://twitter.com/intent/tweet?text=Estructura básica de un documento HTML explicada&url=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-twitter" target="_blank" rel="nofollow noopener" viewBox="0 0 24 24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg></a> <a title="Pinterest" href="https://pinterest.com/pin/create/button/?url=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/&media=https://codeguias.site/wp-content/uploads/2025/05/estructura-basica-de-un-documento-html-explicada-150x150.jpg" class="asap-icon-single icon-pinterest" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg></a> <a title="WhatsApp" href="https://wa.me/?text=Estructura básica de un documento HTML explicada%20-%20https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-whatsapp" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /> <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg></a> <a title="Tumblr" href="https://tumblr.com/widgets/share/tool?canonicalUrl=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-tumblr" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 21h4v-4h-4v-6h4v-4h-4v-4h-4v1a3 3 0 0 1 -3 3h-1v4h4v6a4 4 0 0 0 4 4" /></svg></a> <a title="LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&url=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/&title=Estructura básica de un documento HTML explicada" class="asap-icon-single icon-linkedin" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="8" y2="16" /><line x1="8" y1="8" x2="8" y2="8.01" /><line x1="12" y1="16" x2="12" y2="11" /><path d="M16 16v-3a2 2 0 0 0 -4 0" /></svg></a> <a title="Telegram" href="https://t.me/share/url?url=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/&text=Estructura básica de un documento HTML explicada" class="asap-icon-single icon-telegram" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg></a> <a title="Email" href="mailto:?subject=Estructura básica de un documento HTML explicada&body=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/" class="asap-icon-single icon-email" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg></a> <a title="Reddit" href="http://reddit.com/submit?url=https://codeguias.site/estructura-basica-de-un-documento-html-explicada/&title=Estructura básica de un documento HTML explicada" class="asap-icon-single icon-reddit" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14z" /><path d="M12 8l1 -5l6 1" /><circle cx="19" cy="4" r="1" /><circle cx="9" cy="13" r=".5" fill="currentColor" /><circle cx="15" cy="13" r=".5" fill="currentColor" /><path d="M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5" /></svg></a> </div> <ul class="single-nav"> <li class="nav-prev"> <a href="https://codeguias.site/como-crear-tu-primera-pagina-web-con-html/" >Cómo crear tu primera página web con HTML</a> </li> <li class="nav-next"> <a href="https://codeguias.site/que-es-html-y-para-que-sirve-en-el-desarrollo-web/" > Qué es HTML y para qué sirve en el desarrollo web </a> </li> </ul> <div class="comment-respond others-items"><p>Entradas Relacionadas</p></div> <div class="related-posts"> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-estructurar-un-documento-html-accesible-para-lectores-de-pantalla/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-estructurar-un-documento-html-accesible-para-lectores-de-pantalla-2-400x267.png');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo estructurar un documento HTML accesible para lectores de pantalla</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-implementar-etiquetas-open-graph-para-redes-sociales-en-html/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-implementar-etiquetas-open-graph-para-redes-sociales-en-html-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo implementar etiquetas Open Graph para redes sociales en HTML</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-crear-una-pagina-de-error-404-personalizada-con-html/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-crear-una-pagina-de-error-404-personalizada-con-html-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo crear una página de error 404 personalizada con HTML</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-usar-el-atributo-download-en-enlaces-html/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-usar-el-atributo-download-en-enlaces-html-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo usar el atributo download en enlaces HTML</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-hacer-un-menu-desplegable-con-html-y-css/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-hacer-un-menu-desplegable-con-html-y-css-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo hacer un menú desplegable con HTML y CSS</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/que-son-las-etiquetas-obsoletas-en-html-y-que-evitar/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/que-son-las-etiquetas-obsoletas-en-html-y-que-evitar-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Qué son las etiquetas obsoletas en HTML y qué evitar</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-aplicar-animaciones-simples-usando-solo-html-y-css/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-aplicar-animaciones-simples-usando-solo-html-y-css-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo aplicar animaciones simples usando solo HTML y CSS</p> </div> </a> </article> <article class="article-loop asap-columns-4"> <a href="https://codeguias.site/como-crear-un-slider-de-imagenes-con-html-y-css/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://codeguias.site/wp-content/uploads/2025/05/como-crear-un-slider-de-imagenes-con-html-y-css-1-400x267.jpg');" class="article-image"></div> </div> <div class="asap-box-container"> <p class="entry-title">Cómo crear un slider de imágenes con HTML y CSS</p> </div> </a> </article> </div> </article> </main> <footer> <div class="content-footer"> <div class="widget-content-footer"> <div class="logo-footer"><a href="https://codeguias.site/" class="custom-logo-link" rel="home"><img width="484" height="159" src="https://codeguias.site/wp-content/uploads/2025/05/cropped-Captura-de-pantalla-2025-05-07-160444.png" class="custom-logo" alt="Guias de Programacion" decoding="async" srcset="https://codeguias.site/wp-content/uploads/2025/05/cropped-Captura-de-pantalla-2025-05-07-160444.png 484w, https://codeguias.site/wp-content/uploads/2025/05/cropped-Captura-de-pantalla-2025-05-07-160444-300x99.png 300w" sizes="(max-width: 484px) 100vw, 484px" /></a></div> <div class="widget-area"><div class="menu-secundario-container"><ul id="menu-secundario" class="menu"><li id="menu-item-1349" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1349"><a href="https://codeguias.site/politica-de-cookies/" itemprop="url">Política de Cookies</a></li> <li id="menu-item-1350" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350"><a href="https://codeguias.site/terminos-y-condiciones/" itemprop="url">Términos y Condiciones</a></li> <li id="menu-item-1351" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1351"><a href="https://codeguias.site/politica-de-privacidad/" itemprop="url">Política de Privacidad</a></li> </ul></div></div> </div> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/asap/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <!-- Consent Management powered by Complianz | GDPR/CCPA Cookie Consent https://wordpress.org/plugins/complianz-gdpr --> <div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 bottom-right-view-preferences optout cmplz-bottom-right cmplz-categories-type-view-preferences" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optout" aria-describedby="cmplz-message-1-optout"> <div class="cmplz-header"> <div class="cmplz-logo"></div> <div class="cmplz-title" id="cmplz-header-1-optout">Gestionar el consentimiento de las cookies</div> <div class="cmplz-close" tabindex="0" role="button" aria-label="Close dialog"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> </div> </div> <div class="cmplz-divider cmplz-divider-header"></div> <div class="cmplz-body"> <div class="cmplz-message" id="cmplz-message-1-optout">Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.</div> <!-- categories start --> <div class="cmplz-categories"> <details class="cmplz-category cmplz-functional" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Funcional</span> <span class='cmplz-always-active'> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-functional-optout" data-category="cmplz_functional" class="cmplz-consent-checkbox cmplz-functional" size="40" value="1"/> <label class="cmplz-label" for="cmplz-functional-optout" tabindex="0"><span class="screen-reader-text">Funcional</span></label> </span> Always active </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-functional">El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.</span> </div> </details> <details class="cmplz-category cmplz-preferences" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Preferencias</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-preferences-optout" data-category="cmplz_preferences" class="cmplz-consent-checkbox cmplz-preferences" size="40" value="1"/> <label class="cmplz-label" for="cmplz-preferences-optout" tabindex="0"><span class="screen-reader-text">Preferencias</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-preferences">El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.</span> </div> </details> <details class="cmplz-category cmplz-statistics" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Estadísticas</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-statistics-optout" data-category="cmplz_statistics" class="cmplz-consent-checkbox cmplz-statistics" size="40" value="1"/> <label class="cmplz-label" for="cmplz-statistics-optout" tabindex="0"><span class="screen-reader-text">Estadísticas</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-statistics">El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.</span> <span class="cmplz-description-statistics-anonymous">El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.</span> </div> </details> <details class="cmplz-category cmplz-marketing" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Marketing</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-marketing-optout" data-category="cmplz_marketing" class="cmplz-consent-checkbox cmplz-marketing" size="40" value="1"/> <label class="cmplz-label" for="cmplz-marketing-optout" tabindex="0"><span class="screen-reader-text">Marketing</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-marketing">El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.</span> </div> </details> </div><!-- categories end --> </div> <div class="cmplz-links cmplz-information"> <a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Manage options</a> <a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview">Manage services</a> <a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper">Manage {vendor_count} vendors</a> <a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/">Read more about these purposes</a> </div> <div class="cmplz-divider cmplz-footer"></div> <div class="cmplz-buttons"> <button class="cmplz-btn cmplz-accept">Aceptar</button> <button class="cmplz-btn cmplz-deny">Denegar</button> <button class="cmplz-btn cmplz-view-preferences">Ver preferencias</button> <button class="cmplz-btn cmplz-save-preferences">Guardar preferencias</button> <a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Ver preferencias</a> </div> <div class="cmplz-links cmplz-documents"> <a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a> </div> </div> </div> <div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Gestionar consentimiento</button> </div><script type="text/javascript" src="https://codeguias.site/wp-includes/js/comment-reply.min.js?ver=9f5b7caf93b23e6b203e04246a80cfd7" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script type="text/javascript" src="https://codeguias.site/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script> <script type="text/javascript" src="https://codeguias.site/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after /* ]]> */ </script> <script type="text/javascript" src="https://codeguias.site/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.0.6" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/codeguias.site\/wp-json\/", "namespace": "contact-form-7\/v1" }, "cached": 1 }; //# sourceURL=contact-form-7-js-before /* ]]> */ </script> <script type="text/javascript" src="https://codeguias.site/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.6" id="contact-form-7-js"></script> <script type="text/javascript" src="https://codeguias.site/wp-content/themes/asap/assets/js/asap.min.js?ver=01170124" id="asap-scripts-js"></script> <script type="text/javascript" id="cmplz-cookiebanner-js-extra"> /* <![CDATA[ */ var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"","banner_version":"26","version":"7.4.0.1","store_consent":"","do_not_track_enabled":"","consenttype":"optout","region":"us","geoip":"","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"","dismiss_on_scroll":"","cookie_expiry":"365","url":"https://codeguias.site/wp-json/complianz/v1/","locale":"lang=en&locale=en_US","set_cookies_on_root":"","cookie_domain":"","current_policy_id":"27","cookie_path":"/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Click to accept {category} cookies and enable this content","css_file":"https://codeguias.site/wp-content/uploads/complianz/css/banner-{banner_id}-{type}.css?v=26","page_links":{"us":{"cookie-statement":{"title":"","url":"https://codeguias.site/como-empezar-a-programar-en-python-desde-cero/"},"privacy-statement":{"title":"Privacy Statement","url":"https://codeguias.site/politica-de-privacidad/"}}},"tm_categories":"1","forceEnableStats":"","preview":"","clean_cookies":"","aria_label":"Click to accept {category} cookies and enable this content"}; //# sourceURL=cmplz-cookiebanner-js-extra /* ]]> */ </script> <script defer type="text/javascript" src="https://codeguias.site/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=1745788222" id="cmplz-cookiebanner-js"></script> <script type="text/javascript" id="cmplz-cookiebanner-js-after"> /* <![CDATA[ */ function ensure_complianz_is_loaded() { let timeout = 30000000; // 30 seconds let start = Date.now(); return new Promise(wait_for_complianz); function wait_for_complianz(resolve, reject) { if (window.cmplz_get_cookie) // if complianz is loaded, resolve the promise resolve(window.cmplz_get_cookie); else if (timeout && (Date.now() - start) >= timeout) reject(new Error("timeout")); else setTimeout(wait_for_complianz.bind(this, resolve, reject), 30); } } // This runs the promise code ensure_complianz_is_loaded().then(function(){ // cookieless tracking is disabled document.addEventListener("cmplz_cookie_warning_loaded", function(consentData) { let region = consentData.detail; if (region !== 'uk') { let scriptElements = document.querySelectorAll('script[data-service="burst"]'); scriptElements.forEach(obj => { if (obj.classList.contains('cmplz-activated') || obj.getAttribute('type') === 'text/javascript') { return; } obj.classList.add('cmplz-activated'); let src = obj.getAttribute('src'); if (src) { obj.setAttribute('type', 'text/javascript'); cmplz_run_script(src, 'statistics', 'src'); obj.parentNode.removeChild(obj); } }); } }); document.addEventListener("cmplz_run_after_all_scripts", cmplz_burst_fire_domContentLoadedEvent); function cmplz_burst_fire_domContentLoadedEvent() { let event = new CustomEvent('burst_fire_hit'); document.dispatchEvent(event); } }); //# sourceURL=cmplz-cookiebanner-js-after /* ]]> */ </script> <!-- Statistics script Complianz GDPR/CCPA --> <script data-category="functional"> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer',''); </script> </body> </html> <!-- Page cached by LiteSpeed Cache 7.1 on 2026-04-19 12:56:46 -->