Etiquetas de Texto HTML

En muchos sitios webs la importancia reside en el contenido, el cual es proporcionado por los textos, más concretamente en las etiquetas de texto HTML.

Estas ayudan a estructurar el contenido para que luego, al momento de hacer SEO, tu página pueda estar bien posicionada.

Etiquetas de Texto HTML de Encabezado

Una de las etiquetas importantes usadas en HTML son las de encabezado, ya que esta nos indicaran los títulos y subtítulos.

Estas son usadas con las etiquetas:

<h1>: El Encabezado Principal

La etiqueta <h1> se utiliza para el encabezado principal de una página, el título principal o más importante.

Ahora me gustaría que siguiéramos los siguientes pasos desde el editor de código, que si no lo recuerdas está en el artículo de como instalar visual studio code.

Abre Visual Studio Code y abre el archivo que creamos en la guía básica de HTML. En ese ejemplo ya estamos usando la etiqueta <h1></h1>. Si no lo tenés no te preocupes, crea un archivo etiquetas-encabezado.html y pega el siguiente código.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mi Primera Web</title>
</head>
<body>
  <h1>Mi Primera Web</h1>
</body>
</html>

Busca un artículo o diario online. Identifica el título principal del artículo y reemplaza el contenido de la etiqueta <h1></h1>.

En mi caso voy a usar el ejemplo de esta página de noticias de criptomonedas.

Ejemplo a seguir de etiquetas de texto html.

Vos podés usar la noticia o artículo que te interese.

Como vemos el título de esta noticia es: La desdolarización ya abarca el 40% del mundo y la Fed lo admite.

Así que ahora voy a reemplazar <h1>Mi Primera Web</h1> por <h1>La desdolarización ya abarca el 40% del mundo y la Fed lo admite.</h1>

Guardamos el archivo y abrilo en tu navegador para ver el resultado.

<h2>: Subtítulos

La etiqueta <h2> se utiliza para subtítulos, menos importantes que el, <h1> pero aún relevantes.

Ahora, identificando en el ejemplo de la noticia cripto, el subtítulo sería: En un proceso que crece a nivel global, las economías de países que concentran la mayoría de la población buscan alternativas para alejarse del dólar.

En este caso vas a agregarlo usando la etiqueta <h2></h2>, el ejemplo completo seria.

<h2>En un proceso que crece a nivel global, las economías de países que concentran la mayoría de la población buscan alternativas para alejarse del dólar.</h2>

Nuevamente, guardamos y actualizamos los cambios en el navegador.

Otras etiquetas h

Solo para mencionar, hay más etiquetas h,

<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Estas etiquetas siguen cumpliendo el mismo propósito de ser subtítulos, pero no son tan usadas en artículos web, posiblemente h3 sí pero el resto no tanto.

Podrían ser usadas en una representación de un libro, por ejemplo, h1 sería usado en el título del libro, el h2 en el título de los capítulos, el h3 en el título de las secciones de ese capítulo, y así sucesivamente.

Etiquetas de Párrafo y Texto

<p>: Párrafo

La etiqueta <p> se utiliza para definir párrafos de texto.

Continuando con la noticia, voy a copiar una parte del texto y pegarla en medio de la etiqueta <p></p>.

Guardamos cambios y quedaría algo así.

Si notamos, quedo como si sería un único párrafo cuando en la noticia son 2 párrafos diferentes. Es justamente porque coloque los dos párrafos dentro de la etiqueta <p></p> para que quede diferenciado que son dos párrafos diferentes, tengo que usar más etiquetas <p></p>, quedando así el ejemplo.

<span>: Texto en Línea

La etiqueta <span> se utiliza para aplicar estilo a partes específicas del texto sin crear un nuevo bloque.

Por el momento no la vamos a usar, hasta que lleguemos a la parte de usar estilos. Pero se vería algo así.

<p>Este es un <span style="color:red;">texto destacado</span> en el párrafo.</p>

Otras Etiquetas de Texto HTML

Además de las etiquetas mencionadas, hay otras etiquetas de texto importantes en HTML:

<strong>: Negrita, esta se utiliza para resaltar texto, sin cambiar tanto el estilo como la etiqueta span. Si notas en nuestro ejemplo de noticia cripto, en el segundo párrafo tenemos este texto en negrita, así los procesos que se adelantan en países como China, India, Rusia y Turquía, para eso vamos a envolver esa parte del texto dentro de la etiqueta <p> como en el ejemplo del span y quedaría algo así.

<p>
      La tendencia es destacada por el inversionista y empresario estadounidense
      Balaji Srinivasan, quien puso el foco sobre el hecho en su cuenta de X
      citando
      <strong>
        los procesos que se adelantan en países como China, India, Rusia y
        Turquía
      </strong>, y que han sido desestimados por la Reserva Federal (Fed).
    </p>

<em>: Cursiva, similar a la anterior, se usa para dar ese efecto de cursiva en el texto. Ahora trata de usarlo por tu cuenta, en una porción del párrafo.

<br>: Salto de línea. Si notas el segundo párrafo tiene cierto espacio respecto al primer párrafo, que es más corto.
Con esta etiqueta podemos hacer un salto de línea en el mismo párrafo sin tener tanto espacio. sí lo coloco antes de usar la etiqueta <strong> se verá algo así.

<blockquote>: Cita en bloque. Este lo usaremos en otro tutorial, ya que de manera visual no varía mucho.

Ejemplo completo de etiquetas de texto HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mi Primera Web</title>
  </head>
  <body>
    <h1>La desdolarización ya abarca el 40% del mundo y la Fed lo admite.</h1>
    <h2>
      En un proceso que crece a nivel global, las economías de países que
      concentran la mayoría de la población buscan alternativas para alejarse
      del dólar.
    </h2>
    <p>
      Con los países más poblados del mundo sumándose paulatinamente, el proceso
      de desdolarización ya abarca al 40% del globo.
    </p>
    <p>
      La tendencia es destacada por el inversionista y empresario estadounidense
      Balaji Srinivasan, quien puso el foco sobre el hecho en su cuenta de X
      citando <br />
      <strong>
        los procesos que se adelantan en países como China, India, Rusia y
        Turquía
      </strong>
      , y que han sido desestimados por la Reserva Federal (Fed).
    </p>
  </body>
</html>

Resumen de etiquetas de texto HTML

En este tutorial, aprendiste sobre las etiquetas de texto en HTML y cómo aplicarlas usando Visual Studio Code. Identificaste y utilizaste etiquetas de encabezado (<h1>, <h2>), de párrafo (<p>).

Contenido de Etiquetas HTML

¿Qué son las Etiquetas en HTML?
Etiquetas de Texto HTML
Etiquetas Contenedores HTML
Etiquetas de Multimedia HTML

Continúa practicando y experimentando con estas etiquetas para mejorar tus habilidades de desarrollo web.