horizontal line tag
1- horizontal line tag
1- horizontal line tag
-----Description-----
Uses of <hr> tag
Used for creating a horizontal line. This is also called Horizontal Rule in HTML.
This tag defines a thematic break in an HTML page (e.g. a shift of topic).
Used to separate the content (or define a change) in an HTML page.
This tag do not have end tag, but we can use it like <hr /> (optional).
Example-input
Example-input
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line</title>
</head>
<body>
First Line
<hr> Second Line
<hr> Third Line
<hr>
</body>
</html>
Output
First Line
Second Line
Third Line
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line</title>
</head>
<body>
First Line
<hr> Second Line
<hr> Third Line
<hr>
</body>
</html>
Output
First Line
Second Line
Third Line
hr line color
We can change the line colour, using color attribute.
Details of attribute
All html tag have chance to contain attributesAttributes always specified in the start tag (eg:<p class='cls'> => we cannot specified this in close tag </p>).These are just specifies some additional information about the elements.
Some common attribute names
id (eg, <p id='test'>Test paragraph</p>).
id value should unique for the whole documents.
class
(eg, <p class='clsname'>Test paragraph</p>).
Same class name have chance to contain more than one html element.
name
(eg, <p name='tstname'>Test paragraph</p>).
Example-input
Example-input
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line color</title>
</head>
<body>
First Line
<hr color="red"> Second Line
<hr color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
First Line
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line color</title>
</head>
<body>
First Line
<hr color="red"> Second Line
<hr color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
Second Line
Third Line
hr line size
We can change the default line size using size attribute.We can use more than one attribute.In this example we have used color and size attributes.
Example-input
Example-input
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line size</title>
</head>
<body>
First Line
<hr size="10px" color="red"> Second Line
<hr size="30px" color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
First Line
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line size</title>
</head>
<body>
First Line
<hr size="10px" color="red"> Second Line
<hr size="30px" color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
Second Line
Third Line
hr line width
We can change the default width using width attribute.
Example-input
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line width</title>
</head>
<body>
First Line
<hr width="50%" size="10px" color="red"> Second Line
<hr width="80%" color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
First Line
Example-input
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Line width</title>
</head>
<body>
First Line
<hr width="50%" size="10px" color="red"> Second Line
<hr width="80%" color="green"> Third Line
<hr color="blue">
</body>
</html>
Output
Second Line
Third Line
The
Comments
Post a Comment