{"id":3430,"date":"2025-10-05T00:00:00","date_gmt":"2025-10-04T22:00:00","guid":{"rendered":"https:\/\/tecnologia.euroinnova.com\/html\/"},"modified":"2025-10-07T14:58:21","modified_gmt":"2025-10-07T12:58:21","slug":"html","status":"publish","type":"post","link":"https:\/\/tecnologia.euroinnova.com\/fr\/html","title":{"rendered":"HTML"},"content":{"rendered":"

Al igual que una casa se erige sobre unos cimientos, la base de un sitio web es su c\u00f3digo HTML<\/strong>. Estas siglas significan lenguaje de marcado de hipertext (hypertext markup language<\/strong>, en ingl\u00e9s). Se considera un est\u00e1ndar para la creaci\u00f3n de p\u00e1ginas web en Internet, ya que permite generar toda su estructura en secciones, p\u00e1rrafos, enlaces, etiquetas, atributos y otros muchos elementos.<\/p>\n

En modo de resumen, el HTML sirve para el desarrollo de p\u00e1ginas web. <\/strong>Los desarrolladores escriben c\u00f3digo HTML para dise\u00f1ar la interfaz de un sitio web mediante elementos gr\u00e1ficos como las im\u00e1genes o los v\u00eddeos, texto, hiperv\u00ednculos, etc.<\/p>\n

Algo que cabe destacar es que, aunque para muchas personas fuera del \u00e1mbito de la inform\u00e1tica y la programaci\u00f3n s\u00ed lo sea, el HTML no es un<\/strong> langage de programmation<\/strong><\/a>, ya que no permite hacer c\u00e1lculos, tomar decisiones l\u00f3gicas o manipular datos de forma din\u00e1mica.<\/p>\n

\u00bfQuieres ver un ejemplo de HTML <\/strong>ahora mismo? \u00a1Pulsa el bot\u00f3n derecho del rat\u00f3n y selecciona \u201cInspeccionar\u201d para abrir una pantalla que te mostrar\u00e1 toda la estructura HTML.<\/p>\n

Estructura principal de un elemento HTML<\/h2>\n

Todas las p\u00e1ginas HTML contienen una serie de elementos HTML que se componen de etiquetas y atributos en diferentes bloques<\/strong>. Una etiqueta le indica a los buscadores d\u00f3nde empieza un elemento y d\u00f3nde acaba, mientras que los atributos est\u00e1n destinados a describir las caracter\u00edsticas gr\u00e1ficas de un elemento.<\/p>\n

Las tres partes principales que podemos encontrar en todos los elementos HTML son:<\/p>\n

    \n
  • Apertura:<\/strong> se usa para indicar el comienzo de un elemento, y queda delimitada por antilambdas (< >). Por ejemplo, para crear un párrafo se ha de escribir un elemento <p>.<\/li>\n
  • Contenido: <\/strong>es la parte de la etiqueta que los usuarios van a ver, lo que le da sentido al elemento.<\/li>\n
  • Cierre:<\/strong> marca el final de un elemento de forma paralela a su comienzo, pero añadiéndole una barra oblicua o slash. Por ejemplo, el cierre del elemento <p> sería <\/p>.
     <\/li>\n<\/ul>\n

    Sin embargo, hay algunas excepciones como la etiqueta <img> o la etiqueta <a> que veremos más abajo. Estas etiquetas no tienen un cierre más allá de la antilambda correspondiente, ya que no pueden contener otros elementos anidados. A los elementos HTML<\/strong> que no llevan cierre se les denomina elementos vac\u00edos.<\/p>\n

    Estructura principal de una p\u00e1gina HTM<\/h2>\n

    En cuestiones estructurales, los elementos b\u00e1sicos para crear una p\u00e1gina en HTML son:<\/p>\n

      \n
    • <html>: <\/strong>Define el inicio y el final de un documento.<\/li>\n
    • <head>:<\/strong> Contiene informaci\u00f3n esencial no visual sobre el documento HTML en forma de metadatos.<\/li>\n
    • <body>:<\/strong> Alberga todo el contenido visible de una p\u00e1gina web.<\/li>\n<\/ul>\n

       <\/p>\n

      Con tan solo estos tres elementos de apertura y cierre se puede generar un documento HTML<\/strong>. Sin embargo, hay infinidad de elementos m\u00e1s que es necesario conocer para estructurar toda una p\u00e1gina HTML y explotar sus funcionalidades al m\u00e1ximo.<\/p>\n

      Principales etiquetas HTML<\/h2>\n

      A continuaci\u00f3n, te listamos las principales etiquetas que se emplean en HTML para construir bloques comunes<\/strong>:<\/p>\n

        \n
      • Etiqueta <h1> a <h6>:<\/strong> Define los encabezados de diferentes niveles para crear una jerarquía de relevancia de contenidos de cara a los buscadores. El encabezado más importante de una página se encaja en un <h1> y el que menos, en un <h6>. Sin embargo, la mayoría de páginas solo suelen emplear los encabezados <h1>, <h2> y <h3>.<\/li>\n<\/ul>\n

        Exemple :<\/p>\n

        <h1>Encabezado de nivel 1<\/h1><\/p>\n

        <h2>Encabezado de nivel 2<\/h2><\/p>\n

          \n
        • Etiqueta <p>:<\/strong> Define un p\u00e1rrafo.<\/li>\n<\/ul>\n

          Exemple :<\/p>\n

          <p>Este es un párrafo de ejemplo<\/p><\/p>\n

            \n
          • Etiqueta <a>:<\/strong> Crea un enlace a otra p\u00e1gina o recurso.<\/li>\n<\/ul>\n

            Exemple :<\/p>\n

            <a href="\/fr\/»https:\/\/www.ejemplo.com»\/">Enlace de ejemplo<\/a><\/p>\n

              \n
            • Etiqueta <img>:<\/strong> Inserta una imagen en la p\u00e1gina.<\/li>\n<\/ul>\n

              Exemple :<\/p>\n

              <img src="»ruta_de_la_imagen.jpg»" alt="»Descripción" de la imagen»><\/p>\n

                \n
              • Etiqueta <ul> y <li> :<\/strong> Crea una lista desordenada. Para crear una lista ordenada con numeraci\u00f3n, se sustituye <ul> por <ol>.<\/li>\n<\/ul>\n

                Exemple :<\/p>\n

                <ul><\/p>\n

                  <li>Elemento 1<\/li><\/p>\n

                  <li>Elemento 2<\/li><\/p>\n

                  <li>Elemento 3<\/li><\/p>\n

                <\/ul><\/p>\n

                  \n
                • Etiqueta <strong>:<\/strong> Define un texto fuerte o destacado que se muestra en negrita en la mayor\u00eda de los navegadores.<\/li>\n<\/ul>\n

                  Exemple :<\/p>\n

                  <p>Este es un texto <strong>importante<\/strong>.<\/p><\/p>\n

                    \n
                  • Etiqueta <em>: <\/strong>Define un texto enfatizado que se lee en cursiva en la mayor\u00eda de los navegadores.<\/li>\n<\/ul>\n

                    Exemple :<\/p>\n

                    <p>Este es un texto <em>enfatizado<\/em>.<\/p><\/p>\n

                    Estos son solo algunos ejemplos que reflejan las etiquetas HTML<\/strong> m\u00e1s b\u00e1sicas, pero existen cientos de ellas que cumplen funciones muy importantes en la interfaz y estructura de un sitio web.<\/p>","protected":false},"excerpt":{"rendered":"

                    Al igual que una casa se erige sobre unos cimientos, la base de un sitio web es su c\u00f3digo HTML. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-3430","post","type-post","status-publish","format-standard","hentry","category-metaterminos"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/comments?post=3430"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3430\/revisions"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media?parent=3430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/categories?post=3430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/tags?post=3430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}