HTML, CSS y Javascript, ¿cuáles son las diferencias?

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre ellos? ¿Son realmente todos lenguajes de programación? ¡Descubre más aquí en este artículo!

Un poco de la historia de cada uno

Intente imaginar cómo era hace unos años, cuando las empresas que querían compartir documentos entre ellas, o entre sus propios empleados, no podían hacerlo de forma tan rápida y práctica como hoy, donde con un solo clic podemos hacer todo este transporte. Para ellos, era necesario utilizar otras herramientas que requieren mucho más tiempo. Así, en 1991, Tim Berners-Lee tuvo una gran idea que no solo facilitaría el día a día de empresas, sino que cambiaría el mundo: diseñó el HTML.

Este lenguaje de marcado, por lo tanto, se desarrolló para hacer más práctico el compartido de documentos. Sin embargo, a partir del año siguiente, se creó la World Wide Web (WWW), una red de alcance mundial, que hace de HTML una herramienta utilizada para todo y por todos.

CSS, por otro lado, surgió como resultado de este enorme crecimiento en HTML. Cuanto más se usaba HTML, más usaban los desarrolladores su creatividad para hacer que las páginas fueran hermosas y con estilo. Sin embargo, toda esta parte estética fue escrita en el mismo archivo que la parte estructural, dejándolos gigantes y cada vez más difíciles de entender. Así, en 1995, se creó el CSS para cuidar la parte estética de la página, aparte de la estructura, papel del HTML.

Finalmente, se creó Javascript, fue a partir de una gran competencia entre los gigantes del mercado en ese momento: Microsoft y Netscape.

Todo empezó con la creación de un lenguaje de servidor por Netscape para implementarlo en los servidores web de la empresa. Cuando Microsoft descubrió que esta idea podía tener éxito, no perdió el tiempo y comenzó a desarrollar el lenguaje JScript para implementarlo en sus propios servidores web ISS. Al darse cuenta de que su idea estaba siendo copiada, Netscape decidió desarrollar una tecnología del lado del cliente que se ejecutara en el propio navegador. Terminó haciendo todo más rápido. Por lo tanto, Microsoft volvió a ver una gran oportunidad de mercado y decidió desarrollar un sistema similar al de su competidor.

Entonces había dos tecnologías "client-side": JScript de Microsoft y Javascript de Netcape, cada uno de los cuales funciona solo en los navegadores de sus respectivas empresas. Para estandarizar Javascript, Netscape no perdió tiempo en enviarlo a la empresa ECMA, lo que le permitió incorporarlo a la mayoría de los navegadores existentes. De ahí surgió ECMAscript, que no era más que el nuevo nombre de Javascript, que aún hoy no se usa mucho.

HTML

Su nombre proviene del inglés Hyper Text Markup Language, que significa "lenguaje de marcado de hipertexto".

¿Qué quieres decir con "lenguaje de marcado"? Bueno, HTML no se considera un lenguaje de programación como los demás y ya sabrás por qué.

Imagínate una página web, como la que estás leyendo ahora mismo. Puedes ver que hay varios elementos separados, como encabezado, título, párrafos, imágenes y tantos otros. Toda la organización de estos elementos se realiza mediante HTML. Se utiliza para crear toda la estructura de la página y, para ello, utiliza las famosas tags (etiquetas) para indicar dónde se implementará cada tipo de elemento.

Por ejemplo, si desea insertar un párrafo en la pantalla, puedes usar la tag <p> para eso, colocando el texto deseado dentro del elemento, como se muestra a continuación:

<p>Este es un párrafo</p>

Por lo tanto, existen varias tags de diferentes estructuras para ensamblar el esqueleto de la página. Pero, ¿cómo es posible que este párrafo sea azul? ¿O cambiar la fuente de la letra? Aquí viene nuestra próxima tecnología: CSS.

CSS

Cascading Style Sheet, más conocido como CSS, es un lenguaje de estilos que, como HTML, tampoco se considera un lenguaje de programación. Es la encargada de separar la parte estructural de la aplicación (que estará en manos de HTML) de la parte estética. Para usar CSS, usamos la siguiente sintaxis:

selector {  
    propiedad: valor;
}

El selector será el elemento que queramos estilizar (podría ser una tag, una clase, un identificador ...), la propiedad será lo que vamos a cambiar (como color, tamaño de fuente, ancho ...) y el valor será realmente el cambio (como: rojo para color, 18px para tamaño de fuente, y así por delante).

Entonces, cuando usamos una tag HTML como la tag <p> que usamos como ejemplo anterior, podemos diseñarla de la siguiente manera:

p {  
    color: blue;
}

Con eso, todos los párrafos se volverán azules.

Un dato más interesante: si traducimos el nombre de esta tecnología, tendremos “hoja de estilo en cascada”. ¿Qué significa eso?

CSS se puede escribir dentro del archivo HTML, usando el estilo como elemento <style> o como atributo de algún otro elemento <p style="">. También se puede escribir en un archivo separado, solo CSS, importándolo al documento HTML de la siguiente manera:

<link rel="stylesheet" href="nombre_del_archivo_css.css">

Sin embargo, algo muy importante a destacar es la posibilidad de utilizar más de un archivo CSS al mismo tiempo, para estilizar la aplicación. De ahí la palabra "cascada". Esto permite varias interacciones diferentes, pero debes tener cuidado de no perderte y confundir el código, siempre siguiendo las reglas para esto.

Javascript

Para completar la gran tríada del desarrollo front-end, contamos con Javascript, el único lenguaje de programación de las 3 tecnologías mencionadas.

Puedes ver que ya hemos creado la estructura de la página con HTML y hemos aplicado estilo a los elementos con CSS. Pero, ¿qué pasa con las funcionalidades dinámicas que vemos cuando abrimos un sitio web?, ¿cómo suceden?

Esto lo hace Javascript. Agrega movimiento a las páginas web, además de permitir el procesamiento y transformación de los datos enviados y recibidos. Te permite crear contenidos que se actualizan de forma dinámica y animada, dando vida a aplicaciones que antes solo estaban estructuradas estáticamente con HTML.

Siempre que vea un cuadro de alerta sonando en un sitio web, o un mecanismo de autocompletar en algún campo, sepa que Javascript está funcionando. Un ejemplo de código usando el cuadro de alerta:

alert(‘Hello World’); 

Al igual que CSS, Javascript se puede escribir dentro del código HTML:

<script>  alert(‘Hello World’); </script>

Cómo en un archivo separado, importándose dentro del atributo de ese mismo elemento:

<script src="nombre_del_archivo_js.js"></script>

Algo importante a tener en cuenta es que este lenguaje se puede utilizar tanto en el lado del cliente como en el lado del servidor, utilizando tecnologías necesarias para ello, como Node.js.

El papel de cada uno en la aplicación.

Por tanto, después de conocer un poco sobre cada una de estas tecnologías, es posible ver las diferentes funciones que desempeñan dentro de una página web:

• HTML: lenguaje de marcado utilizado para estructurar elementos de la página, como párrafos, enlaces, títulos, tablas, imágenes e incluso videos.

• CSS: lenguaje de estilo utilizado para definir colores, fuentes, tamaños, posicionamiento y cualquier otro valor estético para los elementos de la página.

• Javascript: lenguaje de programación utilizado para hacer la página con más movimiento, pudiendo actualizar elementos de forma dinámica y manejar mejor los datos enviados y recibidos en la página.

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web como ejemplo, de la siguiente manera:

HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin, Javascript es el músculo que le da movimiento al cuerpo.

Si te interesan los temas de tecnología, desarrollo web y programación, les invitamos a conocer los cursos de Alura Latam, contamos con diversos cursos en el área de Front End, Programación, Data Science e Innovación y Gestión.

Puedes leer también:

• ¿Qué es front-end y back-end?
• Comenzando con Front-end
• Empezar a programar es con JavaScript