Dar formato en HTML es diferente que dar el mismo formato con CSS, o por lo menos debería serlo. Quiero decir que el formato dado con HTML tiene un sentido más semántico o de significado. En cambio, el formato que se le da al texto cuando lo aplicas con CSS debería ser para hacer bonito, para vestir.
A partir de aquí, te voy a mostrar las diferentes etiquetas que hay en HTML para dar formato semántico a tu texto, aunque todavía ha
Tabla de contenidos
Texto en negrita
La etiqueta para poner el texto en negrita es <b> ... </b>. Aunque este elemento lleva ya mucho tiempo entre nosotros, todavía se utilizar, pero bajo mi punto de vista y del W3C sólo tiene un sentido de estilo y no semántico. Por lo que deberías utilizar esta característica, poner el texto en negrita, con las propiedades específicas de CSS. Después verás la que sí debes utilizar.
En cursiva o inclinado
La etiqueta HMTL para mostrar el texto en cursiva o inclinada es <i> ... </i>, pero igual que con el texto en negrita, esta etiqueta debería no utilizarse ya que da un sentido estético más que semántico.
Y dirás, vaya tela….llevo dos elementos y los dos aconsejas que no los utilice. ¿Y cuáles utilizo? Vamos a ello…
Contenido importante o relevante
Cuando tú pones el texto en negrita o cursiva, la intención principal es resaltar esa palabra o frase. Es decir, normalmente lleva un sentido semántico de mayor importancia.
En este sentido, cuando queremos resaltar una palabra o frase en un texto, poniéndola en negrita, se usa las etiquetas HTML <strong> ... </strong. Además de mostrar el texto en su interior en negrita, le estarás diciendo a los navegadores que es importante, cosa que con <b> ... </b> no pasa.
Pasa lo mismo cuando quieres poner el texto en cursiva, la intención es dar un sentido de importancia, pero igual no tanto como la negrita. En ese caso dispones de la etiqueta <em> ... </em>, que además de mostrar en texto en cursiva o inclinada también le dice a los navegadores que tiene cierta relevancia respecto al resto del texto. En cambio, la etiqueta <i> ... </i> sólo muestra el texto en cursiva.
Texto más grande
Si lo que quieres es hacer un poco más grande una palabra o frase en un texto, en HTML tienes la etiqueta <big> ... </big>. El tamaño del texto puede definirse en una escala del 1 al 7, con <big> aumentarás en 1 su valor.
El W3C y yo también desaconsejamos el uso de esta etiqueta que puede ser sustituida por darle el estilo con CSS.
Texto más pequeño
Igual que la etiqueta anterior, la etiqueta <small> ... </small> hace exactamente lo mismo, pero en pequeño. También está desaconsejada.
Subíndice
Si quieres mostrar un fragmento de texto más pequeño y ligeramente desplazado más abajo, debes utilizar la etiqueta <sub> … </sub>. Un ejemplo típico es para mostrar la fórmula química del agua:
<p>Fórmula química del agua: H<sub>2</sub>O</p>
En pantalla se verá así:
Superíndice
Para mostrar un fragmento de texto como superíndice debes utilizar la etiqueta <sup> … </sup>. Un ejemplo sería elevar un número a una potencia.
<p> 5<sup>2</sup> es igual a 25</p>
Texto insertado o añadido
Si tienes un blog puedes actualizar el contenido de las entradas con esta etiqueta <ins> ... </ins>. Entre esta etiqueta puedes poner el contenido actualizado.
Con los atributos cite y datatime se puede añadir un enlace que explique el porqué de la actualización y su fecha.
Texto borrado o cambiado
Si quieres modificar texto y mostrar las partes modificadas o eliminadas, dispones de la etiqueta <del> ... </del>. Esta etiqueta muestra el texto que hay en su interior tachado, lo que da el sentido que ha sido modificado o que no cuenta.
<p>Quiero <del>hacer</del> <ins>implementar</ins> un código HTML</p>
Por pantalla se vería así:
Si te ha gustado o te ha aclarado conceptos el contenido de este articulo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta