¿Cómo definir un cambio temático en el contenido en HTML5?

En este artículo veremos cómo definir un cambio temático en el contenido de una página. Esto puede ayudar a introducir una ruptura entre párrafos cuando cambia la descripción del párrafo.

El elemento <hr> en HTML se usa para representar un cambio temático en el contenido. Se puede usar con atributos como alineación, sombra, ancho y tamaño para especificar sus características. Es una etiqueta de cierre automático.

Los siguientes ejemplos muestran el uso de la etiqueta <hr> para marcar un cambio temático entre párrafos:

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>HTML</h2>
      
    <p>Hypertext Markup Language is the markup 
      language for pages to be displayed in a web 
      browser. It can be used with CSS to improve 
      the look of the webpage and JavaScript to make 
      the page dynamic.</p>
  
  
    <!-- Introducing a thematic break here -->
    <hr>
  
    <h2>CSS</h2>
      
    <p>Cascading Style Sheets is a language that is 
      used for styling a webpage in accordance to 
      the given HTML content.</p>
  
</body>
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>Stack</h2>
      
    <p>A Stack is a data structure that follows
      the Last In First Out order to store the 
      data.</p>
  
      
    <!-- Normal HR element -->
    <hr>
  
    <h2>Queue</h2>
    <p>A Queue is a data structure that follows 
      the First In First Out (FIFO) order to 
      store data.</p>
  
  
    <!-- HR element with the size 
    and width modified -->
    <hr size="10" width="500">
  
    <h2>Heap</h2>
      
    <p>A Heap is a tree-based data structure that 
       can be used for implementing priority queues.</p>
  
          
    <!-- HR element with the alignment 
    and width modified -->
    <hr align="right" width="300">
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por manishkrjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *