¿Qué es HTML?

Es un lenguaje de marcado que sirve como base de la World Wide Web y te proporciona una buena base para otros lenguajes como CSS y JavaScript, o para crear sitios web de forma visual con herramientas como Webflow.

Hoy analizaremos el HTML más de cerca, exploraremos cómo funciona y hablaremos de para qué se utiliza.

¿Qué es el HTML?

HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto). Fue creado por el informático inglés Tim Berners-Lee, más conocido como el inventor de la World Wide Web.

En 1989 escribió un memorando describiendo su idea de un sistema de hipertexto basado en Internet y, en 1991, publicó un documento titulado "Etiquetas HTML". En ese documento, Tim Berners-Lee describió las primeras 18 etiquetas HTML.

‍El HTML ha cambiado mucho desde entonces:

• HTML2 se publicó el 24 de noviembre de 1995.
• HTML3 se publicó el 14 de enero de 1997 como recomendación del World Wide Web Consortium*.
• HTML4 se publicó el 18 de diciembre de 1997 como recomendación del World Wide Web Consortium.
• HTML5, la versión actual de HTML, se publicó el 28 de octubre de 2014 como recomendación del World Wide Web Consortium.

*World Wide Web Consortium, también conocido como W3C, es una organización que establece estándares internacionales para la World Wide Web.

Además, desde la introducción del HTML en 1991, otras dos tecnologías se han convertido en parte integral de la World Wide Web: Cascading Style Sheets (CSS) y JavaScript (JS).

El HTML se utiliza en el 94,5% de todos los sitios web, el CSS en el 96,9% y el JavaScript en el 97,9% de todos los sitios web. 

Así es como estas tres tecnologías trabajan juntas para crear la web tal y como la conocemos:

• El HTML es un lenguaje de marcado de hipertexto utilizado para crear y dar formato al contenido de las páginas web. 
• El CSS es un lenguaje de hojas de estilo utilizado para dar estilo al contenido de las páginas web.
• El JavaScript es un lenguaje de programación utilizado para añadir elementos dinámicos e interactivos a las páginas web. 

De estos tres lenguajes, el HTML es el fundamental. De hecho, puedes crear un sitio web solo con HTML, sin necesidad de CSS ni JavaScript, aunque será increíblemente básico.

HTML frente a HTML5: ¿cuál es la diferencia?

HTML son las siglas de HyperText Markup Language. Se utiliza en el desarrollo web junto con las hojas de estilo en cascada (CSS) y JavaScript (JS). 

HTML5 es la versión actual de HTML y se considera el estándar en el desarrollo web.

¿Cómo funciona el HTML?

Ahora que ya sabes qué es el HTML, echemos un vistazo más de cerca a cómo funciona.

Elementos HTML

Los elementos HTML son los componentes individuales de un documento HTML, los cuales se indican mediante etiquetas HTML.

Por ejemplo:

<p> Esto es un párrafo. </p>

Etiquetas HTML frente a atributos HTML

Etiquetas HTML

Las etiquetas se utilizan para marcar el principio y el final de los elementos HTML. Puedes reconocerlas por sus delimitadores, también conocidos como corchetes angulares “<>” y “</>”: el primero indica la etiqueta de apertura y el segundo, la de cierre.

Atributos HTML

Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML.

Por ejemplo:

<p> … </p> es una etiqueta HTML que se utiliza para indicar un párrafo.

Puedes usar el atributo style para añadir más información sobre este elemento HTML.

<p style="color: blue;"> Esto es un párrafo. </p>

Etiquetas HTML populares

Todas las etiquetas HTML tienen la misma estructura:

• <nombre-etiqueta> indica la apertura de la etiqueta.
• </nombre-etiqueta> indica el cierre de la etiqueta.

Aquí tienes algunas de las etiquetas HTML más utilizadas:

• <HTML> … </HTML> indica el principio y el final de un documento HTML. Todas las páginas HTML deben incluir esta etiqueta.
• <HEAD> … </HEAD> indica la sección de cabecera de un documento HTML, que contiene la metainformación. Puede incluir la etiqueta de título, metaetiquetas, CSS y más. ¡Ten en cuenta que esto no es lo mismo que la etiqueta <HEADER>!
• <TITLE> … </TITLE> indica el título de la página. Se mostrará en el navegador web.
• <BODY> … </BODY> indica la sección del cuerpo de un documento HTML, que contiene el contenido de dicha página.
• <H1> … </H1> indica un encabezado de primer nivel. Los encabezados van desde el nivel uno (el más grande) hasta el nivel 6 (el más pequeño). Puedes cambiar el número en esta etiqueta según el tipo de encabezado que quieras usar.
• <P> … </P> indica un párrafo.
• <BR> indica un salto de línea.
• <A HREF="HTTPS://WEBFLOW.COM"> . . . </A> indica un enlace.
• <DL> … </DL> indica una lista de definiciones.
• <IMG SRC="IMAGEN.JPG"> indica una imagen insertada.
• <B> … </B> indica texto en negrita.
• <I> … </I> indica texto en cursiva.
• <TABLE> … </TABLE> indica una tabla.

Aquí tienes un vídeo sobre cómo usar etiquetas en Webflow para potenciar tu proceso de diseño web.

¿Cuál es la relación entre HTML y CSS?

Puedes dar estilo al contenido de tus páginas web usando solo HTML. Sin embargo, si lo intentas, descubrirás rápidamente que este enfoque puede ser increíblemente tedioso. Esto se debe a que requiere añadir manualmente los atributos deseados a cada elemento HTML.

Supongamos que quieres que el texto tenga un color específico. Tendrías que configurar el color de fuente para cada párrafo usando el atributo style. ¿Te imaginas revisar un artículo de más de 2,000 palabras y configurar manualmente el color de fuente para cada párrafo? ¿Y luego hacer lo mismo para todos los artículos de tu sitio web? ¡Qué pesadilla!

Afortunadamente, ya no estamos en 1995, así que puedes usar Hojas de Estilo en Cascada (CSS) en su lugar. CSS te permite crear una hoja de estilos externa que servirá como guía de estilo para todos los elementos HTML de tu sitio web.

Luego, puedes añadir esa hoja de estilos a cada documento HTML usando este código HTML:

<!DOCTYPE html><html><head><link rel="stylesheet" href="mystyle.css"></head>





Esto le indica al navegador web que utilice la información de la hoja de estilos al renderizar el contenido de esa página web. De esta manera, solo necesitas describir cada elemento una vez en lugar de hacerlo cada vez que aparezca.

Puedes configurar el color de fuente de los párrafos en tu hoja de estilos externa, la cual usarás para todas las etiquetas <p> de tu sitio web.

¿Cuándo se utiliza HTML?

Como se mencionó, HTML se utiliza en 94.5% de todos los sitios web, lo que significa que sirve como base para prácticamente todo lo que ves en la web.

Puedes usarlo para crear:

• Sitios web personalesPortafoliosSitios web empresarialesY mucho más

Echa un vistazo a los sitios web en HTML más populares de nuestra comunidad para ver lo que es posible lograr.

¿Cuáles son las principales ventajas de HTML?

Aquí tienes algunas de las principales ventajas de HTML:

• Es fácil de aprender: HTML es el punto de partida para aprender desarrollo web. Afortunadamente, este lenguaje es fácil de asimilar, incluso si nunca has programado antes.Es bien compatible: HTML es una de las tres tecnologías web principales, lo que significa que puedes encontrar un tutorial relevante para cualquier cosa que quieras hacer con él.Es versátil: HTML se utiliza para crear sitios web y en el desarrollo de aplicaciones web y móviles. No podrás hacer esto último solo con HTML, pero una vez que añadas CSS y JavaScript a la mezcla, estarás listo para empezar.

HTML es fundamental para desarrolladores y diseñadores web

Aprender HTML es increíblemente útil si eres desarrollador web, incluso si utilizas herramientas de desarrollo visual o de bajo código para construir tus sitios. Cuando aprendes HTML, serás capaz de entender cómo se construyen los sitios web y, lo que es más importante, cómo funcionan los elementos en conjunto.