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.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,