HTML / HTML Headings and Paragraphs
Adding Horizontal Lines for Separation
In this tutorial, you'll learn how to use the <hr> tag in HTML to create thematic breaks in your content, often represented as horizontal lines. This will help you to visually sep…
Section overview
5 resourcesCovers the use of headings and paragraphs to organize content effectively.
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!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article