Etiquetas HTML para el Formato de Texto
Etiquetas de formato de texto HTML: etiquetas semánticas como strong y em frente a presentacionales como b e i, por qué importa la diferencia y ejemplos.
HTML proporciona un conjunto de elementos en línea para dar formato al texto. Se dividen en dos grupos, y entender la diferencia entre ellos es lo más importante de esta página.
- Etiquetas semánticas (lógicas): describen lo que el texto significa — que una palabra es importante, enfatizada, un término definido o una abreviatura. Ejemplos:
<strong>,<em>,<mark>,<abbr>. - Etiquetas presentacionales (físicas): describen cómo debe verse el texto — negrita, cursiva, subrayado — sin decir nada sobre su significado. Ejemplos:
<b>,<i>,<u>,<small>.
Por qué importa la distinción
Dos elementos pueden verse idénticos en el navegador y sin embargo tener significados muy distintos:
- Lectores de pantalla y accesibilidad. Un lector de pantalla puede cambiar su tono de voz para
<strong>y<em>, señalando importancia y énfasis a un usuario con discapacidad visual. No hace esto con<b>e<i>, que son silenciosos y puramente visuales. - SEO. Los motores de búsqueda dan peso al marcado semántico. Envolver una frase clave en
<strong>indica a los rastreadores que es relevante;<b>solo cambia la fuente. - Mantenibilidad. El significado permanece correcto cuando cambia tu CSS. Si más adelante decides que el texto importante debe ser rojo en lugar de negrita,
<strong>sigue significando "importante" y solo tienes que cambiar el estilo.
Una buena regla general: recurre primero a la etiqueta semántica. Usa una etiqueta presentacional solo cuando quieras específicamente un efecto visual que no tenga un significado subyacente.
Veamos cada etiqueta de formato en detalle.
Las etiquetas <h1>-<h6>
Las etiquetas <h1>-<h6> se utilizan para definir encabezados HTML. Hay 6 niveles de encabezados en HTML; <h1> define el encabezado más importante y <h6> el menos importante.
Ejemplo de las etiquetas HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Resultado
Las etiquetas <b> y <strong>
Ambas se muestran en negrita de forma predeterminada, pero tienen significados distintos en HTML5.
- La etiqueta
<strong>es una etiqueta semántica que marca el texto como de gran importancia, seriedad o urgencia — contenido que el lector no debe perderse. - La etiqueta
<b>es una etiqueta presentacional que marca el texto como estilísticamente diferenciado del texto circundante sin transmitir importancia adicional — por ejemplo, un nombre de producto, una palabra clave en un índice o la frase de apertura de un artículo.
¿Cuál usar? Si el estilo negrita existe para señalar importancia, usa <strong>. Si solo quieres negrita por una convención tipográfica sin significado añadido, usa <b> (o, mejor aún, aplica estilo al texto con CSS).
Ejemplo de las etiquetas HTML <b> y <strong>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>Las etiquetas <i> y <em>
Ambas se muestran en cursiva de forma predeterminada, pero tienen significados distintos en HTML5.
- La etiqueta
<em>es una etiqueta semántica que marca el énfasis en la pronunciación — el tipo que cambia el significado de una frase ("Amo el HTML" frente a "Amo el HTML"). Un lector de pantalla puede pronunciarla con énfasis adicional. - La etiqueta
<i>es una etiqueta presentacional para texto en una voz o estado de ánimo alternativo: un término técnico, una frase en otro idioma, un pensamiento, el nombre de un barco u otro contenido que se representa tradicionalmente en cursiva — sin implicar énfasis.
¿Cuál usar? Si estás enfatizando una palabra para que se lea en voz alta con énfasis, usa <em>. Para una convención tipográfica en cursiva sin énfasis, usa <i>.
Ejemplo de las etiquetas HTML <i> y <em>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>La etiqueta <pre>
La etiqueta <pre> se utiliza para definir texto preformateado. Los navegadores renderizan el texto contenido con los espacios en blanco y los saltos de línea tal como se han escrito.
Ejemplo de la etiqueta HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>La etiqueta <mark>
La etiqueta <mark> se utiliza para presentar una parte del texto de un documento como marcada o resaltada con fines de referencia.
Ejemplo de la etiqueta HTML <mark>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Resultado
La etiqueta <small>
La etiqueta <small> reduce el tamaño de fuente del texto en un nivel por debajo del tamaño de fuente base del documento (de mediano a pequeño, o de muy grande a grande). La etiqueta generalmente contiene elementos de importancia secundaria, como avisos de derechos de autor, comentarios secundarios o avisos legales.
Ejemplo de la etiqueta HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Las etiquetas <del> y <s>
La etiqueta <del> especifica una parte del texto que fue eliminada del documento. Los navegadores muestran este texto con tachado.
Ejemplo de la etiqueta HTML <del>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>La etiqueta <s> marca texto que ya no es preciso ni relevante — por ejemplo, un precio antiguo junto a uno con descuento. (Nota: <s> no está diseñada para indicar eliminaciones en un documento editado; usa <del> para eso.)
Ejemplo de la etiqueta HTML <s>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>El contenido de ambas etiquetas se muestra tachado. Sin embargo, a pesar de la similitud visual, estas etiquetas no pueden reemplazarse mutuamente: <del> significa "eliminado en una edición", mientras que <s> significa "ya no es preciso".
Las etiquetas <ins> y <u>
La etiqueta <ins> define texto que ha sido insertado (añadido) al documento, generalmente como contraparte de <del>. El contenido se muestra subrayado de forma predeterminada.
Ejemplo de la etiqueta HTML <ins>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Resultado
En HTML5, la etiqueta <u> representa una anotación no articulada y no textual — texto marcado con un estilo (subrayado por defecto) que tiene un significado que no está expresado explícitamente en el texto. Los usos típicos son señalar una palabra mal escrita o marcar nombres propios en texto chino. Evita <u> para decoración simple, ya que los usuarios pueden confundir el subrayado con un enlace; utiliza CSS text-decoration en su lugar.
Ejemplo de la etiqueta HTML <u>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>Las etiquetas <sub> y <sup>
La etiqueta <sub> define texto en subíndice. El texto en subíndice se sitúa por debajo de la línea base de los demás símbolos de la línea y tiene una fuente más pequeña. La etiqueta <sup> define el superíndice, que se coloca ligeramente por encima de la línea de texto normal y es relativamente más pequeño que el resto del texto. La línea base pasa por el borde superior o inferior de los símbolos.
Ejemplo de las etiquetas HTML <sub> y <sup>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Resultado
La etiqueta <dfn>
La etiqueta <dfn> marca la instancia definitoria de un término — el lugar del texto donde el término está siendo definido, no cada lugar donde aparece. Es una etiqueta semántica; los navegadores la renderizan en cursiva de forma predeterminada, pero ese estilo es accidental y puede cambiarse con CSS.
Ejemplo de la etiqueta HTML <dfn>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
</body>
</html>Más elementos de texto semántico
HTML tiene varios otros elementos en línea que añaden significado a tipos específicos de texto. No sirven para dar estilo — cada uno describe qué es el texto:
<abbr>— una abreviatura o acrónimo, p. ej.<abbr title="HyperText Markup Language">HTML</abbr>. El atributotitleproporciona la expansión completa al pasar el cursor.<cite>— el título de una obra citada (un libro, película, artículo, etc.).<q>— una cita en línea breve; el navegador añade las comillas automáticamente.<code>— un fragmento de código de computadora, mostrado en fuente monoespaciada.<kbd>— la entrada de teclado que el usuario debe escribir, p. ej. Ctrl + C.<samp>— salida de muestra de un programa o sistema.<var>— una variable en una expresión matemática o contexto de programación.
Ejemplo de elementos de texto semántico:
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Etiquetas obsoletas — No las uses
Algunas etiquetas de formato antiguas han sido eliminadas del estándar HTML. Puede que aún se rendericen en los navegadores, pero nunca debes usarlas — reemplaza la presentación con CSS y el significado con etiquetas semánticas:
| Etiqueta obsoleta | Qué hacía | Usa en su lugar |
|---|---|---|
<font> | Establecía color, tamaño y fuente tipográfica | CSS color, font-size, font-family |
<center> | Centraba el contenido | CSS text-align: center o margin: auto |
<tt> | Texto de teletipo / monoespaciado | <code>, <kbd>, <samp>, o CSS font-family: monospace |
<strike> | Texto tachado | <del> / <s>, o CSS text-decoration: line-through |
<big> | Texto más grande | CSS font-size |
Etiquetas estructurales: <p>, <br> y <hr>
Las tres etiquetas siguientes no son etiquetas de formato de texto — estructuran el flujo del contenido en lugar de aplicar estilo a palabras en línea — pero están estrechamente relacionadas y vale la pena tratarlas aquí.
La etiqueta <p> define el párrafo. Los navegadores añaden automáticamente un margen de 1em antes y después de cada párrafo.
Ejemplo de la etiqueta HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>La etiqueta <br> inserta un único salto de línea. A diferencia de la etiqueta <p>, no se añade una sangría vacía antes de la línea.
Ejemplo de la etiqueta HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>En HTML5, la etiqueta <hr> define un cambio temático entre elementos de nivel de párrafo en una página HTML. En versiones anteriores de HTML se utilizaba para trazar una línea horizontal en la página que separaba visualmente el contenido. En HTML5 el elemento tiene significado semántico.
Ejemplo de la etiqueta HTML <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>