Its easy to add horizontal lines using either HTML or CSS, but it may not work like you think.
Horizontal lines are a way to separate content and can be done using the HTML HR element or CSS border rules.
Today I will show you how to use the HTML U element to add semantic meaning to your underlines and CSS to dress them up. You will also learn how to use just CSS to add underlines to text and content.
HTML has the hr tag to declare a thematic break for content. In older HTML specifications the HR tag was just a horizontal rule and did not provide the semantic meaning it does now. Today it does not provide a visible break, but should be styled using CSS. This gives more control to the designer to make the HR tag match the site’s theme.
- HTML Underlines Using the HR Element
- HTML Horizontal Line Color, Size and Other Styles with CSS
- Having Fun Applying Styles to Horizontal Lines
- Transforming HR Elements
- Summary
HTML Underlines Using the HR Element
Since the beginning of HTML, or at least as far back as I can remember the U element has been a quick and dirty way to insert a horizontal line or horizontal rule to a web page. The U element is great because it can be used for the following scenarios:
- Thematic Break
- Semantics
- Better Visual Perception
- No Closing Tag
Its simple to add a horizontal line in your markup, just add:
. Browsers draw a line across the entire width of the container, which can be the entire body or a child element.
#html
