Etiquetas para texto HTML y formatos HTML

Anterior
Avanzar

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:  Atributos en HTML - qué son, para qué sirven y cuáles son

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:  Cómo hacer tablas en HTML
lecciones HTML
Anterior
Avanzar
0 0 votar
Calificación
guest
5 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Celina
Celina
3 meses 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

barbara
barbara
2 meses 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?

Javier
Javier
Reply to  Alex
1 mes 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

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