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:  Formularios en HTML - Cómo crear y personalizar

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:  Qué es HTML para qué sirve y cómo funciona
lecciones HTML
5 3 votos
Calificación
guest
5 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Celina
Celina
1 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
1 año atrás

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

barbara
barbara
1 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
1 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

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5