Etiquetas relacionadas con el texto

Este artículo explica las etiquetas relacionadas con el texto.

La explicación se divide en etiquetas semánticas y no semánticas.

YouTube Video

Creando CSS para la vista previa

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Etiquetas básicas relacionadas con el texto

Etiqueta <div>

1<div>This is a division of content.</div>

• La etiqueta <div> es un elemento de nivel bloque que se utiliza para crear divisiones dentro del HTML.

• La etiqueta <div> es una etiqueta no semántica.

  Al centrarse en HTML semántico, se pueden usar etiquetas significativas (como <section>, <article>). Esto ayuda a que los motores de búsqueda y los lectores de pantalla comprendan mejor el contenido de la página.

• Al combinarlo con CSS y JavaScript, puedes controlar la apariencia y el comportamiento de la página.

  La etiqueta <div> se utiliza para agrupar contenido en una página como un elemento de nivel de bloque. Se utiliza principalmente en combinación con CSS y JavaScript para ajustar el diseño de la página, el estilo y manipular elementos.

Etiqueta <p>

1<p>This is a paragraph of text.</p>

• La etiqueta <p> es un elemento que se utiliza para definir un párrafo en HTML. La <p> representa un párrafo y se utiliza principalmente para agrupar y mostrar texto. Ayuda a que el contenido sea más fácil de leer al separar visualmente las secciones de texto.
• No puedes colocar otros elementos de nivel de bloque como otra etiqueta <p> o una etiqueta <div> dentro de una etiqueta <p>. Esto está prohibido por la especificación HTML. Si lo haces, el navegador cerrará automáticamente la etiqueta, y no se mostrará correctamente.

Etiqueta <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• La etiqueta <a> se utiliza para crear enlaces.

  La etiqueta <a> se utiliza para crear enlaces a otras páginas, sitios externos o archivos. El atributo href se utiliza para especificar el destino del enlace.

• Puede usarse para enlaces de texto o de imagen, y usar target="_blank" abrirá el enlace en una nueva pestaña.

• El atributo target se utiliza para especificar cómo se mostrará el destino enlazado.

  • _self (por defecto): Abre el enlace en la ventana o pestaña actual.
  • _blank: Abre el enlace en una nueva ventana o pestaña.
  • _parent: Abre el enlace en el marco padre.
  • _top: Abre el enlace en toda la ventana, ignorando cualquier marco.

• El atributo title se utiliza para mostrar una descripción emergente en un enlace. Cuando un usuario pasa el ratón sobre el enlace, se muestra el título especificado.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• La etiqueta <a> también se utiliza para saltar a ubicaciones específicas dentro de la misma página. Para lograr esto, estableces un atributo id en el elemento objetivo y utilizas este id en el atributo href del enlace.

Etiqueta <span>

1Here is some <span style="color: red;">highlighted text

• La etiqueta <span> es un elemento en línea.

  La etiqueta <span> es un elemento en línea, por lo que no rompe la línea cuando se utiliza entre texto, enlaces, imágenes u otros elementos en línea. Se integra naturalmente en el flujo de la página.

• Puedes aplicar estilos específicos de manera parcial.

  Cuando deseas aplicar un estilo solo a una parte del documento, puedes usar la etiqueta <span> para asignar una clase o ID de CSS y aplicar estilos a un rango específico.

• La etiqueta <span> es un elemento no semántico.

  Dado que la etiqueta <span> no tiene un significado o función estructural específica, se utiliza puramente con fines de estilo o scripting. Cuando se necesita énfasis semántico, es más apropiado usar etiquetas semánticas como <strong> o <em>, que se presentarán más adelante.

Etiqueta <br>

1Here is some text with a <br> line break.

• La etiqueta <br> es un elemento en línea.

  Dado que la etiqueta <br> es un elemento en línea, no ocupa todo el bloque y crea un salto de línea en el texto donde se coloca. Mientras que la etiqueta <p> añade margen arriba y abajo para separar párrafos, la etiqueta <br> crea un salto de línea sin añadir ningún margen.

• Es una etiqueta autocontenida, por lo que no se necesita una etiqueta de cierre (</br>).

• Es mejor evitar su uso excesivo y usar etiquetas <p> o CSS para los saltos de párrafo o ajustes de diseño.

  Al organizar el texto en párrafos, es más apropiado usar la etiqueta <p>. También se recomienda usar CSS para ajustes de diseño. Por ejemplo, usar la propiedad white-space en CSS puede mostrar saltos de línea y espacios en el texto tal como aparecen.

Etiqueta <hr>

1This is some text.<hr>This is another section of text.

• La etiqueta <hr> es un elemento a nivel de bloque.

  La etiqueta <hr> se utiliza para insertar una línea horizontal para separar visualmente secciones de contenido. También se puede usar para significar una ruptura temática, dándole significado según el contexto.

• Es una etiqueta auto-cerrable, por lo que no es necesario un cierre (</hr>).

• Puedes personalizar su color, longitud y grosor usando CSS.

Etiquetas semánticas relacionadas con el texto

Desde la etiqueta <h1> hasta la etiqueta <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Las etiquetas <h1> a <h6> son etiquetas de encabezado utilizadas en HTML.

  La etiqueta <h1> representa el encabezado más importante y típicamente se usa como el título principal de toda la página. Es común usar solo una etiqueta <h1> por documento HTML.

  La etiqueta <h2> es el siguiente encabezado más importante después de <h1> y se utiliza para los títulos de secciones o capítulos dentro de la página.

  La etiqueta <h3> representa subtítulos o secciones más pequeñas bajo <h2>.

  Las etiquetas <h4>, <h5>, y <h6> representan encabezados de nivel inferior, usadas para elementos más detallados o títulos de secciones.

• Las etiquetas de encabezado indican la importancia del texto y ayudan a crear la estructura lógica de una página. Los motores de búsqueda también utilizan las etiquetas de encabezado para comprender el contenido de la página.

Etiqueta <strong>.

1<strong>Important text</strong> to emphasize significance.

• La etiqueta <strong> es una etiqueta HTML usada para indicar la importancia o el énfasis del texto y normalmente se muestra en negrita.

• La etiqueta <strong> es una etiqueta semántica, y su propósito principal es agregar significado.

  Puede indicar que el texto es contextualmente importante. Por ejemplo, puede mostrar la importancia del texto para los motores de búsqueda, haciéndola útil para el SEO. También transmite la importancia del texto a los usuarios con lectores de pantalla. Por otro lado, la etiqueta <b>, que se introducirá más adelante, es simplemente una etiqueta para poner el texto en negrita y no proporciona énfasis semántico.

<em> etiqueta

1<em>Emphasized text</em> for italics and emphasis.

• La etiqueta <em> es una etiqueta HTML usada para indicar importancia o énfasis en el texto y usualmente se muestra en cursiva.

• La etiqueta <em> es una etiqueta semántica, y su principal propósito es proporcionar significado.

  Al igual que la etiqueta <strong>, puede indicar que el texto es contextualmente importante. La etiqueta <strong> suele mostrarse en negrita, mientras que la etiqueta <em> se muestra típicamente en cursiva. Ambas son reconocidas por los lectores de pantalla y los motores de búsqueda por su énfasis semántico, pero <strong> indica una importancia más fuerte, mientras que <em> transmite un énfasis emocional. Además, la etiqueta <i>, que se introducirá más adelante, simplemente pone el texto en cursiva y no proporciona énfasis semántico.

<mark> etiqueta

1<mark>Highlighted text</mark> for attention.

• La etiqueta <mark> se usa para indicar que un texto específico es contextualmente importante. Es útil para resaltar resultados de búsqueda o puntos clave.
• Por defecto, el texto encerrado en la etiqueta <mark> se muestra con un fondo amarillo, enfatizando visualmente su importancia.

<del> etiqueta

1<del>Deleted text</del> shows removed content.

• La etiqueta <del> se usa para indicar que un texto ha sido eliminado o modificado. Esta etiqueta es útil para mostrar el historial de cambios o revisiones de texto.

• El texto encerrado en la etiqueta <del> generalmente se muestra con una línea tachada. Esto indica visualmente el contenido eliminado.

  El texto encerrado en la etiqueta <del> también es reconocido como eliminado por los lectores de pantalla. Esto permite que el contenido que no es visualmente aparente todavía se entienda.

Etiqueta <ins>

1<ins>Inserted text</ins> shows added content.

• La etiqueta <ins> se usa para indicar texto recién agregado o modificado en un documento. Esta etiqueta es útil para mostrar el historial de adiciones o revisiones de texto.

• En los navegadores, el texto encerrado en la etiqueta <ins> generalmente se muestra subrayado. Esto indica visualmente el contenido agregado.

  El texto encerrado en la etiqueta <ins> también es reconocido como recién agregado por los lectores de pantalla. Esto permite que el contenido que no es visualmente aparente todavía se entienda.

Etiqueta <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• La etiqueta <abbr> es un elemento en línea usado para indicar abreviaturas o acrónimos. Usar esta etiqueta proporciona el significado completo de las abreviaturas y contribuye a mejorar el SEO y la accesibilidad. Especialmente ayuda a los lectores que no están familiarizados con la abreviatura y a los usuarios de lectores de pantalla a entender mejor su contenido.

Etiquetas relacionadas con la decoración del texto

Etiqueta <b>

1<b>Bold text</b> without semantic emphasis.

• La etiqueta <b> es un elemento en línea usado para poner texto en negrita. Al igual que las otras etiquetas que presentaremos, se usa para el énfasis visual pero no para el énfasis semántico.

Etiqueta <i>

1<i>Italic text</i> for style.

• La etiqueta <i> es un elemento en línea usado para poner texto en cursiva.

Etiqueta <u>

1<u>Underlined text</u> for decoration.

• La etiqueta <u> es un elemento en línea usado para subrayar texto.

Etiqueta <small>

1<small>This is small text.</small>

• La etiqueta <small> es un elemento en línea utilizado para mostrar el texto en un tamaño más pequeño. Comúnmente se usa para representar información suplementaria o anotaciones que son secundarias al contenido principal.

Etiqueta <s>

1<s>Strikethrough text</s>

• La etiqueta <s> es un elemento en línea que se utiliza para dibujar una línea de tachado en el texto.

Etiqueta <sub>

1H<sub>2</sub>O

• La etiqueta <sub> es un elemento en línea utilizado para mostrar texto en subíndice.

Etiqueta <sup>

1E = mc<sup>2</sup>

• La etiqueta <sup> es un elemento en línea utilizado para mostrar texto en superíndice.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video