Etiquetas para texto HTML y formatos HTML

Ahora aprenderemos a manejar las etiquetas de texto HTML, así como las etiquetas de formato, aquellas que se emplean exclusivamente para crear elementos de texto y controlar su formato hasta cierto punto, HTML nos permite indicar cómo se muestra un texto en la página web mediante las etiquetas correspondientes.

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:  Cómo poner hipervínculos o enlaces en 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:  Formularios en HTML - Cómo crear y personalizar
lecciones HTML
5 5 votos
Calificación
guest
7 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Celina
Celina
2 año atrás

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

Alex
Alex
Reply to  Celina
2 año atrás

Hola Celina 🙂
Gracias! excelente observación, lo apuntaré para agregar en cuanto pueda…

Carlo
Carlo
Reply to  Celina
2 meses atrás

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.
barbara
barbara
2 año atrás

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?

Alex
Alex
Reply to  barbara
2 año atrás

Si, el resultado será igual…

Javier
Javier
Reply to  Alex
1 año atrás

Pues no me funciona de una forma y de otra si.
Subtítulo en negrita y marcado OK

Subtítulo en negrita y marcado No funciona

Lucila de Santiago
Lucila de Santiago
3 meses atrás

Waoh muchísimas gracias, de verdad que tienes una muy buena manera de explicar