{"id":53768,"date":"2022-07-01T12:31:48","date_gmt":"2022-07-01T10:31:48","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=53768&post_type=knowledgebase&preview_id=53768"},"modified":"2025-10-01T21:32:18","modified_gmt":"2025-10-01T19:32:18","slug":"que-es-el-html","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/que-es-el-html\/","title":{"rendered":"\u00bfQu\u00e9 es el HTML? Gu\u00eda para Principiantes"},"content":{"rendered":"

Quieres crear el sitio web de tus sue\u00f1os, pero no quieres que tenga el aspecto de una plantilla gen\u00e9rica. Cualquier persona familiarizada en dise\u00f1o web<\/a> te dir\u00e1 que primero tienes que saber HTML. Pero, \u00bfqu\u00e9 es HTML y c\u00f3mo puedes aprenderlo?<\/p>\n

Quieres que el sitio web que publiques<\/a> destaque y sea original. Quieres elementos y dise\u00f1os que nadie m\u00e1s en tu sector est\u00e9 utilizando. Al fin y al cabo, tu sitio web es la primera impresi\u00f3n que muchos clientes potenciales se llevan de tu negocio.<\/p>\n

Pero antes de poder hacerlo, tienes que aprender un lenguaje inform\u00e1tico llamado HTML<\/a>. Esencialmente, es el lenguaje que establece lo que un navegador web debe mostrar a un visitante cuando llega a tu sitio web.<\/p>\n

En este art\u00edculo, vamos a explicar qu\u00e9 es el HTML, c\u00f3mo surgi\u00f3, c\u00f3mo se utiliza, c\u00f3mo funciona, y te ofrecemos una formaci\u00f3n b\u00e1sica en HTML<\/a> con consejos sobre c\u00f3mo puedes aprender m\u00e1s.<\/p>\n

\u00bfEst\u00e1s preparado para aprender a programar tu sitio web sin crear una p\u00e1gina rota? Entremos de lleno.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es el HTML?<\/h2>\n

HTML significa \u00ablenguaje de marcas de hipertexto\u00bb y es un lenguaje relativamente sencillo utilizado para crear p\u00e1ginas web. Como no permite variables ni funciones, no se considera un \u00ablenguaje de programaci\u00f3n\u00bb, sino un \u00ablenguaje de marcas\u00bb, un lenguaje que utiliza etiquetas para definir elementos dentro de un documento.<\/p>\n

Si preguntas a cualquier persona del mundo del dise\u00f1o web<\/a> qu\u00e9 es el HTML, es probable que recibas una larga explicaci\u00f3n que te dejar\u00e1 la cabeza dando vueltas, sobre todo si eres como la mayor\u00eda del mundo y no tienes ni idea de programaci\u00f3n ni de crear un sitio web desde cero<\/a>.<\/p>\n

\"Cuatro
Cuatro puntos que definen el html(Fuente:<\/b> Studypool<\/a>)<\/figcaption><\/figure>\n

Entonces, \u00bfqu\u00e9 significa \u00ablenguaje de marcado de hipertexto\u00bb? Vamos a desglosarlo.<\/p>\n

El hipertexto es un texto colocado en orden que conecta elementos relacionados, normalmente mediante enlaces (tambi\u00e9n llamados hiperv\u00ednculos). El lenguaje de marcas describe el estilo y la estructura de una p\u00e1gina a los navegadores web.<\/p>\n

As\u00ed pues, el HTML es lo que garantiza que el texto y las im\u00e1genes aparezcan en el lugar correcto, y que los usuarios puedan navegar por tu sitio web<\/a> sin problemas. Los navegadores web cargan esta informaci\u00f3n desde tu servidor web para generar los sitios web que ves cada d\u00eda.<\/p>\n

Si miramos el HTML en estado puro, veremos\u00a0un mont\u00f3n de s\u00edmbolos y par\u00e9ntesis que aparentemente no tienen sentido. Sin embargo, todo contribuye al producto final de cara al cliente.<\/p>\n

La propia estructura de los sitios web se crea mediante HTML. Este lenguaje funciona junto con CSS (hojas de estilo en cascada) y JavaScript<\/a> para crear sitios web visualmente atractivos e interactivos para que los usuarios los disfruten.<\/p>\n

La conclusi\u00f3n es que el HTML es la base de una buena p\u00e1gina web. Sin \u00e9l, no podr\u00edas compartir texto con los visitantes del sitio web, y mucho menos a\u00f1adir tu toque personal al sitio web de tus sue\u00f1os.<\/p>\n\n

La Historia del HTML<\/h3>\n

Sir Tim Berners-Lee cre\u00f3 el HTML a finales de 1991, pero el lenguaje de programaci\u00f3n<\/a> no se dio a conocer a las masas hasta 1993.<\/p>\n

Fue entonces cuando apareci\u00f3 HTML1. Desde el principio, fue concebido como un medio para compartir datos a trav\u00e9s de los navegadores web.<\/p>\n

El crecimiento de HTML se estanc\u00f3 poco despu\u00e9s de su lanzamiento porque no hab\u00eda muchos desarrolladores creando sitios web en ese momento.<\/p>\n

El HTML2 se public\u00f3 en 1995 con caracter\u00edsticas adicionales, convirti\u00e9ndose en el lenguaje de marcado est\u00e1ndar para el dise\u00f1o web hasta 1997.<\/p>\n

Fue entonces cuando Dave Raggett desarroll\u00f3 HTML3. Proporcion\u00f3 a los administradores de la web caracter\u00edsticas m\u00e1s potentes para el dise\u00f1o de p\u00e1ginas. Por desgracia, se adelant\u00f3 a su tiempo. Las caracter\u00edsticas de HTML3 en realidad ralentizaban los navegadores, ya que a\u00fan no estaban equipados para aplicarlas.<\/p>\n

HTML4.01 se desarroll\u00f3 en 1999, y vino con soporte para opciones multimedia. Esta actualizaci\u00f3n tambi\u00e9n inclu\u00eda hojas de estilo, facilidades de impresi\u00f3n y lenguajes de scripting adicionales.<\/p>\n

\"Las
Las diferencias entre la estructura de HTML4 y la de HTML5(Fuente:<\/b> JavatPoint<\/a>)<\/figcaption><\/figure>\n

M\u00e1s recientemente, el HTML5<\/a> fue lanzado en 2015. El lanzamiento de HTML5 a\u00f1adi\u00f3 m\u00e1s soporte de almacenamiento de medios y elementos de contenido espec\u00edficos. Tambi\u00e9n se simplific\u00f3 mucho la incrustaci\u00f3n de doctype inline, audio y v\u00eddeo.<\/p>\n

En 2022, el mundo trabaja con HTML5.2, que mejora la pol\u00edtica de seguridad de los contenidos en el momento en que m\u00e1s lo necesitamos.<\/p>\n

Tambi\u00e9n se ha centrado en el comercio electr\u00f3nico, a\u00f1adiendo una API de solicitud de pagos. Esta actualizaci\u00f3n tambi\u00e9n ha a\u00f1adido aplicaciones de Internet ricas en accesibilidad para las personas discapacitadas.<\/p>\n

\u00bfPara Qu\u00e9 se Utiliza el HTML?<\/h2>\n

La respuesta sencilla a esta pregunta es que el HTML se utiliza para crear sitios web de uso personal y empresarial en todo el mundo.<\/p>\n

La respuesta real es mucho m\u00e1s detallada que eso.<\/p>\n

El HTML ha sido el lenguaje por defecto utilizado para los documentos y sitios web desde la d\u00e9cada de 1990. Funciona con los navegadores<\/a> para ayudarles a entender la estructura de un sitio web y el estilo asociado a ellos.<\/p>\n

Esencialmente, el HTML es un plano que indica al navegador web c\u00f3mo armar tu sitio web para el visitante. Cuando un usuario teclea tu URL, el navegador monta la p\u00e1gina bas\u00e1ndose en los bloques de construcci\u00f3n establecidos en el c\u00f3digo HTML.<\/p>\n

\"Gr\u00e1fico
Un gr\u00e1fico que muestra todo lo que puede hacer HTML5 (Fuente:<\/b> SCF<\/a>)<\/figcaption><\/figure>\n

Esto, a su vez, ayuda a que la p\u00e1gina tenga el aspecto deseado cuando la ve un usuario, cuando se combina con una hoja de estilos CSS<\/a> que da estilo a los elementos dispuestos en tu documento HTML.<\/p>\n

La versi\u00f3n actual de HTML tambi\u00e9n permite que el v\u00eddeo, el audio, las hojas de c\u00e1lculo y otras aplicaciones se ejecuten directamente en los sitios web. Si alguna vez te has maravillado con estos elementos en un sitio web,\u00a0 se lo tienes que agradecer a HTML5.<\/p>\n

Este lenguaje de marcado tambi\u00e9n garantiza una navegaci\u00f3n interna fluida de un sitio web, gracias a los hiperv\u00ednculos.<\/p>\n

Los dise\u00f1adores de sitios web tambi\u00e9n pueden utilizar el HTML para crear formularios de generaci\u00f3n de leads<\/a> para recopilar correos electr\u00f3nicos y nombres (siempre que potencie la acci\u00f3n con un archivo programado en otro lenguaje).<\/p>\n

Si utilizas plugins externos, tambi\u00e9n puedes usar HTML para crear sistemas de reserva o formularios de b\u00fasqueda dentro de un sitio, lo que facilita la reserva y la navegaci\u00f3n.<\/p>\n

El HTML es la forma de incluir contenido no din\u00e1mico en un sitio web: contenido que quieres que todos los visitantes vean de la misma manera. Si quieres contenido din\u00e1mico, debes usar JavaScript<\/a>, PHP<\/a> u otros lenguajes de programaci\u00f3n.<\/p>\n

\u00bfC\u00f3mo Funciona el HTML?<\/h2>\n

En mayo de 2022, hay m\u00e1s de 3.560 millones<\/a> de p\u00e1ginas web en Internet. Muchas de esas p\u00e1ginas son simples archivos HTML. (Ten en cuenta que no estamos hablando de sitios web, sino de p\u00e1ginas web)<\/p>\n

Anteriormente, si tu sitio ten\u00eda 150 p\u00e1ginas, probablemente ten\u00edas 150 archivos HTML separados. Pero hoy las cosas han cambiado. Si utilizas un sistema de gesti\u00f3n de contenidos (CMS)<\/a>, como hace la mayor\u00eda de la gente, esto no ser\u00e1 as\u00ed, ya que suele generar din\u00e1micamente las p\u00e1ginas a partir de los datos almacenados en una base de datos.<\/p>\n

\"Gr\u00e1fico
Un gr\u00e1fico que muestra cu\u00e1ntas p\u00e1ginas hay en Internet<\/figcaption><\/figure>\n

Estos archivos tambi\u00e9n se denominan documentos HTML, y son los bloques de construcci\u00f3n de tu sitio web. Cada p\u00e1gina tiene varios elementos dentro y fuera de la p\u00e1gina que tienen un lugar en los documentos HTML. Esto incluye elementos de backend<\/a> como las metaetiquetas, las etiquetas de t\u00edtulo y las etiquetas alt, pero tambi\u00e9n incluye elementos f\u00edsicos como v\u00eddeos, im\u00e1genes, bloques de texto y otros elementos orientados al usuario.<\/p>\n

\u00bfEn qu\u00e9 Consiste un Documento HTML?<\/h3>\n

Todos los documentos HTML terminan con la extensi\u00f3n .html o .htm. Estos documentos contienen todo el texto y las etiquetas que proporcionan informaci\u00f3n est\u00e1tica a un navegador web.<\/p>\n

El documento HTML es el manual de instrucciones que utiliza el navegador web del usuario para construir el sitio. Todos los archivos a los que hace referencia (hojas de estilo CSS, archivos JavaScript que potencian los elementos din\u00e1micos, etc.) son le\u00eddos por el navegador, que luego renderiza la p\u00e1gina en consecuencia, permitiendo a los espectadores verla tal y como se pretende. El renderizado es la construcci\u00f3n real, y tiene lugar cada vez que alguien navega a una p\u00e1gina espec\u00edfica de tu sitio.<\/p>\n

Si hay problemas con tu documento HTML o con alguno de los archivos que incluye, el sitio no se renderizar\u00e1 correctamente. Ser\u00eda como intentar montar un escritorio de IKEA sin una pieza o herramienta vital.<\/p>\n

Los sitios web modernos contienen varios elementos HTML formados por etiquetas y atributos. Estos elementos crean la estructura de una p\u00e1gina. Las etiquetas asociadas a cada elemento muestran d\u00f3nde empiezan y terminan. Sin una etiqueta que cierre un elemento, el navegador pondr\u00e1 todo el contenido siguiente dentro de esa columna o fila, aunque no sea lo que pretend\u00edas.<\/p>\n

Los atributos asociados a cada elemento de una p\u00e1gina ilustran las distintas caracter\u00edsticas que los componen.<\/p>\n

Todos los documentos HTML comienzan con una declaraci\u00f3n <!DOCTYPE>. Esta definici\u00f3n del tipo de documento, tambi\u00e9n conocida como DTD, determina la estructura y los elementos de un documento XML<\/a>.<\/p>\n

Mientras que <div> sol\u00eda ser la opci\u00f3n principal para crear bloques de contenido, en HTML5<\/a>, tambi\u00e9n tienes bloques espec\u00edficos como <main> que indican el tipo de contenido que habr\u00e1 en un bloque a los rastreadores – en este caso, el contenido principal del blog\/art\u00edculo.<\/p>\n

Conceptos B\u00e1sicos de HTML<\/h2>\n

Si quieres convertirte en dise\u00f1ador web o al menos participar en la creaci\u00f3n del sitio web de tu empresa, tienes que aprender HTML<\/a>. Como casi todo lo que hay que aprender en este mundo, tienes que empezar por lo b\u00e1sico para tener una s\u00f3lida comprensi\u00f3n de los elementos m\u00e1s avanzados que vendr\u00e1n m\u00e1s adelante.<\/p>\n

Por supuesto, puedes utilizar un editor de HTML gratuito<\/a> o Sublime Text<\/a>, pero tener una s\u00f3lida comprensi\u00f3n de c\u00f3mo funciona el HTML te ayudar\u00e1 a mejorar la personalizaci\u00f3n de los sitios web que construyas.<\/p>\n

Vamos a desglosar algunos elementos b\u00e1sicos de HTML en las siguientes secciones para que empieces a recorrer el camino hacia el dominio del HTML.<\/p>\n

Elementos de HTML<\/h3>\n

Todos los elementos de HTML, independientemente de lo que est\u00e9n creando, tienen los mismos tres componentes. Tienes una etiqueta de apertura, el contenido propiamente dicho y una etiqueta de cierre.<\/p>\n

\"componentes
Los tres componentes de un elemento HTML<\/figcaption><\/figure>\n

Tus etiquetas de apertura muestran al navegador web d\u00f3nde empiezan los elementos de tu p\u00e1gina. Por ejemplo, puede mostrar d\u00f3nde empieza un reproductor de v\u00eddeo o un p\u00e1rrafo de texto en la p\u00e1gina. Todas las etiquetas de apertura utilizan par\u00e9ntesis angulares de apertura y cierre para marcarse a s\u00ed mismas. Por ejemplo, la etiqueta de apertura <em> pone \u00e9nfasis en el contenido, como la cursiva. Colocar\u00edas esta etiqueta antes del texto que quieres enfatizar.<\/p>\n

El contenido propiamente dicho es la informaci\u00f3n real que ve el usuario. Puede ser un texto escrito, como una entrada de blog. Tambi\u00e9n puede ser una imagen o un c\u00f3digo de inserci\u00f3n de un v\u00eddeo. Si se coloca despu\u00e9s de la etiqueta de apertura, el contenido comenzar\u00e1 donde se designe.<\/p>\n

La etiqueta de cierre es la misma que la de apertura, pero a\u00f1ade una barra inclinada antes del nombre del elemento. Para volver a nuestro ejemplo de la etiqueta de \u00e9nfasis de antes, colocar\u00edas la etiqueta <\/em> al final del texto que quieres enfatizar.<\/p>\n

As\u00ed, por ejemplo, si quieres poner en cursiva la palabra \u00abexactamente\u00bb, lo codificar\u00edas as\u00ed<\/p>\n

<em>Exactamente.<\/em><\/p>\n

En la p\u00e1gina real de cara al usuario, se ver\u00eda as\u00ed:<\/p>\n

Exactamente.<\/em><\/p>\n

Los elementos HTML tambi\u00e9n incluyen atributos, que contienen un nombre y un valor de atributo. El nombre del atributo muestra lo que el usuario est\u00e1 a\u00f1adiendo, mientras que el valor proporciona informaci\u00f3n adicional.<\/p>\n

En el caso de las etiquetas de imagen, obviamente tienes que especificar qu\u00e9 imagen quieres mostrar, de modo que se ve as\u00ed:<\/p>\n

<img src=\u00bbimg_girl.jpg\u00bb><\/strong><\/p>\n

Si quieres hacer que un p\u00e1rrafo de tu p\u00e1gina sea de color rojo mientras usas la fuente Arial, puedes usar el atributo de estilo:<\/p>\n

<p style=\u00bbcolor:red;font-family:arial\u00bb>
\n<\/strong>
\nEn este ejemplo, estamos utilizando la etiqueta de apertura <p> para un nuevo p\u00e1rrafo. Con estos atributos adjuntos, todo en ese p\u00e1rrafo ser\u00eda rojo en la fuente Arial, hasta la etiqueta de cierre <\/p>.<\/p>\n

Pero en el desarrollo web moderno, la pr\u00e1ctica habitual es no utilizar el atributo de estilo HTML para ajustar el dise\u00f1o de los elementos individuales, sino dar estilo a toda la p\u00e1gina con una hoja de estilos CSS independiente.<\/p>\n

La clase HTML y el ID son dos atributos de un elemento HTML que los \u00abnombran\u00bb y te ayudan a orientar estos elementos con CSS o JavaScript posteriormente. Esto ayuda al desarrollo<\/a> y lo hace m\u00e1s eficaz. Utilizando el ID o la clase de un elemento, puedes insertar informaci\u00f3n de estilo en elementos como el color de fondo, los bordes, el color de la fuente<\/a>, etc.<\/p>\n

Por ejemplo, en lugar de dar estilo al texto en rojo dentro del documento HTML, podr\u00edas hacer esto:<\/p>\n

<p class=\u201dredtext\u201d>\n\nAnd in the CSS stylesheet, target the class like this:\n\n.redtext {\n\ncolor:red;\n\nfont-family:arial;\n\n}>\/code><\/code><\/pre>\n
Etiquetas y Elementos HTML M\u00e1s Utilizados<\/h3>\n
Hay 142 etiquetas HTML diferentes que te permiten crear elementos. \u00c9stas se componen de elementos a nivel de bloque y inline.<\/p>\n
Los elementos a nivel de bloque abarcan todo el ancho de una p\u00e1gina, iniciando una nueva l\u00ednea dentro de un documento.<\/p>\n
Estas son algunas de las etiquetas comunes a nivel de bloque que puedes utilizar en tu sitio web:<\/p>\n