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

Treema Work

Threema Work: el WhatsApp para empresas seguro y eficaz

La popularidad que han alcanzado las aplicaciones de mensajería instantánea ha sido tal que a día de hoy sirven para todo. WhatsApp es la más popular en España, pero hay otras muy interesantes que ya están empleando en otros ámbitos. A nivel laboral, el caso de Threema Work ha emergido como una solución muy interesante

LG OLED evo M4

LG OLED evo M4: el primer televisor OLED inalámbrico del mundo

Los engorrosos cables. Siempre el lío con los cables de ordenadores, consolas, televisión y demás productos grandes tecnología. LG ha dado un golpe sobre la mesa en el segmento de televisores con su LG OLED evo M4, considerado como la primera tele sin cables. no es solo un televisor; es una declaración de cómo la

monitores Philips para el trabajo

Tres monitores Philips para trabajar de la manera más eficiente

Tres nuevos monitores Philips ven la luz para la gama profesional: el 27B2G5500, el 24B2G5200 y el 27B2G5200. Diseñados para oficinas y espacios de trabajo que buscan tecnología avanzada sin comprometer el medio ambiente, estos modelos destacan por sus prestaciones sostenibles, eficiencia energética y características que mejoran el confort visual de los usuarios. Su diseño

Black Friday 2024

Una media de 5 productos y 242 euros: así compraremos en el Black Friday 2024

El próximo 29 de noviembre, los españoles volverán a lanzarse a las ofertas del Black Friday 2024, un evento ya consolidado como una de las fechas más esperadas para realizar compras, especialmente de cara a la Navidad. Este año, el presupuesto medio que los consumidores planean gastar ha subido a 242 euros, 15 euros más

OPPO A79 5G

OPPO A79 5G, un móvil super equilibrado para una gran variedad de bolsillos

OPPO siempre nos tiene acostumbrados a móviles accesibles dotados con excelentes componentes para dar un buen rendimiento. Estas condiciones son las que reúna el OPPO A79 5G, un smartphone que eleva el estándar en experiencias audiovisuales y funcionalidad. Diseñado para destacar tanto por su aspecto como por su rendimiento, este dispositivo promete satisfacer las demandas