Adding Horizontal Lines for Separation

Tutorial 4 of 5

Introduction

Goal: This tutorial aims to teach you how to use the <hr> tag in HTML to create thematic breaks, or horizontal lines, in your content. This will help improve the readability of your content by adding a visual separation between different sections.
Learning Outcomes: By the end of this tutorial, you will be able to:
Understand the concept and usage of the <hr> HTML tag.
Apply the <hr> tag effectively to separate different content sections visually.
Customize the appearance of your horizontal lines.
Prerequisites: This is a beginner-friendly tutorial. However, a basic understanding of HTML would be beneficial.

Step-by-Step Guide

The <hr> tag in HTML stands for 'horizontal rule'. It is a self-closing tag, meaning it doesn't require a closing tag.

Example:

<hr>

This will create a default horizontal line across the page.

Customizing your `<hr>` tag

You can customize your <hr> tag in various ways using CSS. For example, you can change the color, height, and width as well as add margins.

Example:

<style>
    hr {
        border: none;
        height: 2px;
        color: #333; /* background color */
        background-color: #333; /* line color */
    }
</style>

<hr>

In this example, we've created a 2px high black line. The border: none; style is used to override the browser's default styling.

Code Examples

Simple Horizontal Line:

<!-- This is a simple use of the hr tag -->
<hr>

Just using <hr> will create a default horizontal line across the page.

Customized Horizontal Line:

<!-- Customized Horizontal Line -->
<style>
    hr.custom {
        border: none;
        height: 3px;
        background-color: red;
    }
</style>

<hr class="custom">

Here, we've created a 3px high red line. The line is styled using a CSS class named "custom".

Summary

We learned how to use the <hr> tag to create horizontal lines for thematic breaks.
We also looked at how to customize our horizontal lines using CSS properties such as height, color, and border.
Lastly, we explored some examples of how to implement and customize horizontal lines in practical scenarios.

Practice Exercises

Exercise 1: Create a basic webpage and use the <hr> tag to separate the header, main content, and footer.
Exercise 2: Customize the <hr> tag to create a blue, 5px high line.
Exercise 3: Add a margin to your horizontal line.

Solutions:

Solution 1:

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Webpage</h1>
    </header>
    <hr>
    <main>
        <p>This is the main content of my webpage.</p>
    </main>
    <hr>
    <footer>
        <p>Thank you for visiting my webpage.</p>
    </footer>
</body>
</html>

Solution 2:

<style>
    hr {
        border: none;
        height: 5px;
        background-color: blue;
    }
</style>

<hr>

Solution 3:

<style>
    hr {
        border: none;
        height: 2px;
        background-color: #333;
        margin: 20px 0;
    }
</style>

<hr>

Remember, practice is key to mastering any concept. Keep trying out new things with the <hr> tag and other HTML elements as well. Happy Coding!