HTML es la base de prácticamente todo lo que hay en Internet. Es el pilar sobre el que está construida la web, y ha sido así durante décadas.
Sin un conocimiento fundamental de HTML todo lo que hagas con WordPress o cualquier otro desarrollo o diseño web tendrá límites.
Yo mismo, aunque mis primeros pasos en la creación web fueron con HTML y una aplicación de texto simple, con el tiempo me centré en los CMS y dejé prácticamente de aprender, y fue un error, pues llega un punto en el que para avanzar, para dedicarte a la creación web, tienes que aprender al menos HTML y CSS, para posteriormente, si quieres programar en serio, lanzarte a dominar PHP y JavaScript.
Aunque cada vez es menos imprescindible saber código para diseñar y desarrollar webs, gracias a la facilidad de los entornos de trabajo actuales (frameworks) como Elementor, Divi o el mismo WordPress, si de verdad quieres no tener límites debes aprender los lenguajes de marcado y programación fundamentales para Internet.
Y hoy me gustaría empezar por el fundamento de todo, el HTML.
Lo mejor de todo es que no necesitas aprender todo de golpe, hay una serie de códigos HTML básicos que todo usuario de WordPress debe conocer para aplicarlos a diario, y esto es lo que vamos a aprender hoy, despacio, paso a paso.
Índice de contenidos
¿Qué es HTML?
HTML es la abreviatura de hypertext markup language, lo que significa que no es del todo un lenguaje de programación, pues HTML no ordena a tu ordenador que ejecute cosas, lo que hace es que toma un texto que tengas en tu página, le aplica un marcado, de negrita, alineación, tamaño, etc.
Además, HTML te ofrece la posibilidad de incluir enlaces e imágenes, y con HTML5, la última versión, manipularlos a tu gusto.
El código HTML está contenido dentro de etiquetas, y es muy fácil de leer. Una página HTML sencilla sería algo así:
<html> <head> <title>Aquí iría el título de la página web</title> </head> <body> <h1>Este es el título de la página que es visible para el visitante</h1> <p>Contenido</p> <p>Más contenido</p> <p>Más y más contenido</p> <h2>Encabezado de sección</h2> <p><img src="https://ayudawp.com/wp-content/uploads/2021/02/cache.png"></p> <p><a href="https://campus.ayudawp.com/">Un enlace a la web de formación de Ayuda WordPress</a></p> </body> </html>
Al visualizarse desde un navegador se vería así:
Como habrás podido comprobar, en realidad el HTML es bastante simple. De hecho, aunque nunca hayas visto antes código HTML, a poco inglés que sepas, seguro que podrías adivinar qué significa cada una de las etiquetas, solo por el contexto.
Visto esto, vamos a ver ya cuáles son los códigos HTML básicos, los más habituales, que verás en toda página web.
Negrita
Cuando envuelves tu texto en las etiquetas <strong> le estás diciendo al navegador que ponga el texto en negritas.
También puedes usar <b>, pero como los motores de búsqueda prefieren un marcado semántico, que signifique algo, mejor que te acostumbres a usar <strong>.
Ejemplo de uso:
Puedes poner <strong>texto en negritas</strong> usando esta etiqueta.
Cursiva
Otra de las etiquetas (tags) HTML más comunes es <em> abreviatura de emphasis, que es el uso semántico de aplicar cursivas en HTML. También puedes usar, si lo prefieres, las etiquetas <i>.
Ejemplo de uso:
Puedes poner <em>texto en cursivas</em> usando esta etiqueta.
Subrayado
La etiqueta <u> es la que usaremos para subrayar texto. Se suele usar poco, porque como los enlaces suelen llevar subrayado automático en la mayoría de navegadores, si subrayas texto podría llevar a errores a los usuarios y que hiciesen clic en sitios donde no hay enlace, y eso sería una mala experiencia de usuario.
Ejemplo de uso:
Puedes <u>subrayar texto</u> usando esta etiqueta.
Encabezados
Me atrevería a apostar que los códigos básicos HTML más utilizados son los encabezados. Me refiero a las etiquetas HTML <h1>, <h2>, <h3>, <h4>, <h5>, <h6> que usamos para dividir nuestro contenido en secciones menores.
Con los encabezados ten siempre en cuenta usarlos en un orden jerárquico lógico. A los buscadores les gusta, les parece más razonable, anidar los encabezados, o sea, que uses <h2> solo bajo un <h1>, no bajo un <h3>.
Aunque la mayoría de las páginas web solo tienen un único <h1>, Google ya no te penaliza por tener más. Simplemente recuerda que si vuelves a usar en tu contenido un <h1> es como reiniciar el anidado de los encabezados inferiores previos de la página, o de esa sección de la página.
Ejemplo de uso:
<h2>H2 es la etiqueta de encabezado más utilizada.</h2>
<h3>Luego puedes anidar dentro un h3.</h3>
<h4>Y así sucesivamente.</h3>
<h2>Para luego volver a iniciar otra sección</h2>Todos los encabezados que estoy utilizando en esta guía para cada sección de los elementos HTML son h2.
Imagen
Insertar imágenes es una de las cosas más útiles que nos permite hacer HTML. Hace años Internet era todo texto, pero hoy no imaginaríamos ninguna página web sin al menos una imagen.
Lo único que tienes que hacer es conocer la URL de dónde está la imagen que quieres mostrar, y ponerla dentro de la etiqueta HTML <img src> (que es una abreviatura de image source u origen de la imagen).
Ejemplo de uso:
<img src="https://ayudawp.com/blog/wp-content/uploads/2021/02/cahe.png" alt="Texto alternativo de la imagen">
Fíjate que no hace falta que cierres la etiqueta de imagen como el resto, y que ni siquiera hace falta que pongas las comillas, aunque la mayoría las usamos para hacer el código más legible.
El atributo <alt> es el texto que se mostrará por accesibilidad, y que también indexan los motores de búsqueda. No olvides su importancia, porque para los usuarios que naveguen con lectores en pantalla y otro tipo de dispositivos de accesibilidad el texto alternativo es totalmente necesario para usar Internet y disfrutarlo como el resto de suertudos que no tenemos ningún problema de accesibilidad.
Enlace
Y llegamos a los enlaces. ¿Qué sería de Internet sin los enlaces?
Y podemos hacer montones de cosas con los enlaces. En su uso más básico simplemente ponemos una etiqueta <a href>. La <a> indica que es un enlace, y el <href> es la referencia del hipertexto (la URL) a la que enlazamos.
Ejemplo básico de uso:
<a href="https://campus.ayudawp.com/">Un enlace a la web de formación de Ayuda WordPress</a>
Si te fijas en el ejemplo anterior, simplemente cerramos con un </a>, y puedes poner cualquier texto dentro, que será el enlace clicable, también llamado texto de anclaje.
En el navegador se vería así: Un enlace a la web de formación de Ayuda WordPress.
También, si quieres, puedes anidar código HTML. Un ejemplo muy típico sería hacer clicable una imagen, insertando una etiqueta <img src> dentro de etiquetas de enlace, sustituyendo a lo que normalmente sería el texto.
Ejemplo de uso:
<a href="https://campus.ayudawp.com/"><img src="https://ayudawp.com/blog/wp-content/uploads/2021/02/cache.png"></a>
Que, en el navegador sería lo siguiente, una imagen con enlace:
Atributos de enlaces
No es obligatorio, pero sí a veces recomendable incluir algunos atributos a los enlaces, que hagan que se comporten de un modo concreto, ya sea anular el indexado de la URL o abrirla en una nueva ventana del navegador.
Los atributos de enlaces más utilizados son estos:
- rel – Indica algún tipo de relación del enlace y a donde lleva. Por ejemplo, noreferrer para evitar tráfico de referencia de vuelta.
- target – Le dice al navegador dónde abrir el enlace: _blank lo abrirá en una nueva ventana, por ejemplo.
- nofollow – Este es un valor muy utilizado del atributo rel, y le dice a los motores de búsqueda que no quieres pasar link juice al sitio enlazado. Es útil cuando enlazas a algún contenido controvertido o que no tiene nada que ver con tu contenido original. También evita que la gente deje enlaces spam en tus comentarios, ya que no obtienen ningún beneficio de posicionamiento.
Hay más, pero estos son, con toda seguridad, los que vas a ver más a menudo.
Ejemplo de uso:
<a href="https://campus.ayudawp.com/" target="_blank" rel="nofollow" >Cursos WordPress Online</a>
Texto tachado
A veces, te habrás fijado que hago coñas bromas tachando textos. También se usa a veces dentro de listas, para indicar que algo no está disponible, o cualquier otra situación en la que quieras tachar un texto.
En estas situaciones usamos la etiqueta <del>, abreviatura de delete, o borrar, alrededor del texto que queremos tachar.
Hay gente que no usa nunca esta etiqueta, pero para otros es muy habitual utilizarlo, por locos múltiples motivos. En cualquier caso es un código HTML muy fácil de recordar, y de usar.
Ejemplo de uso:
Puedes <del>tachar texto</del> usando esta etiqueta.
Listas
Las listas son actualmente uno de los marcados (formatos) más utilizados actualmente. Además de dar un montón de espacio en blanco en tus textos, también sirven para organizar ideas complejas y desgranarlas en partes fácilmente consumibles.
Hay dos tipos de lista que puedes hacer con códigos HTML básicos:
- Listas ordenadas <ol> – Con números, tal que 1, 2, 3 y así sucesivamente.
- Listas sin orden <ul> – Usando viñetas y símbolos en vez de números.
Para utilizarlas debes envolver cada lista con <ul> o <ol> según sean sin orden u ordenadas, respectivamente.
Luego, cada elemento de la lista se envolverá en la etiqueta <li>.
Ejemplo de uso:
<ul> <li>Este es un elemento de una lista sin orden.</li> <li>Y este otro.</li> </ul> <ol> <li>Y esto es un elemento de una lista ordenada.</li> <li><a href="https://ayudawp.com">Esto es un enlace dentro de una lista.</a></li> <li><strong>Y esto es un texto en negrita</strong> dentro de una lista.</li> </ol>
Y, como se verá este ejemplo en el navegador sería así:
- Este es un elemento de una lista sin orden.
- Y este otro.
- Y esto es un elemento de una lista ordenada.
- Esto es un enlace dentro de una lista.
- Y esto es un texto en negrita dentro de una lista.
Como has visto, también puedes anidar otras etiquetas dentro de las listas (negritas, enlaces, etc.)
Citas
En algún momento vas a querer citar un texto de otra persona, y es ahí donde tiene sentido la etiqueta <blockquote>.
Simplemente envuelve cualquier texto que hayas copiado/pegado con las etiquetas <blockquote> de apertura y cierre y ya está.
Ejemplo de uso:
<blockquote>Este texto se verá con algún estilo especial (depende de tu tema) para indicar que es una cita.</blockquote>
Este texto se verá con algún estilo especial (depende de tu tema) para indicar que es una cita.
Párrafos
El HTML de los párrafos es algo raro. Depende del CMS e incluso del editor o maquetador que estés usando, puede que muestre cada salto de línea como un párrafo o no.
WordPress, por ejemplo, es lo que hace. Si usas el editor de bloques añade automáticamente los indicadores de cambio de bloque, que fuerzan un nuevo párrafo, y si usas el editor clásico, al hacer intro, añade una etiqueta en la siguiente línea, y te pasa a la siguiente.
Pero no siempre es así, y de hecho los navegadores, por defecto, ignoran los saltos de línea, si no vienen acompañados de una etiqueta HTML que les indique lo contrario.
Lo seguro es que si quieres mantener separados tus párrafos en vez de un enorme ladrillo de texto, envuelvas cada uno en etiquetas <p> de apertura y cierre.
Con esto te asegurarás de que el navegador muestre cada bloque de texto como un párrafo separado en vez de como un bloque de texto continuo.
Ejemplo de uso:
<p>Este es un párrafo.</p> <p>Este es otro párrafo distinto.</p>
Líneas y saltos de línea
Relacionado con lo que hemos visto antes con los párrafos, a veces querrás separar bloques de texto o secciones, es entonces cuando usaremos las etiquetas <hr> o <br/>.
- <hr> inserta una línea separadora visible. Se utilizan mucho para separar widgets o secciones importantes de una página con mucho o diferente contenido.
- <br/> es simplemente un salto de línea. Puedes usar <br/> en medio de un párrafo (<p>) para hacer un salto de línea sin saltar a un nuevo párrafo, casi siempre por cuestiones de estilo o gustos.
Aunque puedes usar los saltos de línea para separar texto y párrafos insertándolas donde quieras que se rompan no es buena idea hacerlo así. La práctica te irá mostrando lo más adecuado en cada caso, unas veces será mejor usar <p> y otras <br/>.
Ejemplos de uso:
Esto es un texto con salto de línea al final.<br/> Esto es otro texto tras el salto de línea
Que se verá así:
Esto es un texto con salto de línea al final.
Esto es otro texto tras el salto de línea
Esto es un texto. <hr> Esto es otro texto detrás de la línea visible.
Y se vería así:
Esto es un texto.
Esto es otro texto detrás de la línea visible.
Resumiendo
HTML es totalmente necesario para que Internet funcione como la conocemos. Todos lo usamos del mismo modo, ya seas un principiante o lleves años desarrollando webs.
Todavía se usa el HTML básico para que funcione la base de toda web, incluidas las creadas con WordPress, solo tienes que hacer un clic derecho en tu web y hacer clic en el enlace para ver el código fuente para comprobarlo.
No importa cuán alucinante parezca el sitio o cuán avanzadas te parezcan sus funcionalidades, cuando hay un enlace roto o aparece todo en negrita en vez de una sola palabra hay algo que arreglar en el código HTML básico de esa página porque seguro que hay una etiqueta <a href> o <strong> que no se ha utilizado bien, y tú puedes arreglarlo, editando el HTML. ahora que conoces los códigos HTML básicos, que son también los más utilizados.
¿Quieres seguir aprendiendo HTML?
Si te has quedado con ganas de más puedes seguir aprendiendo HTML en el siguiente enlace:
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
¡Buenas, Fernando! Buen aporte, mucha gente piensa que estoy hoy día ya no es necesario ni aporta, y nada más lejos de la realidad. Es un complemento imprescindible; especialmente cuando quieres afinar en lo semántico, para conseguir una mejor indexación de la web. O cuando ves que puedes hacer un bloque sencillo como bloque HTML, sin liarte en otros prefabricados. Imagino que seguirás con CSS, ¿verdad? Aunque no puedas incluir todo lo necesario en un artículo, sí que puede dar a la gente esa visión de lo importante que es conocer estos lenguajes básicos esenciales del mundo web. Hay gente que parece que vienen a decir: «por principios, tengo que hacerlo todo sin tocar código». El absurdo, vamos.
Exacto, ya tengo en marcha uno similar sobre CSS 🙂
Las aplicaciones web están genial, pero si te quieres dedicar a esto de hacer webs, tienes que conocer los básicos sí o sí 🙂