Lenguaje HTML: todo lo que debes conocer

Por Felipe

Publicado en:

Desde que la primera versión del HTML de 1991 viese la luz con 18 etiquetas, este lenguaje ha progresado de manera espectacular hasta convertirse en la base del diseño web actual. El lenguaje HTML está presente en cualquier sitio web al que se accede a través de un navegador, y su dominio es una prioridad para los desarrolladores front-end, junto a otros lenguajes como JavaScript para dotar de funcionalidades a los sitios web, o CSS para personalizar el aspecto visual.

A continuación, veremos qué es el lenguaje HTML, cuáles son sus principales características y comentaremos algunas de sus etiquetas más importantes.

 

Qué es el lenguaje HTML

El lenguaje de marcado de hipertexto o HTML (hypertext markup language) es un lenguaje de diseño web basado en el uso de etiquetas con las cuales se define la estructura, el texto y todos los elementos que componen una página web, como las imágenes, las listas, los enlaces, etc.

HTML es un lenguaje de programación que se utiliza junto a CSS y JavaScript para crear páginas web dinámicas y con un aspecto visual atractivo. Se denomina lenguaje de marcado de hipertexto en referencia al uso de enlaces que conectan las páginas web entre sí, tanto a nivel interno del sitio web, como a nivel externo con otras páginas web, eCommerce y blogs.

 

Cómo funciona HTML

El código html de una página web se guarda en archivos con extensión .html o .htm. Es habitual que, en la raíz del espacio de almacenamiento de un sitio web, se sitúe el archivo index.html para que los navegadores web puedan mostrar el sitio web cuando realizan una petición de acceso al servidor web.

Cada página HTML que forma un sitio web está compuesta por un conjunto de etiquetas. La mayoría de estas etiquetas utiliza una apertura y un cierre, dentro de los que se incluyen el contenido y las propiedades a mostrar (<etiqueta>contenido+propiedades</etiqueta>).

 

Características del lenguaje HTML

El HTML es un lenguaje con una gran adaptabilidad que se ha convertido en un estándar internacional para el diseño web.

Las principales características del lenguaje HTML son:

·   Sencillo. Se trata de un lenguaje de programación muy sencillo de utilizar. La curva de aprendizaje de este lenguaje es muy suave, y en apenas unas horas de estudio se puede comenzar a crear la estructura y contenido de una página web.

·   Multiplataforma. HTML es independiente del sistema operativo que se utilice, por lo que puede ser visualizado por cualquier navegador de cualquier sistema como Windows, Linux, MacOs, Android o iOS.

·   No es sensible a mayúsculas y minúsculas. Es un lenguaje que no diferencia entre mayúsculas y minúsculas, por lo que sus etiquetas y atributos pueden escribirse indistintamente utilizándolas. Por ejemplo, es lo mismo escribir <body> que <BODY>.

·   Es dinámico. El proceso para cambiar y actualizar una página web desarrollada con HTML es rápido y ágil.

·   Fácilmente editable. Con un simple editor de texto es suficiente para crear código HTML.

 

Tipos de etiquetas que se utilizan en el lenguaje HTML

Podemos dividir en tres tipos las etiquetas que se utilizan en HTML para diseñar una página web:

 

Etiquetas de bloque

Las principales etiquetas de bloque son las que definen la estructura general del documento HTML y deben estar presentes en todos los archivos HTML.

·   HTML. Dentro de esta etiqueta se encierra todo el código HTML de una página.

·   Head. En esta etiqueta se incluye la información principal de la página como el título, la información meta o los scripts que utiliza. 

·   Body. En esta etiqueta se encuentra el código HTML que encierra todo el contenido de la página, como listas, imágenes, enlaces, vídeos, tablas, y similares.

Estas etiquetas ocupan todo el ancho posible de la página y no permiten que otro elemento se sitúe a su lado. Etiquetas de encabezado como las <h1>, <h2>, <h3>, la etiqueta de párrafo <p>, o la etiqueta para crear tablas <table>, son ejemplos de etiquetas de bloque.

 

Etiqueta de línea

Son las etiquetas HTML que se utilizan en horizontal y permiten introducir otros elementos a su lado. Entre estas etiquetas de línea tenemos <a> (para enlaces), <strong> (texto en negrita), <img> (para añadir un archivo en formato imagen), <input> (para entrada de datos del usuario), entre otras.

La etiqueta de enlace es una de las más utilizadas, siendo un ejemplo de su uso el siguiente:

<a href = ”direccion de la imagen”>Texto del enlace</a>

 

Etiquetas semánticas

Con la actualización a HTML5 en 2014 se introdujeron una serie de etiquetas semánticas para estructurar una página web con las secciones habituales como por ejemplo <article>, <header> o <footer>.

Con el uso de estas etiquetas semánticas junto a hojas de estilo en cascada (CSS) se puede diseñar una web con una estructura moderna y atractiva de forma rápida y sencilla. 

 

El lenguaje HTML es la base del diseño web, y junto a otros lenguajes de programación como el CSS, JavaScript y PHP, es fundamental para la creación de páginas web dinámicas y que puedan ser accesibles desde cualquier tipo de dispositivo.