Aunque las imágenes en HTML cada vez tienen más peso en la web, así como el vídeo; la base sigue siendo el contenido, el texto. Por eso, el texto en HTML y saber cómo darle formato es muy importante en el diseño web. La legibilidad es fundamental para que puedas leer cómodamente este artículo, así como el resto de contenido que consumes en internet, ya sea desde tu ordenador o desde tu móvil.
Las palabras en negrita, para saber qué es lo más importante, que el texto aparezca alineado, los enlaces subrayados, etc., son elementos básicos, que utilizamos y nos servimos de ello sin darnos cuenta, detrás de los cuales está, una vez más, el HTML. ¡Vamos a ver paso a paso cómo se da formato a un texto HTML!
El formato en HTML se refiere a la manera en la que vemos el contenido de una web. Cómo está dispuesto el texto, las imágenes, etc. Por definición, las etiquetas que forman este lenguaje son las que dotarán al contenido de ese formato. En el caso del texto HTML, se trata del texto, el tipo y tamaño de letra, si está centrado, si está en negrita o cursiva, etc.
Cómo trabajar con texto en HTML
Como sucede con el resto de elementos, por ejemplo el atributo tabla en HTML, hay una serie de etiquetas básicas que debes conocer para dar formato a un texto HTML.
Las etiquetas básicas de texto HTML son:
<b>
Para poner texto en negrita.
<i>
Para poner texto en cursiva.
<u>
Para poner texto subrayado.
¡Vamos a ver cómo se usaría cada una de estas etiquetas!
- ✅ Ejemplo: como poner negrita en HTML
- ✅ Ejemplo: como poner cursiva en HTML
- ✅ Ejemplo: como subrayar en HTML
- ✅ Ejemplo combinado: ¿Y si quiero poner un texto o una palabra en cursiva y negrita, o negrita y subrayado? Se pueden usar estos atributos de manera combinada de la siguiente forma:
📝 A tener en cuenta: en todos estos ejemplos, la etiqueta <p> indica el inicio y el fin (</p>) de un párrafo, que es el modo normal de escribir texto en HTML.
Centrar texto en HTML
Existen dos métodos básicos para centrar texto con HTML y CSS. La lógica del lenguaje HTML te habrá llevado a pensar, seguramente, en que existe una etiqueta ideada para eso. Y estás en lo cierto, existe la etiqueta <center>, que se utiliza de la siguiente manera.
- ✅ Ejemplo: cómo centrar texto HTML con <center>
⚠️ ¡Atención!
Aunque se puede usar esta forma de centrar texto en HTML, en la actualidad está desaconsejado, ya que ha quedado obsoleta. El motivo es que <center> </center> crea un bloque de texto.
Actualmente hay otra manera de hacerlo, más versátil, que vamos a ver a continuación.
Centrar texto en HTML con CSS
El CSS es un lenguaje que se corresponde con las siglas Cascading Style Sheets (hojas de estilo en cascada en su traducción al español), que sirven para definir el diseño de un documento. Funcionan de la siguiente manera, aplicando estilos, que pueden ser colores, formar, alineados, etc. a un documento o a varios "de forma automática y masiva" 1, lo que facilita el trabajo del diseño web, ya que no es necesario aplicar las etiquetas una por una en toda una web hecha con HTML.
- ✅ A continuación, un ejemplo de cómo centrar texto en HTML con CSS:
Estilo y formato avanzado de texto
A lo largo de estas líneas hemos visto algunas de las etiquetas básicas para dar formato a un texto; también algunas de las que son necesarias para escribir un texto HTML, como <!DOCTYPE html> para empezar, seguir con <html> y usar <p> para indicar que se trata de un párrafo; y también cómo dar forma al texto con alguna pincelada de cómo hacerlo de forma combinada.
En este punto vamos a incidir de nuevo ahora, ya que es el que puede causar algo más de confusión.
👆 Pero antes: aprende a hacer cometarios en HTML, esto es importante a medida que vas conociendo funciones más avanzadas para que puedas poner aclaraciones a medida que avanzas tu proyecto.
Combinación de etiquetas para estilos complejos
El texto en HTML puede ir mucho más allá de lo que hemos visto hasta ahora, combinando HTML con CSS (las hojas de estilo que hemos explicado también más arriba). Vamos a ver algún ejemplo práctico, en el que tendrás que ahondar un poco más para ir puliendo tus conocimientos:
- ✅ Ejemplo: combinar etiquetas anidadas.
⚠️ Importante: Las etiquetas anidadas son las que se sitúan dentro de otras etiquetas. En este caso, se trata de <strong>, para resaltar una parte importante del texto, con <p> en un párrafo.
Consideraciones de accesibilidad al usar texto formateado
Como en el resto de elementos del contenido de una web en HTML, en el texto hay que tener en cuenta la accesibilidad, es decir, que este sea accesible y legible, también para aquellas personas que tengan algún tipo de dificultad visual, pero también auditiva o motora.
En el caso de las imágenes, esto se "soluciona" con el comando alt, por ejemplo, que define la imagen para las personas con dificultades visuales.
En el caso de los vídeos, por ejemplo, con los subtítulos. O en el caso de las dificultades motoras, el hecho de que todo el contenido sea "clicable" con el teclado en el caso de que no se pueda usar el ratón.
Vamos a ver ahora algunos ejemplos, que sirven también como "best practices" a la hora de dar formato al texto.
Todas estas prácticas diferencian un texto HTML de un txt, que carece de formato, y son a su vez consejos para mejorar la accesibilidad. Podrían considerarse igualmente como consejos para trabajar con texto en proyectos web, ya que ayudan a que el contenido esté estructurado, organizado, sea fácilmente comprensible y esté bien explicado, algo que también será considerado y "premiado" por los motores de búsqueda.
¿Qué significa esto? Pues bien, algo tan importante como que tu contenido llegue a más usuarios y usuarias. Y sí, ¡todo eso lo puedes conseguir gracias al HTML!
Bibliografía
- ¿Qué es CSS? (s/f). Lenguajecss.com. Recuperado el 16 de abril de 2025, de https://lenguajecss.com/css/introduccion/que-es-css/
¿Te gustó este artículo? ¡Puntualo!
Loading...
