Basics of horizontal lines in HTML
Introduction to the HTML “hr” tag
In the digital world we live in, creating attractive and user-friendly websites is crucial. In this blog post, we will focus specifically on how you can create a horizontal line or divider using HTML. The horizontal line created by the HR tag is a simple but powerful way to separate and structure content on a web page.
<hr>
Why ‘hr’ stands for a horizontal line
But did you know that this line can be personalized with CSS to better match your design?
Personalize your horizontal line with CSS
In this article, we will first look at the basic HTML tag ‘hr’ and find out how it works.
Adjusting the thickness and color of the line
Then we’ll go one step further and show you how you can customize the appearance of your separator line with CSS. Here is an example of how you can change the thickness and color of your line:
<style>
hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
}
</style>
Overwriting the standard style
It is important to note that the ‘border: none;’ is necessary to override the default style of the line, as the hr tag has a border by default.
Examples of the use of the horizontal line
Horizontal lines in blog posts
Firstly, horizontal lines are a great way to visually separate different sections on your website.
Secondly, they can be used as a style element to emphasize your content.
Thirdly, horizontal lines can also be used to indicate the end of a page or section.
Styling the horizontal line: Five CSS examples
Example: Creating a colored line
You can change the color of the line to match the color scheme of your website. For example:
<style>
hr {
border: none;
height: 2px;
background-color: #ff0000; /* Rot */
}
</style>
<hr>
Example: Creating a dotted line
You can also create a dotted line to create a unique visual effect. For example:
<style>
hr {
border-top: 1px dotted #0000ff; /* Blau */
}
</style>
<hr>
Example: Adding shadows for a 3D effect
You can add a shadow to the line to create a 3D effect. For example:
<style>
hr {
border: none;
height: 1px;
background-color: #000; /* Schwarz */
box-shadow: 0 0 10px #000;
}
</style>
<hr>
Example: Designing a dashed line
A dashed line can be used to create a dividing line with a different style. For example:
<style>
hr {
border-top: 1px dashed #008000; /* Grün */
}
</style>
<hr>
Example: Creating a line with a color gradient
You can use a color gradient to create an appealing line. For example:
<style>
hr {
border: none;
height: 3px;
background: linear-gradient(to right, #f09, #3023AE); /* Farbverlauf von Pink zu Dunkelblau */
}
</style>
<hr>
These headings make it easy to navigate the content of the blog post and quickly jump to the desired information. They ensure that the structure of the article is clear and logical, making it easier for readers to understand the topic.
I hope this blog post helps you to make your websites even more appealing and user-friendly! Have fun experimenting with your horizontal lines.
