Class 10 HTML Worksheet: The hr(Horizontal Rule) Tag

Class 10 HTML Worksheet: The <hr> (Horizontal Rule) Tag

Part A: Fill in the Blanks

The <hr> tag is used to create a __________ line across the webpage.
The <hr> tag is often used to separate different __________ or sections of content.
The <hr> tag is a __________ element, meaning it does not require a closing tag.
The __________ and __________ attributes can be used to adjust the width and height of the horizontal rule.
In modern HTML, the appearance of the <hr> tag is controlled using __________.

Part B: True or False

The <hr> tag is used to create a vertical line. (True / False)
The <hr> tag is used to define thematic breaks or divisions in content. (True / False)
The color of the <hr> tag can be changed using CSS. (True / False)
The <hr> tag requires a closing </hr> tag. (True / False)
The width of the <hr> tag can be set as a percentage of the page width. (True / False)

Part C: Short Answer Questions

What is the primary function of the <hr> tag in an HTML document?
Write the HTML code to create a horizontal line with a width of 50% and height of 2 pixels.
How can you use the <hr> tag to improve the readability of a webpage?
Write the CSS code to style an <hr> tag with a blue color, 5px height, and dashed line style.
How does the <hr> tag differ from the <br> (line break) tag in terms of functionality?

Part D: Practical Exercises

Create an HTML document that displays the following content, separated by horizontal rules:
- A heading that says "My Portfolio"
- A paragraph describing your skills
- Another heading that says "Projects"
- A list of three projects you've worked on
Write the HTML and CSS code to create a webpage with three horizontal rules:
- The first one is 100% wide, 1px tall, and solid black.
- The second one is 50% wide, 3px tall, and red in color.
- The third one is 80% wide, 5px tall, and dashed.
Write the HTML code to add a horizontal rule after each section of a webpage:
- Section 1: "About Me"
- Section 2: "My Hobbies"
- Section 3: "Contact Information"

Part E: Code Correction

Examine the following HTML code and correct the mistakes related to the <hr> tag. Rewrite the correct code.

<!DOCTYPE html>
<html>
<head>
  <title>HR Example</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <hr>
  <p>This is a paragraph.<hr></p>
  <hr width="50" height="3">
</body>
</html>