Etiquetas HTML para dar formato al texto
En HTML, se utilizan varios elementos para dar formato al texto. Las etiquetas de formato se dividen en dos grupos: etiquetas físicas, que se usan para estilizar el texto (apariencia visual del texto), y etiquetas lógicas o semánticas, que añaden valor semántico a las partes del texto (por ejemplo, informan a los motores de búsqueda para qué palabras clave debe posicionarse una página web).
Profundicemos y hablemos en detalle de las etiquetas de formato.
Las etiquetas <h1>-<h6>
Las etiquetas <h1>-<h6> se usan para definir encabezados HTML. Hay 6 niveles de encabezados en HTML; <h1> define los encabezados más importantes y <h6> los menos importantes.
Ejemplo de las etiquetas HTML <h1>-<h6>:
Ejemplo de las etiquetas HTML <h1>|Etiquetas para dar formato al texto|W3Docs
<!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>
La etiqueta <b> es una etiqueta física que representa texto en negrita, mientras que la etiqueta <strong>, al ser una etiqueta lógica, se usa para enfatizar la importancia del texto.
Ejemplo de las etiquetas HTML <b> y <strong>:
Ejemplo de la etiqueta HTML <b> y <strong>|Etiquetas para dar formato al texto|W3Docs
<!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>
Las etiquetas <i> y <em> definen texto en cursiva. La etiqueta <i> solo se encarga de la apariencia visual del texto incluido, sin ninguna importancia adicional. La etiqueta <em> define texto enfatizado, con importancia semántica añadida.
Ejemplo de las etiquetas HTML <i> y <em>:
Ejemplo de las etiquetas <i> y <em>|Etiquetas para dar formato al texto|W3Docs
<!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 usa para definir texto preformateado. Los navegadores muestran el texto incluido con espacios en blanco y saltos de línea.
Ejemplo de la etiqueta HTML <pre>:
Ejemplo de la etiqueta HTML <pre>|Etiquetas para dar formato al texto|W3Docs
<!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 usa para presentar una parte del texto en un documento como marcada o resaltada con fines de referencia.
Ejemplo de la etiqueta HTML <mark>:
Ejemplo de la etiqueta HTML <mark>|Etiquetas para dar formato al texto|W3Docs
<!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 la fuente del texto en un nivel respecto al tamaño base de la fuente del documento (de mediano a pequeño, o de extra grande a grande). La etiqueta suele contener elementos de importancia secundaria, como avisos de copyright, comentarios laterales o avisos legales.
Ejemplo de la etiqueta HTML <small>:
Ejemplo de la etiqueta HTML <small>|Etiquetas para dar formato al texto|W3Docs
<!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 se ha eliminado del documento. Los navegadores muestran este texto como tachado.
Ejemplo de la etiqueta HTML <del>:
Ejemplo de la etiqueta HTML <del>|Etiquetas para dar formato al texto|W3Docs
<!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> define texto que ya no es correcto o relevante.
Ejemplo de la etiqueta HTML <s>:
Ejemplo de la etiqueta HTML <s>|Etiquetas para dar formato al texto|W3Docs
<!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 como tachado. Sin embargo, a pesar de su similitud visual, estas etiquetas no pueden sustituirse entre sí.
Las etiquetas <ins> y <u>
La etiqueta <ins> define el texto que se ha insertado (añadido) al documento. El contenido de la etiqueta se muestra subrayado.
Ejemplo de la etiqueta HTML <ins>:
Ejemplo de la etiqueta HTML <ins>|Etiquetas para dar formato al texto|W3Docs
<!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
La etiqueta <u> especifica texto que es estilísticamente diferente del texto normal, es decir, palabras o fragmentos de texto que deben presentarse de forma distinta. Esto puede incluir palabras mal escritas o nombres propios en chino.
Ejemplo de la etiqueta HTML <u>:
Ejemplo de la etiqueta HTML <u>|Etiquetas para dar formato al texto|W3Docs
<!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 otros símbolos de la línea y tiene una fuente más pequeña. La etiqueta <sup> define superíndice, que se coloca ligeramente por encima de la línea normal del texto 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>:
Ejemplo de las etiquetas HTML <sub> y <sup>|Etiquetas para dar formato al texto|W3Docs
<!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> se usa para definir el término que se menciona por primera vez. El contenido de la etiqueta se muestra en cursiva.
Ejemplo de la etiqueta HTML <dfn>:
Ejemplo de la etiqueta HTML <dfn>|Etiquetas para dar formato al texto|W3Docs
<!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>Las etiquetas <p>, <br> y <hr>
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>:
Ejemplo de la etiqueta HTML <p>|Etiquetas para dar formato al texto|W3Docs
<!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 solo 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>:
Ejemplo de la etiqueta HTML <br>|Etiquetas para dar formato al texto|W3Docs
<!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 usaba para dibujar una línea horizontal en la página, separando visualmente el contenido. En HTML5 el elemento tiene un significado semántico.
Ejemplo de la etiqueta HTML <hr>:
Ejemplo de la etiqueta HTML <hr>|Etiquetas para dar formato al texto|W3Docs
<!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>Práctica
Which of the following HTML tags are used for text formatting?