Dar formato a un texto en HTML. Etiquetas HTML para poner texto en una web
A contiunuación os muestro un listado de etiquetas válidas para formatear textos en html y darles el estilo y apariencia deseados en tus páginas web.
La idea es usar las etiquetas apropiadas para cada situación y tipo de texto, dotando de un marcado semántico adecuado, es decir, darle mayor significado al contenido de la web de cara a tus visitantes, a los buscadores, navegadores, etc.
El uso de las etiquetas HTML para texto, al igual que cualquier otro elemento de tu página web, se debe usar combinado con CSS para controlar la expresión exacta de estas etiquetas en pantalla.
Por supuesto no es necesario usar todas estas etiquetas para hacer buenas páginas web, pero sí que conviene saber que existen para poder aplicarlas cuando sea necesario.
La agrupación aquí expuesta es personal, simplemente para ayudar al lector a encontrar un etiqueta concreta para un fin también concreto. Por supuesto se admiten sugerencias.
Etiquetas válidas fundamentales para dar formato a un texto
Resaltar textos
<strong> Texto de mayor importancia</ strong>
Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para el posicionamiento web.
<b>texto en negrita</ b>
La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.
<em> texto en cursiva </ em>
Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.
<h1> títulos y encabezados</ h1>
Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.
<big>texto más grande</ big>
Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño sin usar css se usa <small>.
<sub> subíndice</ sub>
Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un subíndice.
<sup> superíndice </ sup>
Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un superíndice.
Estructura y disposición de textos en la página
<div>bloque de texto</ div>
Establece un bloque personalizado de contenido en tu página. Se utilizan sobre todo junto con las hojas de estilos para crear capas y estructuras web.
<span> Bloque de texto en línea</ span>
Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo normal del resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como un bloque separándolo visualmente del resto. Puedes leer más información sobre elementos y etiquetas en HTML.
Texto preformateado
<pre> texto preformateado</ pre>
Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la forma
del texto en el código – es decir, sin formato extra tiene que poner pulg Si tienes espacio que en su código, éste aparecerá espaciadas en la página.
<samp> Textos de ejemplo</ samp>
Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un programa, un script, etc. Es similar en uso a la etiqueta <code>.
<code> código</ code>
Establece el texto como código, se usa mucho en páginas como esta, para ejemplos de código fuente.
Citas y Referencias
<blockquote>cita larga</ blockquote>
Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se utiliza para citas largas.
<cite>cita</ cite>
Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).
<q>citas pequeñas</q>
Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el texto en un bloque separado sino que sigue el flujo normal de la página.
<dfn> definición</ dfn>
Pues eso, para formatear un texto en HTML como una definición.
<abbr>abreviaturas</ abbr>
Denota una abreviatura, utilizar el atributo title para darle el significado completo.
<acronym>acrónimos</ acronym>
Lo mismo que la anterior. Sólo que en lugar de para abreviaturas se usa para acrónimos.
Si te interesa, puedes ver ejemplos reales de como se muestran las diferentes etiquetas de texto en la página web de w3 schools.