Html | etiqueta de detalles

Organizar datos en un sitio web es una tarea crucial. Más específicamente, cuando agregamos un texto grande, la organización de los datos ayuda a evitar problemas de legibilidad para los usuarios. En otro escenario, el usuario quiere ver solo la información cuando haga clic en una sección en particular. Para este propósito, el HTML "<Detalles>Se utiliza la etiqueta, que se puede hacer clic para ver u ocultar los detalles. Además, la etiqueta de resumen agregada dentro de la etiqueta de detalles se usa para agregar encabezados visibles.

Este tutorial proporcionará una guía detallada sobre la etiqueta HTML.

Cómo usar la etiqueta HTML?

Para usar la etiqueta HTML, siga la sintaxis proporcionada:

Algunos encabezados

Contenido…

En la sintaxis dada anteriormente:

• es la etiqueta inicial.
• La etiqueta se utiliza para especificar un encabezado visible para los detalles.
• es la etiqueta de cierre.

• La etiqueta especifica algún contenido de párrafo en la página.

• es la etiqueta de cierre.
• es la etiqueta de cierre.

Ejemplo: cómo insertar elemento en html?

Primero, agregue/cree un elemento div con un nombre de clase "descomunal"En html. Dentro de este elemento div, agrega

Elemento para especificar algún contenido de párrafo como se muestra a continuación:

Aquí está la lista de etiquetas HTML con sus detalles:

Dentro de este elemento div, agregue tantas etiquetas de detalles como desee. Aquí en este ejemplo, agregaremos tres etiquetas de detalles junto con la etiqueta HTML y

etiqueta:

Etiqueta html br

La etiqueta HTML BR se utiliza para agregar un descanso de línea.

Etiqueta de cabeza HTML

La etiqueta de cabeza HTML se utiliza para sostener los metadatos.

Etiqueta html p

La etiqueta HTML P se utiliza para agregar un párrafo.

El código proporcionado anteriormente dará como resultado la salida correspondiente:

Entonces sí, la estructura se ha completado, ahora, aplican algunas propiedades de CSS para un mejor diseño.

Estilo "Desc" Div

.Desc
Altura: 250px;
Margen: 0px Auto;
borde: 3px Solid #9C2C77;
Ancho: 80%;
relleno: 5px 10px;
tamaño de fuente: 16px;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
Color de fondo: #F2C0F5;

El elemento div tiene clase "descomunal"Se aplica con las siguientes propiedades:

• "alturaLa propiedad se utiliza para la configuración de la altura del elemento.
• "margen"Propiedad con el valor establecido como '0px Auto"Indica el espacio de 0px en el fondo superior e igual al espacio en los lados izquierdo-derecha.
• "borde"Propiedad con el valor establecido como"3px gris sólido"Define el ancho de la línea de borde como 3px, estilo de borde sólido y el color del borde.
• "anchoLa propiedad se utiliza para establecer/ajustar el ancho del elemento.
• "relleno"Propiedad con el valor establecido como"5px 10px"Indica"5px"Espacio en la parte superior y"10px"Espacio en la izquierda derecha del contenido del elemento.
• "tamaño de fuente"El atributo especifica el tamaño de la fuente de un elemento.
• "Familia tipográfica"Está configurado con la lista de estilos de fuentes para asegurarse de que si el navegador no es compatible con una familia de fuentes, otros serán aplicados.
• "color de fondo"La propiedad está configurada para especificar el color de fondo del elemento.

Elemento de estilo "Detalles" de estilo

detalles
cursor: puntero;
Font-Family: cursiva;

El elemento Detalles HTML se aplica con las siguientes propiedades:

• "cursor"Propiedad con el valor establecido como"puntero"Cambiará el cursor del mouse como una mano puntiaguda al flotar en el contenido del elemento.
• "Familia tipográfica"Propiedad asignada con el valor"cursivo", Especificando el texto en estilo cursivo.

Elemento de estilo "Resumen"

resumen
Font-Weight: Bold;

La etiqueta de resumen se aplica con el "pescado"Propiedad con el valor"atrevido".

El código de arriba proporcionará resultados como se muestra en la imagen a continuación:

Así es como podemos implementar el elemento HTML.

Conclusión

Al desarrollar un sitio web, es necesario colocar datos de manera organizada. Especialmente cuando se coloca un texto largo en un sitio web, puede causar problemas en la lectura, el seguimiento de la información y más. La etiqueta HTML se utiliza para organizar datos y proporciona la funcionalidad para ocultar o ver los detalles al hacer clic. Este blog ha demostrado la etiqueta HTML con un ejemplo práctico.