Leyenda del campo HTML

Introducción

La etiqueta HTML <legend> es una forma importante de proporcionar una leyenda o título al contenido hijo en la etiqueta HTML <fieldset>. La etiqueta <legend> se utiliza para identificar el contenido del campo y dar un título adecuado a la página. En este laboratorio, aprenderemos cómo usar la etiqueta <legend> y varias propiedades CSS con ella.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Agrega una etiqueta

Primero, abre tu editor de código y crea un nuevo archivo llamado index.html. Agrega la estructura básica al archivo escribiendo html y luego presionando la tecla tab.

Agrega una etiqueta <fieldset> a tu documento HTML.

<fieldset>
  <legend></legend>
</fieldset>

Agrega la etiqueta

dentro de la etiqueta

Agrega una etiqueta <legend> dentro de la etiqueta <fieldset> para crear un encabezado.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

Utiliza propiedades CSS con la etiqueta

Vamos a agregar algunas propiedades CSS a nuestra etiqueta <legend> para que se vea mejor.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

Guarda el archivo y abre el archivo index.html en tu navegador web preferido.

Resumen

En resumen, la etiqueta HTML <legend> nos ayuda a proporcionar una leyenda o título al contenido hijo en la etiqueta HTML <fieldset>. Usamos varias propiedades CSS con ella para que se vea mejor. Esperamos que ahora puedas usar la etiqueta <legend> para crear encabezados o títulos dentro de tus archivos HTML.