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

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.

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:

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:

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:

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

[popup_anything id=»4350″]