Etiquetas para texto HTML y formatos HTML

Ahora aprenderemos a manejar las etiquetas de texto en HTML, así como las etiquetas de formato, las cuales se utilizan exclusivamente para crear y dar formato a elementos de texto. HTML nos permite definir cómo se muestra el texto en una página web mediante el uso de estas etiquetas, conocidas en inglés como «tags».

Etiquetas de párrafo y encabezados HTML

Las etiquetas que siempre indican texto y son:

  • <p> Indica que el elemento es un párrafo.
  • <h1> Señala que se trata de un titulo principal.
  • <h2>, <h3>, <h4>, <h5>, <h6>: indica niveles de encabezado, subtítulos.

Ejemplo de etiquetas de texto HTML

<h1> Este es un título de primer nivel</h1>
<h2>Título de segundo nivel</h2>
<h3>Título de tercer nivel</h3>
<p>Elemento de parrafo en html</p>

Resultado

etiquetas h1 h2 h3 p en HTML

Lista de formatos y etiquetas de texto HTML

  • Etiqueta HTML <b>: Para texto en negrita.
  • Etiqueta HTML <em>: Para enfatizar texto.
  • Etiqueta HTML <i>: Para texto en cursiva.
  • Etiqueta HTML <u>: Para texto subrayado.
  • Etiqueta HTML <strong>: Para textos importantes.
  • Etiqueta HTML <big>: Texto grande.
  • Etiqueta HTML <small>: Para texto pequeño.
  • Etiqueta HTML <sub>: Para texto subíndice.
  • Etiqueta HTML <sup>: Para texto superíndice.
  • Etiqueta HTML <ins>: Para texto insertado.
  • Etiqueta HTML <del>: Para texto borrado.
  • Etiqueta HTML <mark>: Para texto marcado.

Diferencia entre <strong>/<b> y <em>/<i>

Las etiquetas <strong> y <b> se muestran visualmente iguales en los navegadores, lo mismo ocurre con las etiquetas <em> y <i> pero hay diferencias.

  • <b> define texto en negrita, sin ninguna importancia adicional.
  • <strong> define texto fuerte, con importancia semántica aumentada.
  • <i> define el texto en cursiva, sin ninguna importancia adicional.
  • <em> define el texto enfatizado, con una importancia semántica aumentada.
Te recomendamos leer:  Estructura básica de un documento HTML

Ejemplos de formatos de texto HTML

<strong><p> Párrafo importante con etiqueta html strong</p></strong>
<b><p>Párrafo con estilo negrita con etiqueta b</p></b>
<em><p>Texto importante en cursiva con etiqueta em</p></em>
<i><p>Texto con estilo cursiva con etiqueta i</p></i>

Resultado:

Formato negrita y cursiva en HTML

Obviamente estas etiquetas y formatos las podemos aplicar a otras etiquetas de texto, como párrafos, títulos, enlaces, etc.

Ejemplos de formatos y etiquetas de texto en html

Empecemos con un párrafo sin ningún formato adicional, posteriormente aplicaremos el formato de texto grande al siguiente párrafo, visualizar las diferencias entre el primer párrafo y el segundo, nos ayuda a entender mejor cómo funcionan los formatos de texto en html, veamos:

<p> Este es un simple párrafo sin formato </p>

<big><p> Este es otro párrafo Y tendrá formato de texto grande</p></big>

Resultado:

Ejemplos de etiquetas para texto
Ejemplo de las etiquetas y formatos de texto

Es posible seguir agregando más formatos a nuestras paginas en html, para ello simplemente debemos abrir y cerrar las respectivas etiquetas con el contenido dentro de ellas.

Agregando más formatos html

A continuación aplicaremos los formatos de texto grande y cursiva a nuestro primer párrafo y además aplicaremos un marcado para el segundo párrafo.

<i><big><p> Este es el primer párrafo y tendrá formato de texto grande y será cursiva</p></big></i>

<p><mark><i><big> Este es el segundo párrafo y tendrá formato de texto grande, será cursiva y también será marcado</big></i></mark></p>

Resultado:

Formatos html para texto ejemplos
Los textos pueden ser controlados por etiquetas html

Y asi, podemos emplear etiquetas dentro de otras si son compatibles.

Ahora te toca practicar, aplicando estas etiquetas en tu contenido.

Tarea.
Crea un artículo sobre el tema que dominas con las siguientes indicaciones:

  • El titulo visible sea texto grande, cursivo y subrayado.
  • Los subtítulos sean texto en negrita, además marcados.
  • Crea unos párrafos, dentro de los párrafos crea textos marcados para resaltar palabras.
  • Utiliza todas las etiquetas aprendidas a distintos textos para ver la diferencia
Te recomendamos leer:  Etiquetas HTML tipos y ejemplos

[popup_anything id=»4350″]

5/5 - (5 votos)

10 comentarios en «Etiquetas para texto HTML y formatos HTML»

  1. Me encanta la forma en la que se explica todo, lo único que yo agregaría serian ciertas «anotaciones» como por ejemplo que lo importante en HTML o HTML5 es lograr una buena estructura correctamente aceptable, por ejemplo que no podemos repetir como locos el tag ya que Google por ejemplo penaliza eso y desvalorizaría nuestra pagina.
    Todo lo demás esta genial

    Responder
    • Hola celina, muchas gracias por compartir tu punto de vista. Me interesa saber a que te refieres con el «tag». Estoy aprendiendo este lenguaje y me gustaría ir mejorando en lo posible.

      Gracias.
      
      Responder
      • Hola Carlo, Yo tambien soy nuevo en esto y me cuesta mucho seguirles el camino y por lo que veo es que este lenguage tiene su origen en Ingles y por tal razon los nombres de las etiquetas estan en Ingles pero como muchas palabras en ingles son similares en español ok. enotnces yo sugiero que hagamos una lista de las palabras que encontremos en ingles y buscar su traduccion para entender mejor este lenguage ej.
        Tag = etiqueta, Imagen = imagen, Atribut= atributo, Paragraph = parrafo, head = cabeza, Header = encabezado etc.

        Responder
  2. Consulta, como es la forma correcta de poner las etiquetas cuando vamos a utilizar muchas?
    por ejemplo, si quiero un parrafo, y este en negrita y cursiva, da igual el orden de las etiquetas?

    Responder

Deja un comentario

Desarrolladores web