{"id":9466,"date":"2024-10-18T08:57:00","date_gmt":"2024-10-18T06:57:00","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=9466"},"modified":"2026-07-16T10:55:21","modified_gmt":"2026-07-16T08:55:21","slug":"10-codigos-html-basico","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/10-codigos-html-basico\/","title":{"rendered":"10 c\u00f3digos HTML b\u00e1sicos que necesitas para crear tu web desde cero"},"content":{"rendered":"\n<p>\u00bfAlguna vez te has preguntado c\u00f3mo se crean las p\u00e1ginas web que visitas todos los d\u00edas? Bueno, d\u00e9jame contarte que funcionan con <strong>HTML<\/strong>, el lenguaje que da vida a internet. <strong>HTML<\/strong> significa <em>HyperText Markup Language<\/em>, que suena complicado, \u00bfverdad? Pero no te asustes, es m\u00e1s sencillo de lo que parece. Si est\u00e1s dando tus primeros pasos en el mundo del dise\u00f1o web est\u00e1s en el lugar correcto. En este post, vamos a ver los <strong>c\u00f3digos HTML b\u00e1sicos<\/strong> que puedes utilizar en tu d\u00eda a d\u00eda para crear o editar una p\u00e1gina web.<\/p>\n\n\n\n<p><strong><em>Tabla de Contenidos:<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-que-es-html-y-para-que-sirve\">Qu\u00e9 es HTML y para qu\u00e9 sirve<\/a><ul><li><a href=\"#aioseo-estructura-html-basica\">Estructura HTML B\u00e1sica<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-las-10-etiquetas-html-basicas-para-principiantes\">Las 10 etiquetas HTML b\u00e1sicas para principiantes<\/a><ul><li><a href=\"#aioseo-1-encabezados-h1-a-h6\">1. Encabezados<\/a><\/li><li><a href=\"#aioseo-2-parrafos-p\">2. P\u00e1rrafos<\/a><\/li><li><a href=\"#aioseo-3-enlaces-a\">3. Enlaces<\/a><\/li><li><a href=\"#aioseo-4-imagenes-img\">4. Im\u00e1genes<\/a><\/li><li><a href=\"#aioseo-5-listas-ul-ol-li\">5. Listas<\/a><\/li><li><a href=\"#aioseo-6-divisiones-div\">6. Divisiones<\/a><\/li><li><a href=\"#aioseo-7-meta-meta\">7. Meta<\/a><\/li><li><a href=\"#aioseo-8-span-span\">8. Span<\/a><\/li><li><a href=\"#aioseo-9-input-input\">9. Input<\/a><\/li><li><a href=\"#aioseo-10-nav-nav\">10. Nav<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-ejemplos-de-uso-de-los-codigos-html-basicos\">Ejemplos de Uso de los C\u00f3digos HTML B\u00e1sicos<\/a><ul><li><a href=\"#aioseo-ejemplo-1-formulario-de-contacto-completo\">Ejemplo 1: Formulario de Contacto Completo<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-ejemplo-2-tabla-de-productos\">Ejemplo 2: Tabla de Productos<\/a><ul><li><a href=\"#aioseo-ejemplo-3-enlace-con-descripcion-y-estilos\">Ejemplo 3: Enlace con Descripci\u00f3n y Estilos<\/a><\/li><li><a href=\"#aioseo-ejemplo-4-lista-ordenada-y-desordenada\">Ejemplo 4: Lista Ordenada y Desordenada<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-ejemplo-5-navegacion-con-la-etiqueta-nav\">Ejemplo 5: Navegaci\u00f3n con la Etiqueta <nav><\/a><ul><li><a href=\"#aioseo-ejemplo-6-uso-de-span-para-resaltar-texto\">Ejemplo 6: Uso de <span> para Resaltar Texto<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-ejemplo-7-meta-descripcion-para-seo\">Ejemplo 7: Meta Descripci\u00f3n para SEO<\/a><\/li><li><a href=\"#aioseo-como-usar-html-para-mejorar-la-experiencia-del-usuario\">C\u00f3mo usar HTML para mejorar la experiencia del usuario<\/a><ul><li><a href=\"#aioseo-consejos-para-empezar-a-crear-tu-propio-codigo-html\">Consejos para empezar a crear tu propio c\u00f3digo HTML<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><li><a href=\"#aioseo-preguntas-frecuentes-sobre\">Preguntas frecuentes sobre los c\u00f3digos HTML (FAQ)<\/a><\/li><\/ul><\/div>\n\n\n\n<p><\/p>\n\n\n\n<!-- BLOQUE: que-tipo-de-web-quieres-publicar -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-4821,\n  #comp-ld-4821 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-4821 {\n    --ld-dark: #37363d;\n    --ld-panel: #44434b;\n    --ld-panel-hover: #4b4a52;\n    --ld-orange: #db7424;\n    --ld-orange-light: #f09149;\n    --ld-orange-dark: #bd5c16;\n    --ld-cyan: #00bcdf;\n    --ld-text: #ffffff;\n    --ld-muted: #d2d1d6;\n    --ld-border: rgba(255, 255, 255, 0.14);\n    width: 100%;\n    margin: 2rem 0;\n    padding: 1.5rem;\n    overflow: hidden;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 20px;\n    background: radial-gradient(circle at 100% 0%, rgba(0, 188, 223, 0.08), transparent 34%), var(--ld-dark);\n    box-shadow: 0 14px 34px rgba(55, 54, 61, 0.22);\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n  }\n\n  #comp-ld-4821 .ld-project__heading {\n    max-width: 42rem;\n    margin: 0 auto 1.35rem;\n    text-align: center;\n  }\n\n  #comp-ld-4821 .ld-project__title {\n    margin: 0 0 0.45rem;\n    color: var(--ld-text);\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n    text-wrap: balance;\n  }\n\n  #comp-ld-4821 .ld-project__intro {\n    max-width: 37rem;\n    margin: 0 auto;\n    color: var(--ld-muted);\n    font-size: 1rem;\n    line-height: 1.55;\n    text-wrap: pretty;\n  }\n\n  #comp-ld-4821 .ld-project__options {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 0.75rem;\n  }\n\n  #comp-ld-4821 .ld-project__option {\n    display: grid;\n    grid-template-columns: 2.75rem minmax(0, 1fr) 1.4rem;\n    align-items: center;\n    gap: 0.8rem;\n    width: 100%;\n    min-height: 4.75rem;\n    margin: 0;\n    padding: 0.8rem 0.9rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 14px;\n    background: var(--ld-panel);\n    box-shadow: none;\n    color: var(--ld-text);\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n    appearance: none;\n    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;\n  }\n\n  #comp-ld-4821 .ld-project__option:hover {\n    border-color: rgba(219, 116, 36, 0.72);\n    background: var(--ld-panel-hover);\n    box-shadow: 0 8px 20px rgba(219, 116, 36, 0.13);\n    transform: translateY(-2px);\n  }\n\n  #comp-ld-4821 .ld-project__option:active {\n    transform: translateY(0);\n  }\n\n  #comp-ld-4821 .ld-project__option:focus-visible,\n  #comp-ld-4821 .ld-project__link:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.7);\n    outline-offset: 3px;\n  }\n\n  #comp-ld-4821 .ld-project__option[aria-pressed=\"true\"] {\n    border-color: var(--ld-orange-light);\n    background: rgba(219, 116, 36, 0.17);\n    box-shadow: 0 0 0 1px var(--ld-orange), 0 9px 22px rgba(219, 116, 36, 0.18);\n  }\n\n  #comp-ld-4821 .ld-project__icon {\n    display: grid;\n    width: 2.75rem;\n    height: 2.75rem;\n    place-items: center;\n    border-radius: 11px;\n    background: rgba(255, 255, 255, 0.09);\n    color: var(--ld-muted);\n    transition: background-color 180ms ease, color 180ms ease;\n  }\n\n  #comp-ld-4821 .ld-project__option[aria-pressed=\"true\"] .ld-project__icon {\n    background: var(--ld-orange);\n    color: #fff;\n  }\n\n  #comp-ld-4821 .ld-project__icon svg {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  #comp-ld-4821 .ld-project__option-label {\n    font-size: 0.98rem;\n    font-weight: 700;\n    line-height: 1.3;\n  }\n\n  #comp-ld-4821 .ld-project__check {\n    display: grid;\n    width: 1.35rem;\n    height: 1.35rem;\n    place-items: center;\n    border: 1px solid rgba(255, 255, 255, 0.24);\n    border-radius: 50%;\n    color: transparent;\n    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n  }\n\n  #comp-ld-4821 .ld-project__check svg {\n    width: 1rem;\n    height: 1rem;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.25;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  #comp-ld-4821 .ld-project__option[aria-pressed=\"true\"] .ld-project__check {\n    border-color: var(--ld-orange);\n    background: var(--ld-orange);\n    color: #fff;\n  }\n\n  #comp-ld-4821 .ld-project__result {\n    min-height: 8.75rem;\n    margin-top: 1rem;\n    padding: 1rem 0.1rem 0.1rem;\n    border-top: 1px solid var(--ld-border);\n  }\n\n  #comp-ld-4821 .ld-project__result-text {\n    display: flex;\n    min-height: 4.65rem;\n    align-items: center;\n    justify-content: center;\n    margin: 0 0 0.9rem;\n    color: var(--ld-muted);\n    font-size: 1rem;\n    line-height: 1.55;\n    text-align: center;\n    text-wrap: pretty;\n  }\n\n  #comp-ld-4821 .ld-project__link {\n    display: flex;\n    width: 100%;\n    min-height: 3rem;\n    align-items: center;\n    justify-content: center;\n    gap: 0.55rem;\n    padding: 0.72rem 1.15rem;\n    border: 1px solid var(--ld-orange);\n    border-radius: 11px;\n    background: var(--ld-orange);\n    box-shadow: 0 7px 18px rgba(219, 116, 36, 0.3);\n    color: #fff;\n    font: inherit;\n    font-size: 1rem;\n    font-weight: 700;\n    line-height: 1.3;\n    text-align: center;\n    text-decoration: none;\n    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;\n  }\n\n  #comp-ld-4821 .ld-project__link:hover {\n    border-color: var(--ld-orange-light);\n    background: var(--ld-orange-dark);\n    box-shadow: 0 9px 22px rgba(219, 116, 36, 0.38);\n    color: #fff;\n    text-decoration: none;\n    transform: translateY(-2px);\n  }\n\n  #comp-ld-4821 .ld-project__link:active {\n    transform: translateY(0);\n  }\n\n  #comp-ld-4821 .ld-project__link svg {\n    width: 1.15rem;\n    height: 1.15rem;\n    flex: 0 0 auto;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  @media (min-width: 680px) {\n    #comp-ld-4821 {\n      padding: 1.75rem;\n    }\n\n    #comp-ld-4821 .ld-project__heading {\n      margin-bottom: 1.5rem;\n    }\n\n    #comp-ld-4821 .ld-project__options {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    #comp-ld-4821 .ld-project__option {\n      grid-template-columns: 1fr 1.4rem;\n      grid-template-rows: 3rem auto;\n      align-content: start;\n      min-height: 9.25rem;\n      padding: 1rem;\n    }\n\n    #comp-ld-4821 .ld-project__icon {\n      grid-column: 1;\n      grid-row: 1;\n    }\n\n    #comp-ld-4821 .ld-project__check {\n      grid-column: 2;\n      grid-row: 1;\n      justify-self: end;\n    }\n\n    #comp-ld-4821 .ld-project__option-label {\n      grid-column: 1 \/ -1;\n      grid-row: 2;\n      align-self: start;\n    }\n\n    #comp-ld-4821 .ld-project__result {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      min-height: 5.35rem;\n      align-items: center;\n      gap: 1.25rem;\n      padding: 1.15rem 0.25rem 0.1rem;\n    }\n\n    #comp-ld-4821 .ld-project__result-text {\n      min-height: 3.1rem;\n      margin: 0;\n      justify-content: flex-start;\n      text-align: left;\n    }\n\n    #comp-ld-4821 .ld-project__link {\n      width: auto;\n      min-width: 13rem;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-4821 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-4821\" aria-labelledby=\"comp-ld-4821-title\">\n  <div class=\"ld-project__heading\">\n    <div id=\"comp-ld-4821-title\" class=\"ld-project__title\">\u00bfQu\u00e9 tipo de web quieres publicar?<\/div>\n    <p class=\"ld-project__intro\">Elige tu proyecto y te mostramos el hosting m\u00e1s adecuado para empezar.<\/p>\n  <\/div>\n\n  <div class=\"ld-project__options\" role=\"group\" aria-label=\"Tipo de proyecto web\">\n    <button class=\"ld-project__option\" type=\"button\" data-project=\"html\" aria-pressed=\"true\" aria-controls=\"comp-ld-4821-result\">\n      <span class=\"ld-project__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" focusable=\"false\"><rect x=\"2.75\" y=\"4.25\" width=\"18.5\" height=\"15.5\" rx=\"2.5\"><\/rect><path d=\"M3 8.25h18M7.75 12l-2.25 2 2.25 2M16.25 12l2.25 2-2.25 2M13.5 11l-3 6\"><\/path><\/svg>\n      <\/span>\n      <span class=\"ld-project__option-label\">Web con HTML, CSS o JavaScript<\/span>\n      <span class=\"ld-project__check\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" focusable=\"false\"><path d=\"m5.5 10 3 3 6-6\"><\/path><\/svg>\n      <\/span>\n    <\/button>\n\n    <button class=\"ld-project__option\" type=\"button\" data-project=\"wordpress\" aria-pressed=\"false\" aria-controls=\"comp-ld-4821-result\">\n      <span class=\"ld-project__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9.25\"><\/circle><path d=\"M3.25 9.25h5.1M15.45 9.25h5.3M7.15 9.25l3.35 9.25M16.95 9.25l-3.2 9.25M9.65 5.7h3.2M10.3 9.25l3.45 9.25M14.5 6.2c1.3.9 1.25 2.15.75 3.45l-2.2 6.35\"><\/path><\/svg>\n      <\/span>\n      <span class=\"ld-project__option-label\">Web con WordPress<\/span>\n      <span class=\"ld-project__check\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" focusable=\"false\"><path d=\"m5.5 10 3 3 6-6\"><\/path><\/svg>\n      <\/span>\n    <\/button>\n\n    <button class=\"ld-project__option\" type=\"button\" data-project=\"prestashop\" aria-pressed=\"false\" aria-controls=\"comp-ld-4821-result\">\n      <span class=\"ld-project__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M3 5h2l2.05 9.1a2 2 0 0 0 1.95 1.56h8.9a2 2 0 0 0 1.94-1.5L21 9H6M9.5 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM19 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"><\/path><\/svg>\n      <\/span>\n      <span class=\"ld-project__option-label\">Tienda online con PrestaShop<\/span>\n      <span class=\"ld-project__check\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" focusable=\"false\"><path d=\"m5.5 10 3 3 6-6\"><\/path><\/svg>\n      <\/span>\n    <\/button>\n  <\/div>\n\n  <div id=\"comp-ld-4821-result\" class=\"ld-project__result\" aria-live=\"polite\" aria-atomic=\"true\">\n    <p class=\"ld-project__result-text\">\u00bfHas creado una web con HTML, CSS o JavaScript? Aqu\u00ed puedes subir sus archivos y publicarla en Internet de forma sencilla.<\/p>\n    <a class=\"ld-project__link\" href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\" data-cta=\"html-hosting\">\n      <span class=\"ld-project__link-label\">Ver hosting web<\/span>\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 10h11M11 6l4 4-4 4\"><\/path><\/svg>\n    <\/a>\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    var block = document.getElementById('comp-ld-4821');\n    if (!block || block.getAttribute('data-ready') === 'true') return;\n    block.setAttribute('data-ready', 'true');\n\n    var projects = {\n      html: {\n        text: '\u00bfHas creado una web con HTML, CSS o JavaScript? Aqu\u00ed puedes subir sus archivos y publicarla en Internet de forma sencilla.',\n        url: 'https:\/\/www.loading.es\/hosting\/index.html',\n        label: 'Ver hosting web',\n        tracking: 'html-hosting'\n      },\n      wordpress: {\n        text: '\u00bfQuieres crear tu web con WordPress? Este hosting te lo deja preparado para empezar sin tocar configuraciones t\u00e9cnicas.',\n        url: 'https:\/\/www.loading.es\/hosting-wordpress\/index.html',\n        label: 'Ver hosting WordPress',\n        tracking: 'wordpress-hosting'\n      },\n      prestashop: {\n        text: '\u00bfQuieres abrir una tienda online? Este hosting est\u00e1 preparado para a\u00f1adir productos, recibir pedidos y aceptar pagos con PrestaShop.',\n        url: 'https:\/\/www.loading.es\/hosting-prestashop\/index.html',\n        label: 'Ver hosting PrestaShop',\n        tracking: 'prestashop-hosting'\n      }\n    };\n\n    var options = block.querySelectorAll('.ld-project__option');\n    var resultText = block.querySelector('.ld-project__result-text');\n    var link = block.querySelector('.ld-project__link');\n    var linkLabel = block.querySelector('.ld-project__link-label');\n\n    function selectProject(option) {\n      var project = projects[option.getAttribute('data-project')];\n      if (!project) return;\n\n      options.forEach(function (item) {\n        item.setAttribute('aria-pressed', item === option ? 'true' : 'false');\n      });\n\n      resultText.textContent = project.text;\n      link.href = project.url;\n      link.setAttribute('data-cta', project.tracking);\n      linkLabel.textContent = project.label;\n    }\n\n    options.forEach(function (option) {\n      option.addEventListener('keydown', function (event) {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          selectProject(option);\n        }\n      });\n\n      option.addEventListener('click', function () {\n        selectProject(option);\n      });\n    });\n  });\n<\/script>\n<!-- FIN BLOQUE: que-tipo-de-web-quieres-publicar -->\n\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-que-es-html-y-para-que-sirve\">Qu\u00e9 es HTML y para qu\u00e9 sirve<\/h2>\n\n\n\n<p><strong>HTML es un lenguaje de marcado<\/strong>, lo que significa que usa etiquetas para definir diferentes partes del contenido de una p\u00e1gina. Con HTML podemos estructurar un sitio web en secciones, encabezados, p\u00e1rrafos, im\u00e1genes y enlaces. Cada uno de estos elementos permite que el navegador muestre la p\u00e1gina correctamente y se usable por todos. En otras palabras, sin HTML, no existir\u00eda internet tal y como lo conocemos.<\/p>\n\n\n\n<p>Para <strong>aprender HTM<\/strong>L no necesitas conocimientos avanzados; solo un editor de texto y algo de pr\u00e1ctica. Si no tienes uno, puedes explorar nuestra <a href=\"https:\/\/www.loading.es\/blog\/mejores-editores-html-gratuitos\/\" target=\"_blank\" rel=\"noopener\" title=\"Editores html\">gu\u00eda de editores HTML gratuitos<\/a> para elegir el que m\u00e1s te convenga.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>HTML es un lenguaje de marcado que utiliza etiquetas para organizar el contenido de una p\u00e1gina. Este marcado permite identificar textos, im\u00e1genes y otros elementos para que el navegador pueda mostrarlos correctamente.<\/p>\n<cite>\u2014 <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Learn_web_development\/Getting_started\/Your_first_website\/Creating_the_content\" target=\"_blank\" rel=\"noopener\" title=\"\">MDN Web Docs de Mozilla<\/a><\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-estructura-html-basica\">Estructura HTML B\u00e1sica<\/h3>\n\n\n\n<p>Todo <strong>archivo HTML tiene una estructura b\u00e1sica<\/strong>, similar a la de una carta o documento, donde cada parte tiene un prop\u00f3sito claro. Veamos un ejemplo simple de la estructura principal de un documento HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&nbsp; &nbsp;&lt;title&gt;Mi Primera P\u00e1gina&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&nbsp; &nbsp;&lt;h1&gt;\u00a1Bienvenido a mi p\u00e1gina web!&lt;\/h1&gt;\n&nbsp; &nbsp;&lt;p&gt;Este es un ejemplo de un p\u00e1rrafo en HTML.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>En este ejemplo:<\/p>\n\n\n\n<ul>\n<li><code>&lt;!DOCTYPE html&gt;<\/code> indica al navegador que el documento es HTML5.<\/li>\n\n\n\n<li><code>&lt;html&gt;<\/code> es la etiqueta que contiene todo el c\u00f3digo HTML.<\/li>\n\n\n\n<li><code>&lt;head&gt;<\/code> incluye metadatos y configuraciones, como el t\u00edtulo (<code>&lt;title&gt;<\/code>) de la p\u00e1gina.<\/li>\n\n\n\n<li><code>&lt;body><\/code> contiene el contenido visible para los visitantes, como textos, im\u00e1genes y enlaces.<\/li>\n<\/ul>\n\n\n\n<!-- BLOQUE: estructura-html-basica -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-814,\n  #comp-ld-814 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-814 {\n    --ld-dark: #37363d;\n    --ld-orange: #db7424;\n    --ld-cyan: #00bcdf;\n    --ld-soft: #f4f4f6;\n    --ld-muted: #64636b;\n    --ld-border: rgba(55, 54, 61, 0.12);\n    width: 100%;\n    margin: 2rem 0;\n    padding: 1.5rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 20px;\n    background: #fff;\n    box-shadow: 0 12px 30px rgba(55, 54, 61, 0.07);\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n  }\n\n  #comp-ld-814 .ld-struct__title {\n    margin: 0 0 0.35rem;\n    color: var(--ld-dark);\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n  }\n\n  #comp-ld-814 .ld-struct__intro {\n    margin: 0 0 1.1rem;\n    color: var(--ld-muted);\n    font-size: 0.98rem;\n    line-height: 1.55;\n    max-width: 40rem;\n  }\n\n  #comp-ld-814 .ld-struct__layer {\n    position: relative;\n    border: 1px solid var(--ld-border);\n    border-radius: 14px;\n    background: #fff;\n    padding: 0.9rem 0.95rem 1rem;\n    transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);\n  }\n\n  #comp-ld-814 .ld-struct__layer:hover {\n    border-color: rgba(219, 116, 36, 0.45);\n    box-shadow: 0 8px 20px rgba(219, 116, 36, 0.1);\n  }\n\n  #comp-ld-814 .ld-struct__layer--root {\n    background: var(--ld-soft);\n  }\n\n  #comp-ld-814 .ld-struct__layer--html {\n    margin-top: 0.6rem;\n    background: #fff;\n  }\n\n  #comp-ld-814 .ld-struct__branch {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 0.7rem;\n    margin-top: 0.65rem;\n  }\n\n  #comp-ld-814 .ld-struct__layer--head {\n    border-left: 3px solid var(--ld-cyan);\n  }\n\n  #comp-ld-814 .ld-struct__layer--body {\n    border-left: 3px solid var(--ld-orange);\n  }\n\n  #comp-ld-814 .ld-struct__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 0.55rem;\n    color: var(--ld-dark);\n    font-weight: 600;\n    font-size: 0.92rem;\n  }\n\n  #comp-ld-814 .ld-struct__chip svg {\n    width: 1.1rem;\n    height: 1.1rem;\n    flex: 0 0 auto;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    color: var(--ld-orange);\n  }\n\n  #comp-ld-814 .ld-struct__layer--head .ld-struct__chip svg {\n    color: var(--ld-cyan);\n  }\n\n  #comp-ld-814 .ld-struct__kbd {\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--ld-dark);\n    background: var(--ld-soft);\n    border: 1px solid var(--ld-border);\n    border-radius: 6px;\n    padding: 0.12rem 0.42rem;\n  }\n\n  #comp-ld-814 .ld-struct__purpose {\n    margin: 0;\n    color: var(--ld-muted);\n    font-size: 0.9rem;\n    line-height: 1.5;\n  }\n\n  #comp-ld-814 .ld-struct__sub {\n    margin: 0.5rem 0 0;\n    padding-left: 0.2rem;\n    color: var(--ld-muted);\n    font-size: 0.85rem;\n    line-height: 1.55;\n  }\n\n  #comp-ld-814 .ld-struct__sub kbd {\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.8rem;\n    color: var(--ld-dark);\n    background: var(--ld-soft);\n    border: 1px solid var(--ld-border);\n    border-radius: 5px;\n    padding: 0.06rem 0.32rem;\n  }\n\n  @media (min-width: 640px) {\n    #comp-ld-814 {\n      padding: 1.75rem;\n    }\n\n    #comp-ld-814 .ld-struct__branch {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-814 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-814\" aria-labelledby=\"comp-ld-814-title\">\n  <div id=\"comp-ld-814-title\" class=\"ld-struct__title\">Anatom\u00eda de un documento HTML<\/div>\n  <p class=\"ld-struct__intro\">Todo archivo HTML sigue la misma estructura: una declaraci\u00f3n, una ra\u00edz y dos bloques, uno invisible y otro visible.<\/p>\n\n  <div class=\"ld-struct__layer ld-struct__layer--root\">\n    <div class=\"ld-struct__chip\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n      <span class=\"ld-struct__kbd\">&lt;!DOCTYPE html&gt;<\/span>\n    <\/div>\n    <p class=\"ld-struct__purpose\">Avisa al navegador de que el documento es HTML5.<\/p>\n\n    <div class=\"ld-struct__layer ld-struct__layer--html\">\n      <div class=\"ld-struct__chip\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8 4l-4 8 4 8M16 4l4 8-4 8\"><\/path><\/svg>\n        <span class=\"ld-struct__kbd\">&lt;html&gt;<\/span>\n      <\/div>\n      <p class=\"ld-struct__purpose\">Contiene todo el c\u00f3digo de la p\u00e1gina.<\/p>\n\n      <div class=\"ld-struct__branch\">\n        <div class=\"ld-struct__layer ld-struct__layer--head\">\n          <div class=\"ld-struct__chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><path d=\"M3 12h5M16 12h5\"><\/path><\/svg>\n            <span class=\"ld-struct__kbd\">&lt;head&gt;<\/span>\n          <\/div>\n          <p class=\"ld-struct__purpose\">Metadatos y configuraci\u00f3n, no visibles.<\/p>\n          <p class=\"ld-struct__sub\">Incluye <kbd>&lt;title&gt;<\/kbd>, <kbd>&lt;meta&gt;<\/kbd> y enlaces a estilos.<\/p>\n        <\/div>\n\n        <div class=\"ld-struct__layer ld-struct__layer--body\">\n          <div class=\"ld-struct__chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"><\/rect><path d=\"M8 9h8M8 13h8M8 17h5\"><\/path><\/svg>\n            <span class=\"ld-struct__kbd\">&lt;body&gt;<\/span>\n          <\/div>\n          <p class=\"ld-struct__purpose\">Contenido visible: textos, im\u00e1genes y enlaces.<\/p>\n          <p class=\"ld-struct__sub\">Aqu\u00ed van <kbd>&lt;h1&gt;<\/kbd>, <kbd>&lt;p&gt;<\/kbd>, <kbd>&lt;img&gt;<\/kbd> y <kbd>&lt;a&gt;<\/kbd>.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- FIN BLOQUE: estructura-html-basica -->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-las-10-etiquetas-html-basicas-para-principiantes\">Las 10 etiquetas HTML b\u00e1sicas para principiantes<\/h2>\n\n\n\n<p>Estas son las etiquetas m\u00e1s comunes en HTML que puedes comenzar a usar de inmediato y que debes conocer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-1-encabezados-h1-a-h6\">1. Encabezados (<code>&lt;h1&gt; a &lt;h6&gt;<\/code>)<\/h4>\n\n\n\n<p>Los encabezados organizan el contenido en secciones. En HTML hay seis niveles de encabezados (<code>&lt;h1&gt;<\/code> a <code>&lt;h6&gt;<\/code>), siendo <code>&lt;h1&gt;<\/code> el m\u00e1s importante.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Encabezado Principal&lt;\/h1&gt;\n&lt;h2&gt;Subencabezado&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-2-parrafos-p\">2. P\u00e1rrafos (<code>&lt;p&gt;<\/code>)<\/h4>\n\n\n\n<p>Se utiliza para crear bloques de texto. Es ideal para formatear el contenido textual en secciones de lectura.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Este es un p\u00e1rrafo en HTML.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-3-enlaces-a\">3. Enlaces (<code>&lt;a&gt;<\/code>)<\/h4>\n\n\n\n<p>Permiten enlazar otras p\u00e1ginas o documentos. Aqu\u00ed un ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.loading.es\/hosting\/index.html\"&gt;Servicios de Hosting&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-4-imagenes-img\">4. Im\u00e1genes (<code>&lt;img&gt;<\/code>)<\/h4>\n\n\n\n<p>Las im\u00e1genes a\u00f1aden atractivo visual. Para incluirlas, usa <code>&lt;img&gt;<\/code> con el atributo <code>src<\/code> que indica el archivo de la imagen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"imagen.jpg\" alt=\"Descripci\u00f3n de la imagen\"&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-5-listas-ul-ol-li\">5. Listas (<code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code>)<\/h4>\n\n\n\n<p>Las listas permiten organizar la informaci\u00f3n de manera clara. Pueden ser ordenadas (<code>&lt;ol&gt;<\/code>) o desordenadas (<code>&lt;ul&gt;<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;\n&nbsp; &nbsp;&lt;li&gt;Elemento de lista 1&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;Elemento de lista 2&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-6-divisiones-div\">6. Divisiones (<code>&lt;div&gt;<\/code>)<\/h4>\n\n\n\n<p><code>&lt;div&gt;<\/code> se usa para agrupar contenido y es clave para crear secciones en el dise\u00f1o de la p\u00e1gina.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n&nbsp; &nbsp;&lt;h2&gt;Secci\u00f3n de contenido&lt;\/h2&gt;\n&nbsp; &nbsp;&lt;p&gt;Contenido de la secci\u00f3n.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-7-meta-meta\">7. Meta (<code>&lt;meta&gt;<\/code>)<\/h4>\n\n\n\n<p>Esta etiqueta proporciona informaci\u00f3n sobre la p\u00e1gina a los motores de b\u00fasqueda y navegadores. Es clave para optimizar el SEO de tu sitio.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"description\" content=\"Descripci\u00f3n de la p\u00e1gina\"&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-8-span-span\">8. Span (<code>&lt;span&gt;<\/code>)<\/h4>\n\n\n\n<p><code>&lt;span&gt;<\/code> es \u00fatil para aplicar estilos a peque\u00f1as partes de texto dentro de otras etiquetas, sin que interrumpa el flujo del contenido.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Este es un &lt;span style=\"color:red;\"&gt;texto resaltado&lt;\/span&gt; en HTML.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-9-input-input\">9. Input (<code>&lt;input&gt;<\/code>)<\/h4>\n\n\n\n<p><code>&lt;input&gt;<\/code> es una etiqueta vers\u00e1til para crear campos de entrada en formularios, como casillas de texto o botones.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;\n&nbsp; &nbsp;&lt;label for=\"nombre\"&gt;Nombre:&lt;\/label&gt;\n&nbsp; &nbsp;&lt;input type=\"text\" id=\"nombre\" name=\"nombre\"&gt;\n&nbsp; &nbsp;&lt;input type=\"submit\" value=\"Enviar\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-10-nav-nav\">10. Nav (<code>&lt;nav&gt;<\/code>)<\/h4>\n\n\n\n<p><code>&lt;nav&gt;<\/code> agrupa enlaces de navegaci\u00f3n, ideal para crear men\u00fas o barras de navegaci\u00f3n.&lt;nav&gt;<br>&nbsp; &nbsp;&lt;a href=\u00bb#inicio\u00bb&gt;Inicio&lt;\/a&gt; |<br>&nbsp; &nbsp;&lt;a href=\u00bb#servicios\u00bb&gt;Servicios&lt;\/a&gt; |<br>&nbsp; &nbsp;&lt;a href=\u00bb#contacto\u00bb&gt;Contacto&lt;\/a&gt;<br>&lt;\/nav&gt;<\/p>\n\n\n\n<!-- BLOQUE: las-10-etiquetas-html-basicas -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-927,\n  #comp-ld-927 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-927 {\n    --ld-dark: #37363d;\n    --ld-orange: #db7424;\n    --ld-orange-soft: rgba(219, 116, 36, 0.1);\n    --ld-cyan: #00bcdf;\n    --ld-soft: #f4f4f6;\n    --ld-muted: #64636b;\n    --ld-border: rgba(55, 54, 61, 0.12);\n    width: 100%;\n    margin: 2rem 0;\n    padding: 1.5rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 20px;\n    background: #fff;\n    box-shadow: 0 14px 34px rgba(55, 54, 61, 0.08);\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n  }\n\n  #comp-ld-927 .ld-tags__title {\n    margin: 0 0 0.35rem;\n    color: var(--ld-dark);\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n  }\n\n  #comp-ld-927 .ld-tags__intro {\n    margin: 0 0 1.1rem;\n    color: var(--ld-muted);\n    font-size: 0.98rem;\n    line-height: 1.55;\n    max-width: 40rem;\n  }\n\n  #comp-ld-927 .ld-tags__ribbon {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 1.15rem;\n  }\n\n  #comp-ld-927 .ld-tags__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    margin: 0;\n    padding: 0.5rem 0.85rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 999px;\n    background: #fff;\n    color: var(--ld-dark);\n    font: inherit;\n    font-size: 0.9rem;\n    font-weight: 600;\n    line-height: 1.2;\n    cursor: pointer;\n    appearance: none;\n    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;\n  }\n\n  #comp-ld-927 .ld-tags__chip:hover {\n    border-color: rgba(219, 116, 36, 0.55);\n    box-shadow: 0 6px 16px rgba(219, 116, 36, 0.1);\n    transform: translateY(-2px);\n  }\n\n  #comp-ld-927 .ld-tags__chip:active {\n    transform: translateY(0) scale(0.98);\n  }\n\n  #comp-ld-927 .ld-tags__chip:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.55);\n    outline-offset: 3px;\n  }\n\n  #comp-ld-927 .ld-tags__chip[aria-selected=\"true\"] {\n    border-color: var(--ld-orange);\n    background: var(--ld-orange);\n    color: #fff;\n    box-shadow: 0 8px 18px rgba(219, 116, 36, 0.28);\n  }\n\n  #comp-ld-927 .ld-tags__chip-num {\n    font-size: 0.78rem;\n    font-weight: 700;\n    opacity: 0.7;\n  }\n\n  #comp-ld-927 .ld-tags__panel {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1.1rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 14px;\n    background: var(--ld-soft);\n  }\n\n  #comp-ld-927 .ld-tags__head {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: 0.55rem;\n  }\n\n  #comp-ld-927 .ld-tags__tag {\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 1.1rem;\n    font-weight: 600;\n    color: var(--ld-dark);\n    background: #fff;\n    border: 1px solid var(--ld-border);\n    border-radius: 8px;\n    padding: 0.2rem 0.6rem;\n  }\n\n  #comp-ld-927 .ld-tags__name {\n    color: var(--ld-dark);\n    font-size: 1rem;\n    font-weight: 600;\n  }\n\n  #comp-ld-927 .ld-tags__func {\n    margin: 0;\n    color: var(--ld-muted);\n    font-size: 0.95rem;\n    line-height: 1.55;\n  }\n\n  #comp-ld-927 .ld-tags__code {\n    margin: 0;\n    padding: 0.9rem 1rem;\n    border-radius: 10px;\n    background: #2a2930;\n    color: #e7e7ea;\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.88rem;\n    line-height: 1.6;\n    overflow-x: auto;\n    white-space: pre;\n    border: 1px solid rgba(255, 255, 255, 0.06);\n  }\n\n  #comp-ld-927 .ld-tags__code .ld-tags__tok {\n    color: var(--ld-orange);\n  }\n\n  #comp-ld-927 .ld-tags__code .ld-tags__attr {\n    color: var(--ld-cyan);\n  }\n\n  #comp-ld-927 .ld-tags__code .ld-tags__val {\n    color: #f0a96a;\n  }\n\n  #comp-ld-927 .ld-tags__hint {\n    display: flex;\n    align-items: center;\n    gap: 0.45rem;\n    margin: 0;\n    color: var(--ld-muted);\n    font-size: 0.82rem;\n  }\n\n  #comp-ld-927 .ld-tags__hint svg {\n    width: 1rem;\n    height: 1rem;\n    flex: 0 0 auto;\n    fill: none;\n    stroke: var(--ld-cyan);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  @media (min-width: 720px) {\n    #comp-ld-927 {\n      padding: 1.75rem;\n    }\n\n    #comp-ld-927 .ld-tags__panel {\n      grid-template-columns: 0.9fr 1.1fr;\n      align-items: stretch;\n    }\n\n    #comp-ld-927 .ld-tags__code {\n      align-self: stretch;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-927 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-927\" aria-labelledby=\"comp-ld-927-title\">\n  <div id=\"comp-ld-927-title\" class=\"ld-tags__title\">Las 10 etiquetas que vas a usar siempre<\/div>\n  <p class=\"ld-tags__intro\">Pulsa cada etiqueta para ver su funci\u00f3n y un ejemplo listo para copiar.<\/p>\n\n  <div class=\"ld-tags__ribbon\" role=\"tablist\" aria-label=\"Etiquetas HTML b\u00e1sicas\">\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"comp-ld-927-panel\" data-tag=\"0\"><span class=\"ld-tags__chip-num\">01<\/span> Encabezados<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"1\"><span class=\"ld-tags__chip-num\">02<\/span> P\u00e1rrafos<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"2\"><span class=\"ld-tags__chip-num\">03<\/span> Enlaces<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"3\"><span class=\"ld-tags__chip-num\">04<\/span> Im\u00e1genes<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"4\"><span class=\"ld-tags__chip-num\">05<\/span> Listas<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"5\"><span class=\"ld-tags__chip-num\">06<\/span> Divisiones<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"6\"><span class=\"ld-tags__chip-num\">07<\/span> Meta<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"7\"><span class=\"ld-tags__chip-num\">08<\/span> Span<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"8\"><span class=\"ld-tags__chip-num\">09<\/span> Input<\/button>\n    <button class=\"ld-tags__chip\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-927-panel\" data-tag=\"9\"><span class=\"ld-tags__chip-num\">10<\/span> Nav<\/button>\n  <\/div>\n\n  <div id=\"comp-ld-927-panel\" class=\"ld-tags__panel\" role=\"tabpanel\" aria-live=\"polite\">\n    <div>\n      <div class=\"ld-tags__head\">\n        <span class=\"ld-tags__tag ld-tags__anim\">&lt;h1&gt; &#8211; &lt;h6&gt;<\/span>\n        <span class=\"ld-tags__name ld-tags__anim\">Encabezados<\/span>\n      <\/div>\n      <p class=\"ld-tags__func ld-tags__anim\">Organizan el contenido en seis niveles de importancia, desde el t\u00edtulo principal hasta los subt\u00edtulos.<\/p>\n      <p class=\"ld-tags__hint ld-tags__anim\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 8v5M12 16h.01\"><\/path><\/svg>\n        <span class=\"ld-tags__hint-text\">Usa solo un &lt;h1&gt; por p\u00e1gina.<\/span>\n      <\/p>\n    <\/div>\n    <pre class=\"ld-tags__code ld-tags__anim\" aria-label=\"Ejemplo de encabezados\"><span class=\"ld-tags__tok\">&lt;h1&gt;<\/span>Encabezado principal<span class=\"ld-tags__tok\">&lt;\/h1&gt;<\/span>\n<span class=\"ld-tags__tok\">&lt;h2&gt;<\/span>Subencabezado<span class=\"ld-tags__tok\">&lt;\/h2&gt;<\/span><\/pre>\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    var block = document.getElementById('comp-ld-927');\n    if (!block || block.getAttribute('data-ready') === 'true') return;\n    block.setAttribute('data-ready', 'true');\n\n    var tags = [\n      { tag: '&lt;h1&gt; - &lt;h6&gt;', name: 'Encabezados', func: 'Organizan el contenido en seis niveles de importancia, desde el t\u00edtulo principal hasta los subt\u00edtulos.', hint: 'Usa solo un &lt;h1&gt; por p\u00e1gina.', code: '<span class=\"ld-tags__tok\">&lt;h1&gt;<\/span>Encabezado principal<span class=\"ld-tags__tok\">&lt;\/h1&gt;<\/span>\\n<span class=\"ld-tags__tok\">&lt;h2&gt;<\/span>Subencabezado<span class=\"ld-tags__tok\">&lt;\/h2&gt;<\/span>' },\n      { tag: '&lt;p&gt;', name: 'P\u00e1rrafos', func: 'Crean bloques de texto para el contenido de lectura.', hint: 'Un p\u00e1rrafo, una idea.', code: '<span class=\"ld-tags__tok\">&lt;p&gt;<\/span>Este es un p\u00e1rrafo en HTML.<span class=\"ld-tags__tok\">&lt;\/p&gt;<\/span>' },\n      { tag: '&lt;a&gt;', name: 'Enlaces', func: 'Conectan p\u00e1ginas y recursos entre s\u00ed mediante el atributo href.', hint: 'El href indica el destino del enlace.', code: '<span class=\"ld-tags__tok\">&lt;a<\/span> <span class=\"ld-tags__attr\">href<\/span>=<span class=\"ld-tags__val\">\"https:\/\/www.loading.es\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>Servicios de hosting<span class=\"ld-tags__tok\">&lt;\/a&gt;<\/span>' },\n      { tag: '&lt;img&gt;', name: 'Im\u00e1genes', func: 'Muestran gr\u00e1ficos y siempre llevan un texto alternativo para la accesibilidad.', hint: 'El alt describe la imagen si no carga.', code: '<span class=\"ld-tags__tok\">&lt;img<\/span> <span class=\"ld-tags__attr\">src<\/span>=<span class=\"ld-tags__val\">\"imagen.jpg\"<\/span> <span class=\"ld-tags__attr\">alt<\/span>=<span class=\"ld-tags__val\">\"Descripci\u00f3n de la imagen\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>' },\n      { tag: '&lt;ul&gt; &lt;ol&gt; &lt;li&gt;', name: 'Listas', func: 'Ordenan informaci\u00f3n en vi\u00f1etas (ul) o en pasos numerados (ol).', hint: 'Cada elemento va dentro de un &lt;li&gt;.', code: '<span class=\"ld-tags__tok\">&lt;ul&gt;<\/span>\\n  <span class=\"ld-tags__tok\">&lt;li&gt;<\/span>HTML<span class=\"ld-tags__tok\">&lt;\/li&gt;<\/span>\\n  <span class=\"ld-tags__tok\">&lt;li&gt;<\/span>CSS<span class=\"ld-tags__tok\">&lt;\/li&gt;<\/span>\\n<span class=\"ld-tags__tok\">&lt;\/ul&gt;<\/span>' },\n      { tag: '&lt;div&gt;', name: 'Divisiones', func: 'Agrupan contenido en secciones y son clave para maquetar la p\u00e1gina.', hint: 'Sirven de contenedor para aplicar estilos.', code: '<span class=\"ld-tags__tok\">&lt;div&gt;<\/span>\\n  <span class=\"ld-tags__tok\">&lt;h2&gt;<\/span>Secci\u00f3n<span class=\"ld-tags__tok\">&lt;\/h2&gt;<\/span>\\n  <span class=\"ld-tags__tok\">&lt;p&gt;<\/span>Contenido de la secci\u00f3n.<span class=\"ld-tags__tok\">&lt;\/p&gt;<\/span>\\n<span class=\"ld-tags__tok\">&lt;\/div&gt;<\/span>' },\n      { tag: '&lt;meta&gt;', name: 'Meta', func: 'Dan informaci\u00f3n a los buscadores y navegadores. Clave para el SEO.', hint: 'Va siempre dentro del &lt;head&gt;.', code: '<span class=\"ld-tags__tok\">&lt;meta<\/span> <span class=\"ld-tags__attr\">name<\/span>=<span class=\"ld-tags__val\">\"description\"<\/span>\\n  <span class=\"ld-tags__attr\">content<\/span>=<span class=\"ld-tags__val\">\"Descripci\u00f3n de la p\u00e1gina\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>' },\n      { tag: '&lt;span&gt;', name: 'Span', func: 'Resaltan partes de texto dentro de un p\u00e1rrafo sin romper el flujo.', hint: 'No provoca salto de l\u00ednea.', code: '<span class=\"ld-tags__tok\">&lt;p&gt;<\/span>Texto con <span class=\"ld-tags__tok\">&lt;span<\/span> <span class=\"ld-tags__attr\">style<\/span>=<span class=\"ld-tags__val\">\"color:red\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>resaltado<span class=\"ld-tags__tok\">&lt;\/span&gt;<\/span>.<span class=\"ld-tags__tok\">&lt;\/p&gt;<\/span>' },\n      { tag: '&lt;input&gt;', name: 'Input', func: 'Recogen datos del usuario en formularios: texto, correo, botones y m\u00e1s.', hint: 'El type define el tipo de campo.', code: '<span class=\"ld-tags__tok\">&lt;input<\/span> <span class=\"ld-tags__attr\">type<\/span>=<span class=\"ld-tags__val\">\"text\"<\/span> <span class=\"ld-tags__attr\">name<\/span>=<span class=\"ld-tags__val\">\"nombre\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>\\n<span class=\"ld-tags__tok\">&lt;input<\/span> <span class=\"ld-tags__attr\">type<\/span>=<span class=\"ld-tags__val\">\"submit\"<\/span> <span class=\"ld-tags__attr\">value<\/span>=<span class=\"ld-tags__val\">\"Enviar\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>' },\n      { tag: '&lt;nav&gt;', name: 'Nav', func: 'Agrupan los enlaces de navegaci\u00f3n, ideales para men\u00fas y barras de men\u00fa.', hint: 'Reserva nav para los enlaces principales.', code: '<span class=\"ld-tags__tok\">&lt;nav&gt;<\/span>\\n  <span class=\"ld-tags__tok\">&lt;a<\/span> <span class=\"ld-tags__attr\">href<\/span>=<span class=\"ld-tags__val\">\"#inicio\"<\/span><span class=\"ld-tags__tok\">&gt;<\/span>Inicio<span class=\"ld-tags__tok\">&lt;\/a&gt;<\/span>\\n<span class=\"ld-tags__tok\">&lt;\/nav&gt;<\/span>' }\n    ];\n\n    var chips = block.querySelectorAll('.ld-tags__chip');\n    var panel = document.getElementById('comp-ld-927-panel');\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    function render(i) {\n      var t = tags[i];\n      if (!t || !panel) return;\n      var headTag = panel.querySelector('.ld-tags__tag');\n      var nameEl = panel.querySelector('.ld-tags__name');\n      var funcEl = panel.querySelector('.ld-tags__func');\n      var hintText = panel.querySelector('.ld-tags__hint-text');\n      var codeEl = panel.querySelector('.ld-tags__code');\n\n      headTag.innerHTML = t.tag;\n      nameEl.textContent = t.name;\n      funcEl.textContent = t.func;\n      if (hintText) hintText.innerHTML = t.hint;\n      codeEl.innerHTML = t.code;\n\n      if (!reduceMotion) {\n        var items = panel.querySelectorAll('.ld-tags__anim');\n        items.forEach(function (el, idx) {\n          el.animate([\n            { opacity: 0, transform: 'translateY(8px)', filter: 'blur(4px)' },\n            { opacity: 1, transform: 'translateY(0)', filter: 'blur(0px)' }\n          ], { duration: 420, delay: idx * 70, easing: 'cubic-bezier(0.32,0.72,0,1)', fill: 'both' });\n        });\n      }\n    }\n\n    chips.forEach(function (chip) {\n      chip.addEventListener('click', function () {\n        var i = parseInt(chip.getAttribute('data-tag'), 10);\n        chips.forEach(function (c) { c.setAttribute('aria-selected', c === chip ? 'true' : 'false'); });\n        render(i);\n      });\n      chip.addEventListener('keydown', function (e) {\n        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); chip.click(); }\n      });\n    });\n  });\n<\/script>\n<!-- FIN BLOQUE: las-10-etiquetas-html-basicas -->\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplos-de-uso-de-los-codigos-html-basicos\">Ejemplos de Uso de los C\u00f3digos HTML B\u00e1sicos<\/h2>\n\n\n\n<p>Para poner en pr\u00e1ctica los c\u00f3digos HTML b\u00e1sicos, aqu\u00ed tienes varios ejemplos detallados con explicaciones para cada elemento. Estos ejemplos son \u00fatiles para aprender a estructurar formularios, tablas, enlaces, y mucho m\u00e1s en tu sitio web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-1-formulario-de-contacto-completo\">Ejemplo 1: Formulario de Contacto Completo<\/h3>\n\n\n\n<p>Este formulario simple permite al usuario enviar su nombre y correo electr\u00f3nico.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"\/enviar\"&gt;\n&nbsp; &nbsp;&lt;label for=\"nombre\"&gt;Nombre:&lt;\/label&gt;\n&nbsp; &nbsp;&lt;input type=\"text\" id=\"nombre\" name=\"nombre\"&gt;\n&nbsp; &nbsp;&lt;br&gt;\n&nbsp; &nbsp;&lt;label for=\"correo\"&gt;Correo:&lt;\/label&gt;\n&nbsp; &nbsp;&lt;input type=\"email\" id=\"correo\" name=\"correo\"&gt;\n&nbsp; &nbsp;&lt;br&gt;\n&nbsp; &nbsp;&lt;input type=\"submit\" value=\"Enviar\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;form action=\"\/enviar\"&gt;<\/code>: Define un formulario y especifica la URL donde se enviar\u00e1n los datos al hacer clic en \u00abEnviar\u00bb.<\/li>\n\n\n\n<li><code>&lt;label for=\"nombre\"&gt;<\/code>: Crea una etiqueta para el campo de entrada \u00abnombre\u00bb, mejorando la accesibilidad.<\/li>\n\n\n\n<li><code>&lt;input type=\"text\" id=\"nombre\" name=\"nombre\"&gt;<\/code>: Crea un campo de texto donde el usuario puede escribir su nombre.<\/li>\n\n\n\n<li><code>&lt;input type=\"email\" id=\"correo\" name=\"correo\"&gt;<\/code>: A\u00f1ade un campo donde el usuario puede ingresar su correo electr\u00f3nico; se valida autom\u00e1ticamente para formatos de email.<\/li>\n\n\n\n<li><code>&lt;input type=\"submit\" value=\"Enviar\"&gt;<\/code>: Crea el bot\u00f3n para enviar los datos del formulario.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplo-2-tabla-de-productos\">Ejemplo 2: Tabla de Productos<\/h2>\n\n\n\n<p>Esta tabla muestra una lista de productos con sus respectivos precios.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table&gt;\n&nbsp; &nbsp;&lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;th&gt;Producto&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;th&gt;Precio&lt;\/th&gt;\n&nbsp; &nbsp;&lt;\/tr&gt;\n&nbsp; &nbsp;&lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;Producto 1&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;\u20ac10&lt;\/td&gt;\n&nbsp; &nbsp;&lt;\/tr&gt;\n&nbsp; &nbsp;&lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;Producto 2&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;\u20ac15&lt;\/td&gt;\n&nbsp; &nbsp;&lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;table&gt;<\/code>: Inicia la tabla.<\/li>\n\n\n\n<li><code>&lt;tr&gt;<\/code>: Define una fila de la tabla.<\/li>\n\n\n\n<li><code>&lt;th&gt;<\/code>: Indica el encabezado de una columna; en este caso, \u00abProducto\u00bb y \u00abPrecio\u00bb.<\/li>\n\n\n\n<li><code>&lt;td&gt;<\/code>: Define una celda de datos en cada fila, donde se muestra el nombre del producto y su precio.<\/li>\n<\/ul>\n\n\n\n<!-- BLOQUE: ejemplo-tabla-de-productos -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-533,\n  #comp-ld-533 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-533 {\n    --ld-dark: #37363d;\n    --ld-orange: #db7424;\n    --ld-soft: #f4f4f6;\n    --ld-muted: #64636b;\n    --ld-border: rgba(55, 54, 61, 0.12);\n    width: 100%;\n    margin: 2rem 0;\n    border: 1px solid var(--ld-border);\n    border-radius: 18px;\n    background: #fff;\n    box-shadow: 0 12px 30px rgba(55, 54, 61, 0.07);\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n    overflow: hidden;\n  }\n\n  #comp-ld-533 .ld-tbl__caption {\n    padding: 1.1rem 1.25rem 0.85rem;\n    color: var(--ld-muted);\n    font-size: 0.92rem;\n    font-weight: 500;\n  }\n\n  #comp-ld-533 .ld-tbl__scroll {\n    overflow-x: auto;\n  }\n\n  #comp-ld-533 table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.98rem;\n  }\n\n  #comp-ld-533 thead th {\n    background: var(--ld-dark);\n    color: #fff;\n    font-weight: 600;\n    text-align: left;\n    padding: 0.9rem 1.25rem;\n    letter-spacing: 0.01em;\n  }\n\n  #comp-ld-533 thead th:first-child {\n    border-top-left-radius: 0;\n  }\n\n  #comp-ld-533 tbody td {\n    padding: 0.85rem 1.25rem;\n    border-top: 1px solid var(--ld-border);\n    color: var(--ld-dark);\n  }\n\n  #comp-ld-533 tbody tr:nth-child(even) {\n    background: var(--ld-soft);\n  }\n\n  #comp-ld-533 tbody tr {\n    transition: background-color 180ms ease;\n  }\n\n  #comp-ld-533 tbody tr:hover {\n    background: rgba(219, 116, 36, 0.07);\n  }\n\n  #comp-ld-533 .ld-tbl__price {\n    font-weight: 600;\n    color: var(--ld-orange);\n    font-variant-numeric: tabular-nums;\n  }\n\n  @media (min-width: 560px) {\n    #comp-ld-533 thead th,\n    #comp-ld-533 tbody td {\n      padding: 1rem 1.5rem;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-533 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-533\" aria-labelledby=\"comp-ld-533-title\">\n  <div id=\"comp-ld-533-title\" class=\"ld-tbl__caption\">Ejemplo de tabla HTML: cat\u00e1logo con producto y precio<\/div>\n  <div class=\"ld-tbl__scroll\">\n    <table>\n      <thead>\n        <tr>\n          <th scope=\"col\">Producto<\/th>\n          <th scope=\"col\">Precio<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n        <tr>\n          <td>Producto 1<\/td>\n          <td class=\"ld-tbl__price\">\u20ac10<\/td>\n        <\/tr>\n        <tr>\n          <td>Producto 2<\/td>\n          <td class=\"ld-tbl__price\">\u20ac15<\/td>\n        <\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n<\/section>\n<!-- FIN BLOQUE: ejemplo-tabla-de-productos -->\n\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aioseo-ejemplo-3-enlace-con-descripcion-y-estilos\">Ejemplo 3: Enlace con Descripci\u00f3n y Estilos<\/h4>\n\n\n\n<p>Este ejemplo muestra c\u00f3mo crear un enlace con un t\u00edtulo descriptivo y agregar estilo b\u00e1sico.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.loading.es\" title=\"Ir a Loading\" style=\"color:blue; text-decoration:none;\"&gt;Visita Loading&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;a href=\"https:\/\/www.loading.es\"&gt;<\/code>: Crea un enlace hacia el sitio especificado.<\/li>\n\n\n\n<li><code>title=\"Ir a Loading\"<\/code>: Al pasar el rat\u00f3n sobre el enlace, muestra un mensaje emergente con esta descripci\u00f3n.<\/li>\n\n\n\n<li><code>style=\"color:blue; text-decoration:none;\"<\/code>: Aplica un estilo al enlace, cambiando el color del texto y eliminando el subrayado.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-4-lista-ordenada-y-desordenada\">Ejemplo 4: Lista Ordenada y Desordenada<\/h3>\n\n\n\n<p>Estas listas organizan la informaci\u00f3n en formato de lista numerada (ordenada) y de lista de puntos (desordenada).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ol&gt;\n&nbsp; &nbsp;&lt;li&gt;Paso 1: Abrir el editor&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;Paso 2: Escribir c\u00f3digo HTML&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;Paso 3: Guardar el archivo&lt;\/li&gt;\n&lt;\/ol&gt;\n\u200b\n&lt;ul&gt;\n&nbsp; &nbsp;&lt;li&gt;HTML&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;CSS&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;JavaScript&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;ol&gt;<\/code> y <code>&lt;ul&gt;<\/code>: Inician listas ordenadas y desordenadas, respectivamente.<\/li>\n\n\n\n<li><code>&lt;li&gt;<\/code>: Cada \u00edtem de la lista; en la ordenada se muestra con n\u00fameros y en la desordenada con puntos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplo-5-navegacion-con-la-etiqueta-nav\">Ejemplo 5: Navegaci\u00f3n con la Etiqueta <code>&lt;nav&gt;<\/code><\/h2>\n\n\n\n<p>Este ejemplo muestra un men\u00fa de navegaci\u00f3n que agrupa varios enlaces internos.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav&gt;\n&nbsp; &nbsp;&lt;a href=\"#inicio\"&gt;Inicio&lt;\/a&gt; |\n&nbsp; &nbsp;&lt;a href=\"#servicios\"&gt;Servicios&lt;\/a&gt; |\n&nbsp; &nbsp;&lt;a href=\"#contacto\"&gt;Contacto&lt;\/a&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;nav&gt;<\/code>: Define una secci\u00f3n de navegaci\u00f3n que puede contener enlaces internos o externos.<\/li>\n\n\n\n<li><code>&lt;a href=\"#inicio\"&gt;<\/code>: Cada enlace dentro del <code>&lt;nav&gt;<\/code> lleva al usuario a una secci\u00f3n espec\u00edfica dentro de la p\u00e1gina (anclajes internos).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-6-uso-de-span-para-resaltar-texto\">Ejemplo 6: Uso de <code>&lt;span&gt;<\/code> para Resaltar Texto<\/h3>\n\n\n\n<p>Este ejemplo muestra c\u00f3mo resaltar una parte espec\u00edfica de texto dentro de un p\u00e1rrafo usando <code>&lt;span&gt;<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Este es un ejemplo de &lt;span style=\"color: red;\"&gt;texto destacado&lt;\/span&gt; en HTML.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;p&gt;<\/code>: Inicia un p\u00e1rrafo.<\/li>\n\n\n\n<li><code>&lt;span style=\"color: red;\"&gt;<\/code>: Utiliza <code>&lt;span&gt;<\/code> para aplicar un estilo al texto \u00abtexto destacado\u00bb, cambiando su color a rojo.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplo-7-meta-descripcion-para-seo\">Ejemplo 7: Meta Descripci\u00f3n para SEO<\/h2>\n\n\n\n<p>Este fragmento de c\u00f3digo muestra c\u00f3mo agregar una descripci\u00f3n para los motores de b\u00fasqueda.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n&nbsp; &nbsp;&lt;meta name=\"description\" content=\"Esta es una p\u00e1gina de ejemplo para aprender HTML b\u00e1sico.\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>&lt;meta name=\"description\"&gt;<\/code>: Proporciona una descripci\u00f3n breve de la p\u00e1gina, ayudando a los motores de b\u00fasqueda a comprender el contenido y mejorar su SEO.<\/li>\n<\/ul>\n\n\n\n<!-- BLOQUE: ejemplos-de-uso-de-los-codigos-html -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-406,\n  #comp-ld-406 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-406 {\n    --ld-dark: #37363d;\n    --ld-shell: #2a2930;\n    --ld-core: #1f1e24;\n    --ld-orange: #db7424;\n    --ld-cyan: #00bcdf;\n    --ld-green: #198754;\n    --ld-muted: #c2c1c8;\n    --ld-border: rgba(255, 255, 255, 0.1);\n    width: 100%;\n    margin: 2rem 0;\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n  }\n\n  #comp-ld-406 .ld-term__title {\n    margin: 0 0 0.35rem;\n    color: var(--ld-dark);\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n  }\n\n  #comp-ld-406 .ld-term__intro {\n    margin: 0 0 1.1rem;\n    color: #64636b;\n    font-size: 0.98rem;\n    line-height: 1.55;\n    max-width: 40rem;\n  }\n\n  #comp-ld-406 .ld-term__shell {\n    padding: 9px;\n    border: 1px solid var(--ld-border);\n    border-radius: 20px;\n    background: var(--ld-shell);\n    box-shadow: 0 18px 44px rgba(31, 30, 36, 0.4);\n  }\n\n  #comp-ld-406 .ld-term__core {\n    border-radius: 14px;\n    background: var(--ld-core);\n    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);\n    overflow: hidden;\n  }\n\n  #comp-ld-406 .ld-term__bar {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.7rem 0.9rem;\n    border-bottom: 1px solid var(--ld-border);\n    background: rgba(255, 255, 255, 0.02);\n  }\n\n  #comp-ld-406 .ld-term__bar::before {\n    content: \"\";\n    flex: 0 0 auto;\n    width: 3rem;\n    height: 0.7rem;\n    background-image:\n      radial-gradient(circle at 50% 50%, var(--ld-orange) 0 0.32rem, transparent 0.34rem),\n      radial-gradient(circle at 50% 50%, var(--ld-cyan) 0 0.32rem, transparent 0.34rem),\n      radial-gradient(circle at 50% 50%, var(--ld-green) 0 0.32rem, transparent 0.34rem);\n    background-position: 0.35rem 50%, 1.5rem 50%, 2.65rem 50%;\n    background-size: 0.7rem 0.7rem;\n    background-repeat: no-repeat;\n  }\n  #comp-ld-406 .ld-term__file {\n    margin-left: 0.5rem;\n    color: var(--ld-muted);\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.8rem;\n  }\n\n  #comp-ld-406 .ld-term__tabs {\n    display: flex;\n    gap: 0.25rem;\n    padding: 0.55rem 0.6rem 0;\n    overflow-x: auto;\n    scrollbar-width: thin;\n  }\n\n  #comp-ld-406 .ld-term__tab {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0.5rem 0.85rem;\n    border: 1px solid transparent;\n    border-radius: 8px 8px 0 0;\n    background: transparent;\n    color: var(--ld-muted);\n    font: inherit;\n    font-size: 0.85rem;\n    font-weight: 600;\n    line-height: 1.2;\n    cursor: pointer;\n    appearance: none;\n    white-space: nowrap;\n    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n  }\n\n  #comp-ld-406 .ld-term__tab:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.04);\n  }\n\n  #comp-ld-406 .ld-term__tab:active {\n    transform: scale(0.98);\n  }\n\n  #comp-ld-406 .ld-term__tab:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.6);\n    outline-offset: 2px;\n  }\n\n  #comp-ld-406 .ld-term__tab[aria-selected=\"true\"] {\n    color: #fff;\n    background: rgba(219, 116, 36, 0.16);\n    border-color: rgba(219, 116, 36, 0.5);\n    border-bottom-color: transparent;\n  }\n\n  #comp-ld-406 .ld-term__views {\n    padding: 1rem 1.1rem 1.2rem;\n  }\n\n  #comp-ld-406 .ld-term__view[hidden] {\n    display: none;\n  }\n\n  #comp-ld-406 .ld-term__label {\n    margin: 0 0 0.6rem;\n    color: var(--ld-muted);\n    font-size: 0.82rem;\n    font-weight: 500;\n  }\n\n  #comp-ld-406 .ld-term__code {\n    margin: 0;\n    padding: 1rem 1.1rem;\n    border-radius: 10px;\n    background: #15141a;\n    color: #e7e7ea;\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.86rem;\n    line-height: 1.65;\n    overflow-x: auto;\n    white-space: pre;\n    border: 1px solid rgba(255, 255, 255, 0.05);\n  }\n\n  #comp-ld-406 .ld-term__code .ld-term__tok { color: var(--ld-orange); }\n  #comp-ld-406 .ld-term__code .ld-term__attr { color: var(--ld-cyan); }\n  #comp-ld-406 .ld-term__code .ld-term__val { color: #f0a96a; }\n  #comp-ld-406 .ld-term__code .ld-term__com { color: #8a8a92; font-style: italic; }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-406 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-406\" aria-labelledby=\"comp-ld-406-title\">\n\n\n  <div class=\"ld-term__shell\">\n    <div class=\"ld-term__core\">\n      <div class=\"ld-term__bar\">\n        <span class=\"ld-term__file\">ejemplos.html<\/span>\n      <\/div>\n\n      <div class=\"ld-term__tabs\" role=\"tablist\" aria-label=\"Ejemplos de c\u00f3digo HTML\">\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"comp-ld-406-v0\" data-view=\"0\">Formulario<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v1\" data-view=\"1\">Tabla<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v2\" data-view=\"2\">Enlace<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v3\" data-view=\"3\">Listas<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v4\" data-view=\"4\">Navegaci\u00f3n<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v5\" data-view=\"5\">Span<\/button>\n        <button class=\"ld-term__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"comp-ld-406-v6\" data-view=\"6\">Meta<\/button>\n      <\/div>\n\n      <div class=\"ld-term__views\">\n        <div id=\"comp-ld-406-v0\" class=\"ld-term__view\" role=\"tabpanel\">\n          <p class=\"ld-term__label\">Formulario de contacto<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;form<\/span> <span class=\"ld-term__attr\">action<\/span>=<span class=\"ld-term__val\">\"\/enviar\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;label<\/span> <span class=\"ld-term__attr\">for<\/span>=<span class=\"ld-term__val\">\"nombre\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Nombre:<span class=\"ld-term__tok\">&lt;\/label&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;input<\/span> <span class=\"ld-term__attr\">type<\/span>=<span class=\"ld-term__val\">\"text\"<\/span> <span class=\"ld-term__attr\">id<\/span>=<span class=\"ld-term__val\">\"nombre\"<\/span> <span class=\"ld-term__attr\">name<\/span>=<span class=\"ld-term__val\">\"nombre\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;label<\/span> <span class=\"ld-term__attr\">for<\/span>=<span class=\"ld-term__val\">\"correo\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Correo:<span class=\"ld-term__tok\">&lt;\/label&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;input<\/span> <span class=\"ld-term__attr\">type<\/span>=<span class=\"ld-term__val\">\"email\"<\/span> <span class=\"ld-term__attr\">id<\/span>=<span class=\"ld-term__val\">\"correo\"<\/span> <span class=\"ld-term__attr\">name<\/span>=<span class=\"ld-term__val\">\"correo\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;input<\/span> <span class=\"ld-term__attr\">type<\/span>=<span class=\"ld-term__val\">\"submit\"<\/span> <span class=\"ld-term__attr\">value<\/span>=<span class=\"ld-term__val\">\"Enviar\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/form&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v1\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Tabla de productos<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;table&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;tr&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;th&gt;<\/span>Producto<span class=\"ld-term__tok\">&lt;\/th&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;th&gt;<\/span>Precio<span class=\"ld-term__tok\">&lt;\/th&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;\/tr&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;tr&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;td&gt;<\/span>Producto 1<span class=\"ld-term__tok\">&lt;\/td&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;td&gt;<\/span>\u20ac10<span class=\"ld-term__tok\">&lt;\/td&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;\/tr&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;tr&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;td&gt;<\/span>Producto 2<span class=\"ld-term__tok\">&lt;\/td&gt;<\/span>\n    <span class=\"ld-term__tok\">&lt;td&gt;<\/span>\u20ac15<span class=\"ld-term__tok\">&lt;\/td&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;\/tr&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/table&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v2\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Enlace con descripci\u00f3n y estilos<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;a<\/span> <span class=\"ld-term__attr\">href<\/span>=<span class=\"ld-term__val\">\"https:\/\/www.loading.es\"<\/span>\n   <span class=\"ld-term__attr\">title<\/span>=<span class=\"ld-term__val\">\"Ir a Loading\"<\/span>\n   <span class=\"ld-term__attr\">style<\/span>=<span class=\"ld-term__val\">\"color:blue; text-decoration:none;\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Visita Loading<span class=\"ld-term__tok\">&lt;\/a&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v3\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Lista ordenada y desordenada<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;ol&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>Paso 1: Abrir el editor<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>Paso 2: Escribir c\u00f3digo HTML<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>Paso 3: Guardar el archivo<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/ol&gt;<\/span>\n\n<span class=\"ld-term__tok\">&lt;ul&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>HTML<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>CSS<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;li&gt;<\/span>JavaScript<span class=\"ld-term__tok\">&lt;\/li&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/ul&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v4\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Navegaci\u00f3n con la etiqueta nav<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;nav&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;a<\/span> <span class=\"ld-term__attr\">href<\/span>=<span class=\"ld-term__val\">\"#inicio\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Inicio<span class=\"ld-term__tok\">&lt;\/a&gt;<\/span> |\n  <span class=\"ld-term__tok\">&lt;a<\/span> <span class=\"ld-term__attr\">href<\/span>=<span class=\"ld-term__val\">\"#servicios\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Servicios<span class=\"ld-term__tok\">&lt;\/a&gt;<\/span> |\n  <span class=\"ld-term__tok\">&lt;a<\/span> <span class=\"ld-term__attr\">href<\/span>=<span class=\"ld-term__val\">\"#contacto\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>Contacto<span class=\"ld-term__tok\">&lt;\/a&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/nav&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v5\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Span para resaltar texto<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;p&gt;<\/span>Este es un ejemplo de\n  <span class=\"ld-term__tok\">&lt;span<\/span> <span class=\"ld-term__attr\">style<\/span>=<span class=\"ld-term__val\">\"color: red;\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>texto destacado<span class=\"ld-term__tok\">&lt;\/span&gt;<\/span>\nen HTML.<span class=\"ld-term__tok\">&lt;\/p&gt;<\/span><\/pre>\n        <\/div>\n\n        <div id=\"comp-ld-406-v6\" class=\"ld-term__view\" role=\"tabpanel\" hidden>\n          <p class=\"ld-term__label\">Meta descripci\u00f3n para SEO<\/p>\n<pre class=\"ld-term__code\"><span class=\"ld-term__tok\">&lt;head&gt;<\/span>\n  <span class=\"ld-term__tok\">&lt;meta<\/span> <span class=\"ld-term__attr\">name<\/span>=<span class=\"ld-term__val\">\"description\"<\/span>\n    <span class=\"ld-term__attr\">content<\/span>=<span class=\"ld-term__val\">\"Esta es una p\u00e1gina de ejemplo para aprender HTML b\u00e1sico.\"<\/span><span class=\"ld-term__tok\">&gt;<\/span>\n<span class=\"ld-term__tok\">&lt;\/head&gt;<\/span><\/pre>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    var block = document.getElementById('comp-ld-406');\n    if (!block || block.getAttribute('data-ready') === 'true') return;\n    block.setAttribute('data-ready', 'true');\n\n    var tabs = block.querySelectorAll('.ld-term__tab');\n    var views = block.querySelectorAll('.ld-term__view');\n\n    tabs.forEach(function (tab) {\n      tab.addEventListener('click', function () {\n        var i = tab.getAttribute('data-view');\n        tabs.forEach(function (t) { t.setAttribute('aria-selected', t === tab ? 'true' : 'false'); });\n        views.forEach(function (v) { v.hidden = v.getAttribute('id') !== 'comp-ld-406-v' + i; });\n      });\n      tab.addEventListener('keydown', function (e) {\n        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); tab.click(); }\n      });\n    });\n  });\n<\/script>\n<!-- FIN BLOQUE: ejemplos-de-uso-de-los-codigos-html -->\n\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-usar-html-para-mejorar-la-experiencia-del-usuario\">C\u00f3mo usar HTML para mejorar la experiencia del usuario<\/h2>\n\n\n\n<p>La simplicidad de HTML permite que los usuarios naveguen e interact\u00faen con tu sitio web de manera intuitiva. Incorporar <strong>c\u00f3digos HTML b\u00e1sicos<\/strong> bien estructurados facilita la carga de la p\u00e1gina y mejora la accesibilidad.<\/p>\n\n\n\n<p>Tambi\u00e9n es importante recordar que, para optimizar tu sitio, es necesario que est\u00e9 alojado en un <strong><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"hosting web en Loading\">hosting web<\/a><\/strong> que te ofrezca todo lo que necesitas para que tu proyecto web funcione correctamente.<\/p>\n\n\n\n<p>En <strong>Loading<\/strong> te ofrecemos un servicio de alojamiento web con un <strong>soporte 24\/7<\/strong>, con SSL gratis, y <strong>copias de seguridad incluidas<\/strong> y siempre al mejor precio posible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-consejos-para-empezar-a-crear-tu-propio-codigo-html\">Consejos para empezar a crear tu propio c\u00f3digo HTML<\/h3>\n\n\n\n<!-- BLOQUE: consejos-para-empezar-codigo-html -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700&display=swap');\n\n  #comp-ld-719,\n  #comp-ld-719 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-719 {\n    --ld-dark: #37363d;\n    --ld-orange: #db7424;\n    --ld-green: #198754;\n    --ld-soft: #f4f4f6;\n    --ld-muted: #64636b;\n    --ld-border: rgba(55, 54, 61, 0.12);\n    width: 100%;\n    margin: 2rem 0;\n    padding: 1.5rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 20px;\n    background: #fff;\n    box-shadow: 0 12px 30px rgba(55, 54, 61, 0.07);\n    color: inherit;\n    font-family: \"Outfit\", \"Segoe UI\", sans-serif;\n    line-height: 1.5;\n  }\n\n  #comp-ld-719 .ld-tips__title {\n    margin: 0 0 1.1rem;\n    color: var(--ld-dark);\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n  }\n\n  #comp-ld-719 .ld-tips__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    gap: 0.55rem;\n  }\n\n  #comp-ld-719 .ld-tips__item {\n    display: grid;\n    grid-template-columns: 2.25rem 1fr;\n    gap: 0.85rem;\n    align-items: start;\n    padding: 0.9rem 0.9rem;\n    border: 1px solid var(--ld-border);\n    border-radius: 12px;\n    background: #fff;\n    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;\n  }\n\n  #comp-ld-719 .ld-tips__item:hover {\n    transform: translateY(-2px);\n    border-color: rgba(25, 135, 84, 0.4);\n    box-shadow: 0 8px 18px rgba(25, 135, 84, 0.1);\n    background: #fbfdfc;\n  }\n\n  #comp-ld-719 .ld-tips__item:active {\n    transform: translateY(0) scale(0.99);\n  }\n\n  #comp-ld-719 .ld-tips__item:focus-within {\n    border-color: rgba(0, 188, 223, 0.5);\n    box-shadow: 0 0 0 3px rgba(0, 188, 223, 0.18);\n  }\n\n  #comp-ld-719 .ld-tips__icon {\n    display: grid;\n    width: 2.25rem;\n    height: 2.25rem;\n    place-items: center;\n    border-radius: 9px;\n    background: rgba(25, 135, 84, 0.1);\n    color: var(--ld-green);\n  }\n\n  #comp-ld-719 .ld-tips__icon svg {\n    width: 1.25rem;\n    height: 1.25rem;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  #comp-ld-719 .ld-tips__head {\n    margin: 0 0 0.2rem;\n    color: var(--ld-dark);\n    font-size: 0.98rem;\n    font-weight: 600;\n    line-height: 1.3;\n  }\n\n  #comp-ld-719 .ld-tips__desc {\n    margin: 0;\n    color: var(--ld-muted);\n    font-size: 0.9rem;\n    line-height: 1.5;\n  }\n\n  #comp-ld-719 .ld-tips__desc a {\n    color: var(--ld-orange);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  #comp-ld-719 .ld-tips__desc a:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.5);\n    outline-offset: 2px;\n  }\n\n  @media (min-width: 720px) {\n    #comp-ld-719 {\n      padding: 1.75rem;\n    }\n    #comp-ld-719 .ld-tips__list {\n      grid-template-columns: 1fr 1fr;\n      gap: 0.7rem;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-719 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-719\" aria-labelledby=\"comp-ld-719-title\">\n  <div id=\"comp-ld-719-title\" class=\"ld-tips__title\">Checklist para empezar con buen pie<\/div>\n\n  <ul class=\"ld-tips__list\">\n    <li class=\"ld-tips__item\">\n      <span class=\"ld-tips__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m5 12 4 4 10-10\"><\/path><\/svg><\/span>\n      <div>\n        <p class=\"ld-tips__head\">Practica a diario<\/p>\n        <p class=\"ld-tips__desc\">La mejor forma de aprender HTML es escribir etiquetas y ver el resultado en el navegador.<\/p>\n      <\/div>\n    <\/li>\n    <li class=\"ld-tips__item\">\n      <span class=\"ld-tips__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m5 12 4 4 10-10\"><\/path><\/svg><\/span>\n      <div>\n        <p class=\"ld-tips__head\">Elige un buen editor<\/p>\n        <p class=\"ld-tips__desc\">Visual Studio Code o Notepad++ te ayudan a escribir y organizar el c\u00f3digo m\u00e1s r\u00e1pido.<\/p>\n      <\/div>\n    <\/li>\n    <li class=\"ld-tips__item\">\n      <span class=\"ld-tips__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m5 12 4 4 10-10\"><\/path><\/svg><\/span>\n      <div>\n        <p class=\"ld-tips__head\">Sigue tutoriales y gu\u00edas<\/p>\n        <p class=\"ld-tips__desc\">Ap\u00f3yate en recursos como la <a href=\"https:\/\/www.loading.es\/blog\/que-es-el-html-guia-principiantes\/\" target=\"_blank\" rel=\"noopener\">gu\u00eda para principiantes de HTML<\/a> para resolver dudas concretas.<\/p>\n      <\/div>\n    <\/li>\n    <li class=\"ld-tips__item\">\n      <span class=\"ld-tips__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m5 12 4 4 10-10\"><\/path><\/svg><\/span>\n      <div>\n        <p class=\"ld-tips__head\">Comprueba el dise\u00f1o en m\u00f3vil y escritorio<\/p>\n        <p class=\"ld-tips__desc\">Adapta el contenido para que se vea bien en cualquier pantalla, no solo en tu ordenador.<\/p>\n      <\/div>\n    <\/li>\n    <li class=\"ld-tips__item\">\n      <span class=\"ld-tips__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m5 12 4 4 10-10\"><\/path><\/svg><\/span>\n      <div>\n        <p class=\"ld-tips__head\">Optimiza el SEO desde el inicio<\/p>\n        <p class=\"ld-tips__desc\">Etiquetas como title, meta y los encabezados ayudan a los buscadores a entender tu web.<\/p>\n      <\/div>\n    <\/li>\n  <\/ul>\n<\/section>\n<!-- FIN BLOQUE: consejos-para-empezar-codigo-html -->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Conocer los <strong>c\u00f3digos HTML b\u00e1sicos<\/strong> es muy \u00fatil, aunque no te vayas a dedicar expresamente al desarrollo web. Si vas a crear sitios con alg\u00fan CMS o simplemente vas a realizar env\u00edos de email marketing, es muy probable que tengas que lidiar con c\u00f3digo HTML en alg\u00fan momento.<\/p>\n\n\n\n<p>As\u00ed que conocer las etiquetas HTML b\u00e1sicas te ayudar\u00e1 much\u00edsimo en muchas ocasiones y si lo que quieres es <a href=\"https:\/\/www.loading.es\/blog\/crear-pagina-web\/\" target=\"_blank\" rel=\"noopener\" title=\"c\u00f3mo crear una p\u00e1gina web\">crear una p\u00e1gina web<\/a> ya es algo obligado para tener una buena base.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"850\" height=\"364\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/banner_html_basico.jpg\" alt=\"\" class=\"wp-image-11662\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/banner_html_basico.jpg 850w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/banner_html_basico-300x128.jpg 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/banner_html_basico-768x329.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-preguntas-frecuentes-sobre\">Preguntas frecuentes sobre los c\u00f3digos HTML (FAQ)<\/h2>\n\n\n\n<!-- BLOQUE: faq-codigos-html-basicos -->\n<style>\n  #comp-ld-258,\n  #comp-ld-258 * {\n    box-sizing: border-box;\n  }\n\n  #comp-ld-258 {\n    width: 100%;\n    margin: 2rem 0;\n    color: inherit;\n    font-family: inherit;\n    line-height: 1.5;\n  }\n\n  #comp-ld-258 .ld-faq__item {\n    border-bottom: 1px solid rgba(55, 54, 61, 0.1);\n  }\n\n  #comp-ld-258 .ld-faq__item:first-child {\n    border-top: 1px solid rgba(55, 54, 61, 0.1);\n  }\n\n  #comp-ld-258 .ld-faq__summary {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin: 0;\n    padding: 1.05rem 0.25rem;\n    color: inherit;\n    font-weight: 700;\n    font-size: 1.02rem;\n    line-height: 1.35;\n    cursor: pointer;\n    list-style: none;\n    background: transparent;\n    transition: color 180ms ease;\n  }\n\n  #comp-ld-258 .ld-faq__summary::-webkit-details-marker {\n    display: none;\n  }\n\n  #comp-ld-258 .ld-faq__summary:hover {\n    color: #db7424;\n  }\n\n  #comp-ld-258 .ld-faq__summary:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.5);\n    outline-offset: 3px;\n    border-radius: 4px;\n  }\n\n  #comp-ld-258 .ld-faq__q {\n    flex: 1 1 auto;\n  }\n\n  #comp-ld-258 .ld-faq__toggle {\n    position: relative;\n    flex: 0 0 auto;\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 50%;\n    background: rgba(219, 116, 36, 0.1);\n    color: #db7424;\n    display: grid;\n    place-items: center;\n    transition: background-color 180ms ease, color 180ms ease;\n  }\n\n  #comp-ld-258 .ld-faq__toggle::before,\n  #comp-ld-258 .ld-faq__toggle::after {\n    content: \"\";\n    position: absolute;\n    background: currentColor;\n    border-radius: 2px;\n    transition: transform 200ms ease;\n  }\n\n  #comp-ld-258 .ld-faq__toggle::before {\n    width: 0.7rem;\n    height: 2px;\n  }\n\n  #comp-ld-258 .ld-faq__toggle::after {\n    width: 2px;\n    height: 0.7rem;\n  }\n\n  #comp-ld-258 .ld-faq__item[open] .ld-faq__toggle::after {\n    transform: scaleY(0);\n  }\n\n  #comp-ld-258 .ld-faq__answer {\n    margin: 0;\n    padding: 0 0.25rem 1.15rem;\n    color: #64636b;\n    font-size: 0.97rem;\n    line-height: 1.6;\n  }\n\n  #comp-ld-258 .ld-faq__answer a {\n    color: #db7424;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  #comp-ld-258 .ld-faq__answer code {\n    font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n    font-size: 0.9em;\n    color: #37363d;\n    background: #f4f4f6;\n    border-radius: 5px;\n    padding: 0.05rem 0.32rem;\n  }\n\n  #comp-ld-258 .ld-faq__answer a:focus-visible {\n    outline: 3px solid rgba(0, 188, 223, 0.5);\n    outline-offset: 2px;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #comp-ld-258 * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<section id=\"comp-ld-258\" aria-label=\"Preguntas frecuentes sobre HTML b\u00e1sico\">\n  <details class=\"ld-faq__item\" open>\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfQu\u00e9 es HTML y para qu\u00e9 sirve?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">HTML es el lenguaje de marcado que estructura el contenido de una web: textos, im\u00e1genes, enlaces y secciones. Sin \u00e9l, los navegadores no podr\u00edan mostrar las p\u00e1ginas tal y como las conocemos.<\/p>\n  <\/details>\n\n  <details class=\"ld-faq__item\">\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfNecesito instalar algo para escribir HTML?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">No. Solo necesitas un editor de texto y un navegador. Cualquier editor sirve para empezar, aunque herramientas como Visual Studio Code lo hacen m\u00e1s c\u00f3modo.<\/p>\n  <\/details>\n\n  <details class=\"ld-faq__item\">\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfCon HTML basta para crear una web completa?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">HTML estructura el contenido. Para el dise\u00f1o visual necesitas CSS y para la interactividad, JavaScript. Los tres trabajan juntos, pero HTML es siempre la base.<\/p>\n  <\/details>\n\n  <details class=\"ld-faq__item\">\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfCu\u00e1l es la etiqueta m\u00e1s importante de una p\u00e1gina?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">El <code>&lt;title&gt;<\/code> y la meta descripci\u00f3n son clave para el SEO, y el <code>&lt;h1&gt;<\/code> define el tema principal. Debes usar un solo <code>&lt;h1&gt;<\/code> por p\u00e1gina.<\/p>\n  <\/details>\n\n  <details class=\"ld-faq__item\">\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfD\u00f3nde publico mi web hecha con HTML?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">En un <a href=\"https:\/\/www.loading.es\/hosting\/index.html\" rel=\"noopener\">hosting web<\/a>. Subes tus archivos HTML, CSS e im\u00e1genes al servidor y tu p\u00e1gina queda visible en Internet con tu dominio.<\/p>\n  <\/details>\n\n  <details class=\"ld-faq__item\">\n    <summary class=\"ld-faq__summary\">\n      <span class=\"ld-faq__q\">\u00bfLas etiquetas HTML distinguen may\u00fasculas de min\u00fasculas?<\/span>\n      <span class=\"ld-faq__toggle\" aria-hidden=\"true\"><\/span>\n    <\/summary>\n    <p class=\"ld-faq__answer\">No, pero la buena pr\u00e1ctica es escribirlas siempre en min\u00fasculas. Es m\u00e1s limpio, m\u00e1s legible y evita errores al combinar HTML con otros lenguajes.<\/p>\n  <\/details>\n<\/section>\n<!-- FIN BLOQUE: faq-codigos-html-basicos -->\n\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"4TmbDt0DC7\"><a href=\"https:\/\/www.loading.es\/blog\/como-subir-tu-pagina-web-a-internet\/\">C\u00f3mo subir tu p\u00e1gina web a Internet<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo subir tu p\u00e1gina web a Internet\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/como-subir-tu-pagina-web-a-internet\/embed\/#?secret=nqvWtzhfkH#?secret=4TmbDt0DC7\" data-secret=\"4TmbDt0DC7\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"MFB0tBwQkx\"><a href=\"https:\/\/www.loading.es\/blog\/ganar-dinero-internet\/\">C\u00f3mo Ganar Dinero por Internet<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo Ganar Dinero por Internet\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/ganar-dinero-internet\/embed\/#?secret=a6UpFDSCvD#?secret=MFB0tBwQkx\" data-secret=\"MFB0tBwQkx\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"9xovgFos46\"><a href=\"https:\/\/www.loading.es\/blog\/traducir-sitio-web\/\">C\u00f3mo traducir un sitio web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo traducir un sitio web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/traducir-sitio-web\/embed\/#?secret=ITWa08Zfh1#?secret=9xovgFos46\" data-secret=\"9xovgFos46\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQu\u00e9 es HTML y para qu\u00e9 sirve?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"HTML es el lenguaje de marcado que estructura el contenido de una web: textos, im\u00e1genes, enlaces y secciones. Sin \u00e9l, los navegadores no podr\u00edan mostrar las p\u00e1ginas tal y como las conocemos.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfNecesito instalar algo para escribir HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No. Solo necesitas un editor de texto y un navegador. Cualquier editor sirve para empezar, aunque herramientas como Visual Studio Code lo hacen m\u00e1s c\u00f3modo.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCon HTML basta para crear una web completa?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"HTML estructura el contenido. Para el dise\u00f1o visual necesitas CSS y para la interactividad, JavaScript. Los tres trabajan juntos, pero HTML es siempre la base.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCu\u00e1l es la etiqueta m\u00e1s importante de una p\u00e1gina?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"El <title> y la meta descripci\u00f3n son clave para el SEO, y el <h1> define el tema principal. Debes usar un solo <h1> por p\u00e1gina.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfD\u00f3nde publico mi web hecha con HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"En un hosting web. Subes tus archivos HTML, CSS e im\u00e1genes al servidor y tu p\u00e1gina queda visible en Internet con tu dominio.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfLas etiquetas HTML distinguen may\u00fasculas de min\u00fasculas?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No, pero la buena pr\u00e1ctica es escribirlas siempre en min\u00fasculas. Es m\u00e1s limpio, m\u00e1s legible y evita errores al combinar HTML con otros lenguajes.\"\n      }\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfAlguna vez te has preguntado c\u00f3mo se crean las p\u00e1ginas web que visitas todos los d\u00edas? Bueno, d\u00e9jame contarte que funcionan con HTML, el lenguaje que da vida a internet. HTML significa HyperText Markup Language, que suena complicado, \u00bfverdad? Pero no te asustes, es m\u00e1s sencillo de lo que parece. Si est\u00e1s dando tus primeros pasos en el mundo del dise\u00f1o web est\u00e1s en el lugar correcto. En este post, vamos a ver los c\u00f3digos HTML b\u00e1sicos que puedes utilizar en tu d\u00eda a d\u00eda para crear o editar una p\u00e1gina web.<\/p>\n","protected":false},"author":2,"featured_media":9472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[401,38],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/9466"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=9466"}],"version-history":[{"count":12,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/9466\/revisions"}],"predecessor-version":[{"id":11667,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/9466\/revisions\/11667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/9472"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=9466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=9466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=9466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}