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: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element.
Originally the HR element was styled using attributes. Today, with HTML5, the HR tag has become semantic, which means it tells the browser, assistive reading technology and other automated system there is a paragraph-level thematic break.
This is a break in the content flow, but not a new page. It better serves as a visual queue of a change in topic. For example, you could place them at the end of a section, before a new sub-header.
HTML Horizontal Line Color, Size and Other Styles with CSS
Today the HTML HR element is styled with CSS rather than attributes. Not only does this use the right system (CSS) to define rendering rules it allows you to reuse the same rule many times. This makes your code more maintainable and your layouts more consistent.
Browsers render the line by applying the styles to a combination of the background and border styles. The border is the primary style for the default line. Removing the border also removes the line.
style="border: none;">Why would you want to do this?
An invisible line can still be useful to provide the semantic information to the user agent without visual clutter that may interfere with the desired user experience.