¿Qué es HTML y para qué sirve?

por | Ago 27, 2021 | Herramientas y servicios

Qué es el HTML y para qué sirve

La respuesta corta al título de esta entrada de blog es que HTML es un lenguaje de marcado que sirve para estructurar la información que se muestra en un navegador.

Sin embargo, para entender mejor de qué se trata y para qué nos va a servir saber utilizarlo, hay que profundizar un poco más en cada parte de esa definición.

HTML significa Lenguaje de Marcado de Hiper Texto (Hiper Text Markup Language), es decir, utilizar este lenguaje nos sirve para etiquetar un texto a fin de que un software reconozca cada una de las partes de las que se compone la estructura de dicho texto.

El software que lee este tipo de lenguaje se llama navegador y seguro que estás utilizando uno de ellos para leer esta entrada de blog. Chrome, Firefox y Safari son algunos de ellos, por mencionar los más comunes.

Al escribir este texto, he dejado todo montado, con HTML, para que tu navegador detecte que la parte que dice “¿Qué es HTML y para qué sirve?” es el título del blog y lo muestre más grande que el resto del texto; también le dije que las líneas que vienen después son párrafos, así que deben mostrarse de otra manera.

Breve historia del lenguaje HTML

Imagina que vives en la década de los 80 y eres un científico. Sabes que del otro lado del mundo hay otros que están trabajando con el mismo tema que tú y puedes acceder de forma remota, pero tienes que buscar entre miles de documentos.

Entonces te enteras de que a un grupo de científicos se les ocurrió generar vínculos entre los documentos, que servirán para conectar toda la información que está alojada en una nueva cosa llamada internet, donde se reúne todo y puedes acceder de forma remota.

Con esta mejora, ahora tienes un texto donde puedes pulsar y el enlace te llevará directamente al documento que necesitas y justo en el apartado que necesitas. También puedes marcar partes relevantes como si les pasaras encima un marcatextos fosforescente.

Esto es el principio básico del proyecto World Wide Web (WWW) que inicia en los 90’s de la mano de Tim Berners-Lee. Una de las bases de este proyecto es el lenguaje HTML, que permitirá que cada uno de los documentos que están en internet tengan un cierto formato que le dé una estructura. La forma de hacerlo es a través de etiquetas y este lenguaje solo podrá ser procesado por un navegador.

 

Etiquetas HTML

Estructura elemento HTML

Volviendo al presente, te decía que le dí instrucciones a tu navegador para mostrarte la información de cierta manera, pero, ¿cómo le dije al navegador qué parte es el título y qué parte es un párrafo? Precisamente por medio de las etiquetas HTML.

Lo primero que debes saber es que todas van a estar rodeadas de los signos menor que < y mayor que > . Además, tenemos etiquetas de apertura y de cierre. Las vas a identificar porque la de cierre tiene una barra diagonal / después del primer “menor que”. Por ejemplo:

<Yo soy una etiqueta de apertura>
</Yo soy una etiqueta de cierre>

Hay algunos elementos que no necesitan etiqueta de cierre:

<Yo no necesito etiqueta de cierre pero sí llevo la barra al final />

Ahora vamos con un ejemplo práctico con las principales etiquetas. Puedes jugar cambiando lo que quieras:

See the Pen Ejemplo HTML by Gonzalo (@gonzalo-webempresa) on CodePen.

¿Demasiada información? No te preocupes, vamos a analizar parte por parte lo que nos dice el ejemplo de arriba.

Comencemos con algunos parámetros generales. Primero, verás que es de las etiquetas que no tienen cierre. Por eso, después de decirle de dónde va a tomar la imagen con el atributo src y su ancho con height, hemos cerrado simplemente con / > .

Luego, podrás darte cuenta de que no importa cuánta información ingresemos dentro de cada etiqueta, la apertura y cierre pueden quedar separadas por varias líneas. Donde es más notorio es en el espacio entre las etiquetas <html> y </html> .

Independientemente de su función, podemos englobar las etiquetas de acuerdo a su funcionamiento dentro del documento HTML. Distingamos tres tipos de etiquetas: de estructura, de bloque y en línea.

 

Etiquetas de estructura

En el código de arriba lo primero que vemos es una etiqueta que dice , esto es un estándar internacional que le dice al navegador: Oye, lo que viene es puro HTML, ¿vale?. Luego, verás de nuevo y es aquí donde realmente empieza el código HTML.

Posteriormente vemos otras etiquetas que sirven para dar estructura al documento, como que nos muestra información de cabecera (el título que se ve en el navegador o el iconito que sale en la pestaña, conocido como favicon). Y justo después está donde va toda la información de la web.

Hay otras etiquetas que nos van a servir para especificar la estructura de nuestro documento, por ejemplo:

  • <footer> – sección inferior, con íconos de redes sociales, por ejemplo
  • <nav> – menú de navegación de la web
  • <aside> – barra lateral

Etiquetas de bloque

Las etiquetas de bloque tienen un espacio hacia arriba y hacia abajo de lo que muestra la etiqueta. Es decir, no se pueden poner uno justo a un costado del otro, sino que inevitablemente tendrá una línea de ruptura (como cuando damos ‘Enter’). Vemos en el ejemplo de arriba:

  • <h1> – encabezado de nivel 1
  • <h2> – encabezado de nivel 2
  • <p> – etiqueta de párrafo

Hay otras más que también entran en esta categoría y que, para no extendernos tanto, ya no veremos, pero existe <div> para contener bloques de información o <table> que sirve para hacer una tabla con datos.

 

Etiquetas en línea

Este tipo de etiquetas, como su nombre lo dice, son las que van “en línea” con el resto del texto, es decir, no generan una nueva línea ni separación con el resto del contenido.

Para entender mejor estas etiquetas, basta decir que son las que nos ayudan a dar formato al texto: ponerlo en negritas, cursivas, tacharlo, etc. Aquí van las más populares:

  • <strong> – destaca una parte del texto
  • <em> – enfatiza en cursivas una parte del texto
  • <del> – muestra un texto tachado
  • <a> – permite generar un vínculo (link)

Ejemplos de este tipo de etiqueta los hemos visto a lo largo de este artículo. Tenemos texto en negritas, cursivas, tachado, de código y con un vínculo.

Antes, también se utilizaba <b> para negritas, así como <i> para cursivas, pero según el estándar internacional esto ya no es recomendable, pues aunque pareciera que tienen la misma función, estas etiquetas antiguas no estaban pensadas para la accesibilidad de las nuevas plataformas. Es decir, un código <b> en un navegador para ciegos no va a destacar el texto como sí lo haría un <strong>.

 

Estándares HTML

Ya que estamos hablando de la accesibilidad y estándares internacionales, es imposible no hablar de una herramienta de documentación muy útil, que aunque no es la oficial del World Wide Web Consortium (W3C), casi lo parece: W3Schools.

Tengo que advertirte que ambos sitios están en inglés, pero con las bases que ya tienes, te deben servir para buscar lo que necesites 🙂 . En el caso del W3C, tienen su versión en español, pero la documentación redirige a la versión anglosajona de la web.

Hablemos rápidamente de la entidad oficial, que es el W3C. Esta organización internacional, que hasta la fecha encabeza el propio Tim Berners-Lee, define los estándares y su evolución en el tiempo. Hay documentación donde se definen ciertas reglas para diseño y arquitectura web, aplicaciones, etc.

Por otro lado, está W3Schools, que con el paso del tiempo se ha ganado el cariño de las personas dedicadas al desarrollo por concentrar mucha información relativa a las etiquetas de las que ya hemos hablado y cómo se utilizan. Definitivamente, es un repositorio muy útil que debes conocer si te interesa adentrarte en estos caminos digitales.

 

HTML en WordPress

En los principios del internet, HTML era el principal lenguaje para desarrollar páginas webs completas. Incluso, en la actualidad sigue siendo la base del desarrollo web. Lo más seguro es que ya hayas escuchado hablar también que se utiliza en conjunto con otros dos lenguajes: CSS para estilos y JavaScript para las funcionalidades lógicas. No te preocupes, hablaremos de ellos en otra ocasión 😉

Ahora, sabiendo que más del 40% de las páginas web que existen en el mundo utiliza WordPress, es muy probable que te estes preguntando: ¿Se llevan WordPress y HTML? ¿Cómo puedes aprovechar este lenguaje de marcado en este gestor de contenidos?

Dentro de las funcionalidades de WordPress, es posible añadir código HTML personalizado en entradas, páginas y widgets. También puedes editar temas directamente, pero esto último no es recomendable a menos que tengas un tema hijo en WordPress sobre el cual trabajar. En todo caso, hay varios lugares donde puedes utilizar HTML en WordPress.

También me gustaría comentarte la opción de los editores html, que te ayudarán a trabajar el código html de tu web, además de permitirte comprobar errores de código de una manera más rápida y así ahorrarte trabajo.

Aquí te recomendamos algunos de los mejores editores html gratuitos y webs para aprender a programar. Así como un post bastante interesante sobre el SSL.

 

Entradas y páginas con HTML personalizado

Puedes utilizar lenguaje HTML en entradas y páginas donde lo necesites. Por ejemplo, para dar una cierta estructura al texto o si prefieres tener un mayor control del contenido que estás generando.

En el caso de las entradas con el editor clásico TinyMCE, verás que tienes dos pestañas: “Visual” y “Texto”. En el segundo apartado es donde podrás ver el HTML puro de tu entrada de blog o página.

Editor HTML en TinyMCE

Si ya estás utilizando el editor visual Gutenberg también tienes la opción de añadir bloques con HTML personalizado o editar el texto en HTML. Solo debes insertar un nuevo bloque y seleccionar el elemento “HTML Personalizado”.

Editor HTML en Gutenberg

Widgets con HTML personalizado

De igual manera, puedes insertar código HTML en los widgets de WordPress. Ya sea en el formato clásico de las versiones anteriores o desde el nuevo editor de widgets que se ha habilitado en la versión 5.8, puedes hacerlo fácilmente.

Widget HTML personalizado en WordPress

Una última recomendación en este sentido. Si quieres sacarle más provecho al nuevo editor visual de WordPress, puedes echarle un vistazo a nuestro Curso de Gutenberg básico y Curso de Gutenberg avanzado. Seguro encuentras algo que te sea de utilidad 😉

 

Edición de temas con código HTML

Puede que necesites insertar algún código HTML en la cabecera de tu WordPress, por ejemplo. Como te decía antes, si esto es lo que necesitas, primero tendrías que generar un tema hijo, pues toma en cuenta que si modificas el tema original, en la siguiente actualización desaparecerán todas tus personalizaciones.

Igualmente, no está de más recordarte que debes tener cuidado si tocas la sección del Editor de temas, pues es aquí donde se encuentra toda la información vital de tu WordPress y es muy fácil romper algo si no sabes lo que haces. El propio WordPress te lo advierte al abrir ese apartado.

Con esto en cuenta, para ingresar al Editor de temas, puedes hacerlo desde el menú “Apariencia”. Te saldrá un listado de los archivos del núcleo de WordPress, donde podrás ver, en algunos de ellos, una mezcla de código HTML con PHP, que es el lenguaje con el que está desarrollado este gestor de contenido.

Editor de temas de WordPress

Un video para explicarlo mejor

Para finalizar, te dejo un video donde resumimos algunos de los conceptos que hemos visto a lo largo de esta entrada.