HTML o HyperText Markup Language es un lenguaje muy popular y esencial: ¡es el lenguaje que se utiliza para crear páginas web!
No es un lenguaje de programación propiamente dicho, sino un lenguaje de marcado.
Este marcado tiene sentido cuando HTML se combina con su compañero: CSS.
HTML: Un Poco de Historia
Prometemos no abrir el gran libro de la historia de la programación, pero nos limitaremos a presentar, en pocas palabras, la evolución de este lenguaje.
HTML nació en los años 90. Varias versiones se sucedieron hasta llegar a la que se utiliza hoy en día, la versión 5 (desde 2014).
HTML sigue la evolución de la web y mejora con el tiempo.
Hablemos rápidamente de XHTML, porque hay quien lo confunde. Es un lenguaje paralelo a HTML que incluso podría haberlo sustituido. Pero es HTML el que ha sobrevivido e incluso englobado algunas funciones muy prácticas de este último.
Es el lenguaje que utilizan los desarrolladores front-end.
Entonces, Qué Significa HTML
El Lenguaje de Marcado de Hipertexto, o HTML (por sus siglas en inglés HyperText Markup Language), es un código que ayuda a estructurar el contenido de cada página web. Con HTML, un desarrollador monta un “esqueleto”. Después trabaja con el código CSS para dar estilo a la página, cubriéndola con una “piel”. Por último, ejecuta los “sistemas circulatorio, digestivo y respiratorio” programando en JavaScript.
¿Qué es el lenguaje HTML?:
- HyperText (Hipertexto) – texto que conecta elementos relacionados entre sí.
- Markup (Marcado) – Guía de estilo tipográfico.
- Language (Lenguaje) – código que un sistema informático entiende y utiliza para interpretar órdenes.
Un documento HTML se crea en un editor de texto normal, por ejemplo el Bloc de notas. También existen aplicaciones especializadas, como Notepad++, SublimeText o Visual Studio Code, con resaltado de código.
Cómo Funciona HTML
HTML es un lenguaje del lado del cliente. Es decir, tu navegador lee el archivo y traduce el resultado a la pantalla.
El texto que aparece en la pantalla se divide en etiquetas incrustadas en el código HTML. El lenguaje estructura y da sentido al contenido del archivo. Las etiquetas se suceden o entrelazan y muestran su contenido. Sin embargo, no gestiona la maquetación. Ese es el papel de CSS.
El navegador lee las etiquetas y las muestra en secuencia.
Las etiquetas a utilizar están predefinidas y hay diferentes reglas a seguir. Son fáciles de aprender. Puedes consultar aquí todas las etiquetas HTML.
Entre los <> se escribe una etiqueta. Por ejemplo, el título de la página se escribe como <title>.
La mayoría de las etiquetas se abren y se cierran. Después del título, debes poner </title>.
Se dice que algunas etiquetas se cierran solas: no contienen ningún texto. Como la etiqueta que indica la presencia de una imagen, que se escribe:
<img src="unaImagen.jpg" alt="descripción de la imagen">La etiqueta tiene un nombre y es posible darle diferentes atributos HTML.
En el ejemplo anterior, el atributo src indica la url de la imagen, alt define un texto de sustitución cuando la imagen no puede mostrarse.
Para conocer todas las etiquetas, basta con aprenderlas y posicionarlas.
Al final, al leer el archivo HTML, el navegador sabe lo que es:
- un párrafo, p,
- un título, h1, h2…,
- una imagen, img,
- los div: esos bloques tan importantes para montar páginas web bonitas
- y otros elementos (pero no tanto, al fin y al cabo).
Cómo Crear un Archivo HTML
Todo lo que necesitas es un editor de texto para crear un archivo HTML y guardarlo con la extensión .html.
A continuación, hay que establecer el esqueleto de una página HTML. Se trata de una estructura estándar.
Todo archivo comienza con <!DOCTYPE html>, que da al navegador una indicación del tipo de código. Dentro de la etiqueta html que le sigue, la etiqueta:
- head, que permite incluir la configuración de la página, llamar al archivo css, los metadatos,
- body, que incluye el contenido de la página html.
Una vez guardado el archivo, cualquier navegador sabrá cómo abrirlo. Sólo porque está nombrado con la extensión html (o htm, de la época en que las extensiones de archivo se limitaban a 3 caracteres).
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página HTML</title>
<meta charset = "utf-8">
<link rel= "stylesheet" href="estilos.css">
</head>
<body>
<h1>Título Nivel 1</h1>
<h2>Título Nivel 2</h2>
<p>Mi primer párrafo escrito en HTML</p>
<img src="smile.png" alt="Un emoji contento">
</body>
</html>
Su Vínculo con CSS
Dar formato a una página web sólo con HTML es muy (muy) tedioso (y poco bonito: ¿tienes edad para recordar los sitios de los 90?).
CSS permite determinar la forma, el color y el tamaño de cada etiqueta, entre otras cosas.
Nota
A menudo oirás hablar de HTML5/CSS3.
Continuando con el ejemplo anterior, vamos a darle un poco de estilo:
h1 { font-size: 16px;
color: orange;
}
p{
font-size: 16px;
color: blue;
}El resultado es el siguiente:
Ventajas y Desventajas de HTML
Para que un profesional sepa si necesita y está dispuesto a aprender HTML, hay que sopesar los pros y los contras del lenguaje.
Ventajas
- Adecuado para casi todos los navegadores, y el código puede escribirse en cualquier editor de texto.
- El uso de HTML es gratuito.
- Sólo se necesitan un par de horas para aprender los fundamentos del lenguaje de marcado de hipertexto. Su sintaxis es sencilla y directa.
- Adecuado para desarrolladores web profesionales y aficionados.
- Los sitios HTML estáticos, que no necesitan acceder a bases de datos, se cargan rápido porque pesan menos y no tienen “código basura”. Son más baratos de desarrollar y pueden alojarse en el sitio web más barato.
- HTML puede integrarse con otros lenguajes de programación.
- Los elementos HTML son semánticos y accesibles digitalmente: ya pueden utilizarlos los invidentes.
- HTML es capaz de cerrar etiquetas y omitir errores de sintaxis. A diferencia de un error en JS, la página no se bloqueará, sino que seguirá cargándose, aunque con distorsiones impredecibles.
Desventajas
- Todos los cambios repetitivos en el sitio web tendrán que hacerse manualmente. Por ejemplo, sustituir los elementos de menú y navegación de cada página. Lo mismo ocurre con la creación de nuevas páginas, incluso si la estructura es repetitiva, hay que crear cada página por separado.
- Para hacer un buen sitio web que se abra rápidamente en cualquier dispositivo, lector o lector de pantalla, no basta con utilizar
<div>en todas partes. Hay más de 100 elementos HTML, hay que conocer su semántica y dónde aplicarlos. Por ejemplo, no siempre lo que parece una tabla en el diseño es una tabla. Hay que leer la especificación HTML y ser capaz de buscar información en ella. - Si quieres que tu sitio web tenga buen aspecto y responda a las acciones del usuario, también tendrás que aprender CSS y JS.
¿Es HTML un Lenguaje de Programación?
HTML tiene muy pocas características. No todos los expertos lo consideran un lenguaje de programación. Básicamente, el hipertexto HTML es un código que ayuda a un navegador a mostrar correctamente el contenido de un sitio web.
HTML es imprescindible para cualquier persona que quiera desarrollar. Puedes aprender lo básico en un par de horas. Una de las mejores prácticas es cambiar el código de la página fuente y ver qué ocurre. Sólo después de haber practicado la creación de páginas sencillas y aprendido los fundamentos de HTML podrás pasar a lenguajes de programación más avanzados.
La Evolución del HTML. ¿En qué se Diferencian HTML y HTML5?
Desde sus inicios, HTML ha experimentado una evolución increíble. El W3C publica constantemente nuevas versiones y actualizaciones, mientras que los hitos históricos también reciben nombres dedicados.
HTML4 (comúnmente conocido como “HTML” hoy en día) se publicó en 1999, y la última versión importante se publicó en 2014. HTML5 es una actualización que introdujo muchas novedades en el lenguaje.
Una de las características más esperadas de HTML5 es el soporte para incrustar audio y vídeo. En lugar de utilizar el reproductor Flash, podemos simplemente incrustar archivos de vídeo y audio en nuestras páginas web utilizando las nuevas etiquetas <audio> </audio> y <video> </video>. También incluye soporte integrado para gráficos vectoriales escalables (SVG) y MathML para fórmulas matemáticas y científicas.
HTML5 también ha introducido varias mejoras semánticas. Las nuevas etiquetas semánticas informan a los navegadores sobre el significado del contenido, lo que beneficia tanto a los lectores como a los motores de búsqueda.
Tutorial de HTML
Ya sabes cómo crear tu primer archivo HTML y, por tanto, tu primera página web.
¡Aquí tienes un pequeño ejercicio para practicar! Sólo queda trabajar en este lenguaje (y en otros a menudo) ¡para crear un sitio completo! Porque esto es sólo el principio de un largo camino.
