Build a Better Process
Build a Better Process
/ factorpad.com / tech / html5 / reference / html-hr-tag.html
An ad-free and cookie-free website.
Beginner
The <hr /> tag's primary purpose
is to add a horizontal break between paragraphs. This break commonly
takes shape as a horizontal line.
Specifications for line thickness, color and pattern are set in CSS.
The <hr /> tag only occurs in the
<body>, so the visible section of
the document.
From there it is normally inserted into larger blocks or sections
of the document, like within
<div> elements.
Depending on context, this element is designed to offer a
"thematic break" between ideas or thoughts in the written text. This
often occurs between <p>
paragraph elements.
As a block-level element, it takes up the whole horizontal space of the
surrounding container or parent element. So HTML code that comes after
the <hr /> element will start
on a new line.
So the <hr /> tag is more about
document structure than it is about text.
The <hr /> element requires only
one tag. There are only a handful of other single-tag elements in HTML5,
like <meta />,
<br /> and
<img />. Some refer to these as
"empty tags".
Unlike most other tags, the
<hr /> tag has no attributes in
HTML5. Of course global attributes apply, as they do with all elements.
Technically under HTML5, the tag can be input simply as
<hr>, but since it is so similar
to the XML and XHTML-conforming standard of
<hr />, I recommend learning the
longer form here, especially as you progress towards learning the more
advanced markup language XML, the eXtensible Markup Language.
The importance of XML has grown over recent years with the popularity of automated forms of web publishing like blogs and social feeds that connect to databases.
HTML code input above will appear as shown below.
|
In versions prior to HTML5, the horizontal rule was just that, a line. As such, each line was treated and styled differently, right in the tag itself with attributes. Now, with HTML5, the attributes are gone and the hr tag is described in terms of semantics. It is placed where there is a "thematic break" between paragraphs. Does this qualify? I'm not sure, but I put one here anyway. |
As with all tags, Global Attributes can always be set.
As mentioned, the <hr /> element
doesn't have any of its own attributes, or they would be detailed here.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
styles the <hr /> element using
the following specifications.
By default the line is often colored gray, is inset and has about a half a character html margin above and below the line.
The following HTML code will create a "thematic break" and horizontal line with default CSS styling between three paragraphs.
Learning takes practice. Type these lines into a text file, save it with an .html extension and open it in a browser.
After that, start taking notes and writing in HTML to gain experience.
The <hr /> tag sits between
paragraph elements, and that sits in the body element. It is similar in
structure to a line break.
See what else you can learn for free at our YouTube Channel. For new content, follow @factorpad on Twitter.
by <head>
tag, click Back.<html> tag, click Next./ factorpad.com / tech / html5 / reference / html-hr-tag.html
A newly-updated free resource. Connect and refer a friend today.