HTML Tutorial

HTML Tag: <hr>

Usage:

The <hr> tag is used to insert a horizontal line into a web page. It helps to visually separate sections of content and improve readability.

Attributes:

  • width: Width of the horizontal line in pixels or percentage.
  • size: Height of the horizontal line in pixels.
  • color: Color of the horizontal line in hexadecimal, RGB, or CSS color name.
  • align: Horizontal alignment of the horizontal line (left, center, right).

Examples:

<hr>  <!-- Default horizontal line -->
<hr width="500px">  <!-- Horizontal line with width of 500 pixels -->
<hr size="5">  <!-- Horizontal line with height of 5 pixels -->
<hr color="red">  <!-- Horizontal line in red color -->
<hr align="center">  <!-- Center-aligned horizontal line -->

Practical Steps:

  1. Place the <hr> tag where you want a horizontal line to appear.
  2. Use the width, size, color, and align attributes to customize the line.
  3. Save and refresh the HTML page to see the changes.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;hr&gt; Tag</title>
</head>
<body>
  <h1>Section 1</h1>
  <hr>
  <h1>Section 2</h1>
</body>
</html>

Explanation:

This example creates two sections separated by a horizontal line using the <hr> tag. The horizontal line has a default width and size, and it is left-aligned.