¿Qué es HTML? 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 Hipertexto (Hipertext 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 su estructura.
El software que lee este tipo de lenguaje se llama navegador y seguro que estás utilizando uno para leer esta entrada de blog. Chrome, Firefox y Safari son algunos de los navegadores 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 campo 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.
Este es el principio básico del proyecto World Wide Web (WWW) que se inicia en los 90 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 determinada. La forma de hacerlo es a través de etiquetas y este lenguaje sólo podrá ser procesado por un navegador.
¿Para qué sirve el HTML?
Con estas pqueñas líneas de código acabo de darle unas instrucciones al navegador para mostrar 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 / >
Etiquetas de estructura
En el código de arriba, lo primero que vemos es una etiqueta que dice < !DOCTYPE html >. Se trata de un estándar internacional que le dice al navegador: “Oye, lo que viene es puro HTML, ¿vale?”. Luego, verás de nuevo < html > y es aquí donde realmente empieza el código HTML.
En la siguiente imágen, (que te la pondré de nuevo para que veas mejor), vemos otras etiquetas que sirven para dar estructura al documento, como < head >, 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á < body > donde va toda la información de la página 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 HTML 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 a ‘Enter’ en el teclado). Vemos en el ejemplo de arriba:
- < h1 > – encabezado de nivel 1
- < h2 > – encabezado de nivel 2
- < p > – etiqueta de párrafo
Hay otras etiquetas 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 HTML en línea
Este tipo de etiquetas, como su nombre indica, son las que van “en línea” con el resto del texto. Es decir, no generan una nueva línea ni separación del 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 o enlace)
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. Sin embargo, 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 deberían 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.
Cómo editar el HTML en WordPress
En los principios del internet, HTML era el principal lenguaje para desarrollar páginas web completas. Incluso, en la actualidad, sigue siendo la base del desarrollo web.
Lo más seguro es que ya hayas escuchado hablar también de 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 estés 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 hablarte de 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.
Editar HTML en WordPress dentro de entradas y páginas
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.
Si ya estás utilizando el editor visual Gutenberg de WordPress 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“.
Editar HTML en WordPress de Widgets
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.
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 😉
Editar HTML en WordPress de temas
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 ten 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 WordPress, 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.
Teniendo esto en cuenta, puedes ingresar al Editor de temas, 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.
