Etiquetas para Aplicar Formato en HTML

En la introducción ya habíamos vistos los elementos principales de un documento HTML, así como la estructura básica del documento.

En este artículo se verán algunas etiquetas que se utilizan para dar formato a los contenidos que ellas encierran. Estas etiquetas siguen la misma estructura que los elementos HTML que ya han sido vistos, una etiqueta de apertura, el contenido y una etiqueta de cierre.

Formato Etiqueta de apertura Etiqueta de Cierre
Texto resaltado (Bold) <b> </b>
Enfatizado o

itálica

<em>

<i>

</em>

</i>

Importante (strong) <strong> </strong>
Texto pequeño <small> </small>
Texto grande <big> </big>
Texto marcado <mark> </mark>
Texto eliminado <del> </del>
Texto insertado <ins> </ins>
Subíndices <sub> </sub>
Supraíndices <sup> </sup>
Subrayado <u> </u>
Texto mono espaciado <tt> </tt>

A continuación se muestra un documento HTML creado en notapad, donde se aplican varias de las etiquetas utilizadas para aplicar formato a los contenidos.

Aplicar Formato-1
Documento HTML creado con el editor de texto para mostrar la aplicación de etiquetas de formato.

El resultado mostrado por el navegador se presenta en la siguiente figura, es de notar que la etiqueta <b></b> produce el mismo efecto que <strong></strong>, y que la etiqueta <mark></mark> produce el efecto de utilizar un resaltador de color amarillo.

Aplicar Formato-2
Salida mostrada por el navegador del documento HTML 

Estas etiquetas pueden ser utilizadas anidadas, para lograr efectos de formatos combinados. Por ejemplo, enfatizado y resaltado, lo importante de recordar es que la última etiqueta en abrir debe ser la primera en cerrar.

<p>Este es un texto <b><em>resaltado y enfatizado</em></b></p>

Funciona en forma similar a los paréntesis, las etiquetas interiores deben cerrarse en orden desde el interior al exterior. <em> es la etiqueta más interna y debe cerrar primero, luego cierra la etiqueta <b> y finalmente <p>.

 

Referencias Bibliográficas

Alvarez, R. (2012). Manual de HTML de Desarrollo Web.

W3C. (2015). W3C School. Obtenido de http://www.w3schools.com/html/html_intro.asp

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s