Marcado de Texto Especial

Etiquetas de formato de texto

HTML proporciona varias etiquetas de formato de texto que te permiten añadir énfasis, subrayar o tachar texto según sea necesario.

Las etiquetas <strong> y <em> se utilizan para enfatizar texto. La etiqueta <strong> muestra el texto en negrita, indicando una gran importancia, mientras que la etiqueta <em> muestra el texto en cursiva, indicando énfasis.

La etiqueta <u> subraya el texto para proporcionar claridad visual y resaltar información importante. Sin embargo, usa el subrayado con moderación para evitar saturar el texto.

La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia. Se usa comúnmente para mostrar que cierto texto ha sido eliminado o ya no es válido.
Ejemplo:

En el ejemplo anterior:

• Las etiquetas <strong> y <em> proporcionan énfasis al texto, con <strong> mostrando el texto en negrita y <em> en cursiva;
• La etiqueta <u> subraya el texto, resaltándolo visualmente;
• La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia.

Enlaces

Los enlaces, también conocidos como hipervínculos, permiten a los usuarios navegar entre páginas web, recursos y diversas formas de comunicación. En HTML, los enlaces se crean usando la etiqueta <a> (ancla).

El atributo href dentro de la etiqueta <a> especifica el destino del enlace. Puede aceptar varios tipos de URLs, incluyendo:

• URLs Absolutas: Especifican la dirección completa del recurso enlazado, incluyendo el protocolo (por ejemplo, "https://www.example.com");
• URLs de Teléfono: Permiten a los usuarios iniciar llamadas telefónicas directamente desde el navegador al hacer clic. Formateado como "tel:phone-number". Es esencial incluir el código de país y eliminar cualquier carácter especial o espacio del número de teléfono (por ejemplo, "tel:+123456789");
• URLs de Correo Electrónico: Permiten a los usuarios redactar correos electrónicos al hacer clic. Formateado como "mailto:email-address". Es importante incluir la dirección de correo electrónico completa después de mailto: (por ejemplo, "mailto:example@example.com").

Ejemplo:

En el ejemplo anterior:

• La etiqueta <a> crea hipervínculos con diferentes destinos;
• El atributo href especifica varias URLs, incluyendo URLs absolutas, números de teléfono y direcciones de correo electrónico.

Otros atributos útiles

La etiqueta <a> tiene varios atributos que se pueden usar para especificar propiedades del hipervínculo. Algunos atributos comunes incluyen:

• target="_blank": Especifica dónde abrir el documento enlazado. "_blank" abre el enlace en una nueva ventana o pestaña;
• download: Especifica que el objetivo se descargará cuando el usuario haga clic en el hipervínculo. Este atributo puede tener un valor para especificar el nombre del archivo para guardar el recurso.

Ejemplo:

En este ejemplo:

• El atributo href especifica la URL del recurso enlazado;
• El atributo target abre el enlace en una nueva ventana o pestaña.

Botones

La etiqueta <button> crea botones clicables en las páginas web. Permite a los usuarios interactuar con la página web al desencadenar acciones como enviar un formulario o ejecutar código JavaScript. Aunque no nos centraremos en JavaScript en este curso, es importante saber que tal posibilidad existe.

Tipos de botones

• Botón estándar (<button type="button">): Un botón de propósito general utilizado para varias acciones en la página web, como desencadenar funciones de JavaScript o navegar a otra página;
• Botón de envío (<button type="submit">): Se utiliza dentro de un formulario para enviar los datos del formulario a un servidor;
• Botón de reinicio (<button type="reset">): Se utiliza dentro de un formulario para restablecer los campos del formulario a sus valores predeterminados.

Ejemplo:

En el ejemplo anterior:

• El primer botón es un botón estándar con un atributo onclick que desencadena una alerta al hacer clic;
• El segundo botón es un botón de envío que envía los datos del formulario al servidor;
• El tercer botón es un botón de reinicio que restablece los campos del formulario a sus valores predeterminados.

Tutorial en Video