A

Significa "ancla", es la viñeta utilizada para definir los hipervínculos, el texto que se desee mostrar como enlace deberá estar ubicado dentro de esta viñeta.
Esta viñeta no solo redirige al usuario a otra página, sino que también puede llevarlo a una sección en específico de esta, esto se hace añadiendo un "#" seguido del id del elemento que se desee ubicar (todo esto escrito sin espacios), ya que el "#" hace referencia al id de un elemento. De la misma forma también se puede redirigir a una sección dentro del mismo documento, esto se hace únicamente escribiendo el "#" seguido del id del elemento seleccionado.

A continuación se muestran dos ejemplos: el primero es de una redirección a un elemento del mismo documento, y el segundo a una redirección a un área en particular de un documento externo.

Atributos

• href: Es el atributo designado para indicar la dirección http a la que el enlace dirigirá al usuario, puede ser una ubicación interna o externa de la página.
• title: Esta etiqueta define un texto explicativo que hará aparición si el usuario mantiene el ratón sobre el enlace, por lo tanto no será visible para usuarios que naveguen usando el teclado o dispositivos táctiles.
• target: Este atributo define la ventana en la que se abrirá el nuevo enlace, si se usa el valor "_blank" se abrirá la nueva página en una pestaña diferente; en cambio, si se omite este atributo, el enlace se abrirá por defecto en la pestaña activa.

Nota: Cualquier elemento puede ir dentro de la viñeta "a", por lo tanto casi cualquier cosa puede ser convertida en un enlace, desde contenedores e imágenes, etc.

Nota: Es recomendable que los enlaces brinden palabras claves o algún tipo de información sobre la información a la que redirigen, ya que tanto los usuarios como los motores de lectura escanean la página y uno de los elementos resaltados en los que se guían son los enlaces.

Nota: Otros consejos al crear enlaces son: que el texto que los componga sea breve, los textos excesivamente largos no son gratos; también es recomendable evitar que el texto de estos enlaces sea repetitivo, ejemplo de mala práctica: "Haz clic aquí".

Nota: Es recomendable usar las direcciones relativas de archivos siempre que sea posible, ya que pese a que deja de funcionar si el archivo en el que se encuentra el llamado cambia de lugar, estas son más eficientes en términos de procesamiento y más legibles en el código, por lo que darán un código más legible.

Descargar un archivo en un enlace

Para indicar que se trata de la descarga de un elemento se utiliza el atributo "download", el cual no solo indicará que el navegador debe descargar el elemento seleccionado, sino que también define el nombre que se vinculará al archivo al hacerlo (esto lo hace en base al texto que se indique en el atributo).

Enviar un correo mediante un enlace

Esta es otra función que ofrece la etiqueta "a"; para hacer uso de esta se utiliza el valor "mailto" en el atributo "href" seguido del correo electrónico al que se desee que el usuario contacte; esto abrirá una ventana de correo electrónico con el correo en cuestión seleccionado como destinatario. A su vez, otra opción es poner el atributo "href" únicamente con valor de "mailto"; esto abrirá la ventana de correo pero no proveerá un destinatario en específico.

El siguiente es un ejemplo de cómo se usa el atributo "mailto":

Abbr

Se trata de una etiqueta para definir las abreviaturas; su efecto es que la abreviatura o el acrónimo se mostrará con un subrayado punteado, y al posicionar el ratón sobre este se mostrará un texto emergente con la expresión completa del término.

Para definir la expresión completa se utiliza el atributo "title", seguido de la expresión.

Ejemplo de visualización

HTML

Ejemplo de código:

Address

Aporta la información de contacto de un article cercano o del elemento padre como el body.

Se trata de una etiqueta semántica, la cual simplemente envuelve su contenido.

Nota: Se pueden incorporar hipervínculos dentro de este.

Algunos ejemplos

B

Su función únicamente es la de mostrar el texto que se encuentre dentro de este en negritas, no añade ningún valor semántico a este.

Br

Esta la función de esta etiqueta es muy simple: indica un salto de línea. Sin importar realmente en qué lugar o contenedor se encuentre, siempre tendrá el mismo efecto, el cual es equivalente a presionar Enter en un editor de texto.

Si se utiliza en el interior de una etiqueta "p" (párrafo), esta viñeta aplicará el mismo efecto que tendría un "punto y aparte"; por lo tanto, el texto saltará a la siguiente línea pero no se distanciará de la línea anterior ni tomará sangría, por lo tanto se puede usar para representar líneas cortas como las de un verso.

Details

Actúa como un widget de revelación, ya que tiene la funcionalidad de mostrar un texto oculto que se despliega cuando se cliquea sobre este. Es necesario tener presente que se trata de una etiqueta bastante reciente, por lo tanto no está habilitada en versiones antiguas de los navegadores; a su vez, puede ser ubicada en cualquier elemento que acepte contenido dinámico.

Atributos

• Details incluye los atributos globales.
• open: Este atributo booleano indica si los detalles serán mostrados al usuario cuando la página se cargue; por defecto el valor es false y por lo tanto los detalles estarán ocultos.

Ejemplo

Efecto

Algunos detalles

Más información sobre los detalles.

Em

Se usa para dar un poco de énfasis o relevancia a algún texto; el texto dentro de esta viñeta se muestra en cursiva.

Hr

Esta es otra etiqueta con una función simple: de aplicarse crea una línea horizontal en el contenedor en que se encuentre, se utiliza para crear divisiones visuales.

Ejemplo de visualización

Primer elemento

---

Segundo elemento

I

Consiste en una etiqueta para mostrar el texto en cursiva o itálica, no brinda ningún valor semántico.

Superíndice y Subíndice

En ocasiones puede ser necesario incorporar estos elementos en algún texto, para ello existen estas dos etiquetas:

• sup: Esta etiqueta se usa para definir el superíndice, lo hace encasillándolo a este en su interior.

• sub: Esta etiqueta se usa para definir el subíndice, lo hace encasillándolo a este en su interior.

Un ejemplo de ambos casos es el siguiente:

Strong

Se usa para darle gran importancia al texto dentro de esta viñeta, se muestra como texto en negritas.

Time

Existen muchas formas de plasmar una fecha, sin mencionar que esto puede representarse de forma diferente en algunos lugares; para eso se utiliza el elemento "time", acompañado del atributo "datetime", ya que este elemento tiene la ventaja de que funciona para cualquier formato de fecha (hora, día, mes, año), así como para las mezclas de estos.

Su uso consiste en ingresar la fecha dentro del atributo "datetime" con el formato adecuado para que sea entendible por el navegador; a su vez, dentro de la etiqueta se ingresa la fecha de la forma que será visible para los usuarios. De esa forma el usuario puede visualizar cualquiera que sea el formato de fecha con el que esté familiarizado, sin que el navegador presente algún error.

Ejemplos de aplicación

U

Su función únicamente es la de mostrar el texto que se encuentre dentro de este subrayado, no añade ningún valor semántico a este.