Esta sola línea de código añadirá una línea en cualquier documento HTML

Esta sola línea de código añadirá una línea en cualquier documento HTML

Esta sola línea de código añadirá una línea en cualquier documento HTML

VALORACIÓN DEL ARTÍCULO:
5/5


La etiqueta HR se utiliza en documentos web para mostrar una línea horizontal a través de la página, o a veces llamada regla horizontal. A diferencia de algunas etiquetas, ésta no necesita una etiqueta de cierre, así que todo lo que tienes que hacer es escribir para insertar la línea.

La línea se extiende a lo largo de todo el ancho de la página y contiene algunos atributos predeterminados para describir el grosor, la ubicación y el color de la línea, pero puede cambiar esos ajustes si lo desea.

Puede editar las características de la línea horizontal en un documento HTML5 editando el CSS de la página. Las líneas horizontales HTML4 se modificaron en el lado HTML del documento.

¿Es semántico el HR Tag?

En HTML4, la etiqueta HR no era semántica. Los elementos semánticos describen su significado en términos que el navegador y el desarrollador pueden entender fácilmente. La etiqueta HR era sólo una forma de añadir una simple línea a un documento donde lo desees. Estilizar sólo el borde superior o inferior del elemento en el que se desea que aparezca la línea colocó una línea horizontal en la parte superior o inferior del elemento, pero en general, la etiqueta HR era más fácil de usar para este propósito.

Comenzando con HTML5, la etiqueta HR se convirtió en semántica, y ahora define un salto temático a nivel de párrafo, que es un salto en el flujo del contenido que no justifica una nueva página u otro delimitador más fuerte – es un cambio de tema. Por ejemplo, puede encontrar una etiqueta HR después de un cambio de escena en una historia, o puede indicar un cambio de tema en un documento de referencia.

Atributos de RRHH en HTML4 y HTML5

En HTML4, a la etiqueta HR se le pueden asignar atributos simples, incluyendo align, width, and noshade. La alineación puede ajustarse a left, center, right or justify. El ancho ajusta el ancho de la línea horizontal desde el 100 por ciento predeterminado que extiende la línea a través de la página. El atributo noshade atribuye una línea de color sólido en lugar de un color sombreado.

Estos atributos son obsoletos en HTML5. En su lugar, debería utilizar CSS para dar estilo a sus etiquetas de recursos humanos en documentos HTML5.

Este es un ejemplo HTML5 de cómo estilizar la línea horizontal para que tenga una altura de 10 píxeles usando CSS en línea (estilos insertados directamente en el documento junto con HTML):

Captura de pantalla que muestra cómo estilizar la etiqueta HR en HTML usando CSS en línea Usando CSS en línea para estilizar HR.

 

Otra forma de estilizar las líneas horizontales en HTML5 es usar un archivo CSS separado y enlazarlo desde el documento HTML. En el archivo CSS, escribirías el estilo así:

Captura de pantalla que muestra cómo usar CSS externo para estilizar la etiqueta HR en HTML Usando CSS externo para estilizar HR.

 hr {
altura:10px

El mismo efecto en HTML4 requiere que añada un atributo al contenido HTML. Cómo cambiar el tamaño de la línea horizontal con el atributo size:

Captura de pantalla del atributo de tamaño para la etiqueta HR en HTML Estilizar la etiqueta HR en HTML4.

 

Hay mucha más libertad en el diseño de líneas horizontales en CSS que en HTML.

Sólo los estilos width and height styles son consistentes en todos los navegadores, por lo que es posible que sea necesario realizar algunas pruebas y errores al utilizar otros estilos. El ancho por defecto es siempre el 100 por ciento del ancho de la página web o elemento padre. La altura por defecto de la regla es de dos píxeles.

TAMBIÉN TE INTERESA

Xiaomi-14-Series

Xiaomi 14 Series se suma a la puja por ser el móvil del año

Xiaomi 14 Series llega al mercado para colarse en la eterna batalla que mantienen los flagships de Apple y Samsung. Al igual que sus rivales, los nuevos móviles de la marca china llegan con la IA bajo el brazo y una gran cantidad de razones para aspirar a ser uno de los móviles del 2024.

Sage-Copilot

Sage Copilot: el software de recursos humanos número uno integra la IA Generativa

Son muchas las pymes que actualmente cuentan con el software de Sage para la gestión de los recursos humanos. Contabilidad, finanzas y nóminas, entre otras grandes áreas, son gestionadas por esta popular herramienta entre los negocios españoles e internacionales. La novedad más reciente es la integración de la IA Generativa que han desarrollado los técnicos

OPPO-Air-Glass-3

Esto va de gafas e IA: salen a la luz las OPPO Air Glass 3

No hay duda de que el tema central del Mobile World de este año es la inteligencia artificial. Pero en el evento barcelonés suele destacar por la presentación de nuevos dispositivos por parte de las marcas. Ya vimos lo sorprendentes que pueden llegar a ser las Apple Vision Pro… Ahora OPPO anuncia nuevas gafas en