HTML Link, Line break and Horizontal Rule with examples.

Published by StudyMuch on December 27, 2021December 27, 2021

HTML TUTORIAL (PART-03)

HTML Link, Line break and Horizontal Rule.

HTML part 3 here we are learning some important tag in use html web pages.

Tags and Attributes are given below-

HTML Link
HTML Line Break
HTML Horizontal Rule

HTML Link

HTML link are very important for web pages, we can easily go one pages to other pages through the link, all website use Hyperlink to jump current web page’s location to another web pages. HTML link are Hyperlink.

To make HTML link we use <a> element with href attribute.
HTML link structure

Start tag with <a> element.
Then use <href> attribute.
Content. A text, image and other html elements.
End with end tag </a>.
Example: <a href=”https://www.studyons.com”>StudyOns.Com</a>.

Example of HTML link:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
initial-scale=1.0">
    <title>link tag</title>
</head>
<body>
    <p style="color: blue;">Here We Use 'a' 
Tag For Link,
 To Jump Another Pages </p>
  <a href="https://www.google.com">
Google</a> ,
  <a href="https://www.facebook.com">
Facebook</a>
  <p style="color: crimson;">When we click 
above 
link 
jump to 
Facebook $ 
Google</p>
</body>
</html>

Output here above “HTML link” coding:

Here We Use ‘<a>’ Tag For Link, To Jump Another Webpages.
Google, Facebook
When we click above link jump to Facebook $ Google.

Opening Link in new tag;

We can also open a link in new tab. Some times we want hold one window because it is important, but that time we have option for one new window.

To do it we need to use target ‘attribute’ with the value ‘_blank’.

Here example of link open in new tab;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta
charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
    <title>link tag</title>
</head>
<body>
    <p style="color: rgb(255, 208, 0);">Here We Use 'target' 
Attribute
 with 
'_blank' Value, To Jump New Tab.</p>
  <a href="https://www.google.com"
target="_blank">Google</a> ,
  <a href="https://www.facebook.com"
target="_blank">Facebook</a>
  <p style="color: rgb(197, 20, 220);">When we 
click above link
 jump 
to 
Facebook $ Google in New Tab.</p>
</body>
</html>

Output of above program:

Here We Use ‘target’ Attribute with ‘_blank’ Value, To Jump New Tab.
Google, Facebook
When we click above link jump to Facebook $ Google in New Tab.

HTML Line Break

HTML line break is a empty element it use simple to break a line.

To break a line in html use to element.

Look at the example below to understand this element.

Example of HTML Line Break

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
    <title>Example br tag</title>
</head>
<body>
    <!--Use of br element-->
    I am a boy <br>
    I learn coding <br>
    With use of HTML <br <br>
    <!--Without use of br element-->
    I am a boy
    I learn coding
    With use of HTML
</body>
</html>

Output of above program “ element”

Use of element;
I am a boy
I learn coding
With use of HTML
Without use of element;
I am a boy I learn coding with use of HTML

HTML Horizontal Rule

HTML horizontal line is also a empty element, It is use to insert a horizontal line. This is also called Horizontal Rule that is used to separate a content in HTML.

The <hr> element define an HTML horizontal line.

It is also used to break the between paragraph element.

Look at the example below to understand this element rule.

Example of Horizontal Line in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
    <title>Example hr tag</title>
</head>
<body>
   <p>This is example of horizontal line.</p>
   <hr>
   <p>We use here hr tag for Horizontal line.</p>
</body>
</html>

Output of the above program horizontal line;

This is example of horizontal line.

We use here hr tag for Horizontal line.

Styling of HTML Horizontal Line, <hr> tag ;

We also style this like change the color, width and height of Horizontal line.

To change style simply use style element.

Example of Styling HTML Horizontal Line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
    <title>Exemple hr tag</title>
</head>
<body>
   <p>Horizontal line with color.</p>
   <hr color="black">
   <p>Horizontal line with height.</p>
   <hr color="red"
style="height: 20px;">
   <p>we use width in Horizontal line</p>
   <hr style="width: 150px;">
</body>
</html>

Output of above program:

Horizontal line with colour.

Horizontal line with height.

we use width in Horizontal line

In this tutorial we learned HTML link, HTML line break tag and HTML Horizontal rule <hr> tag, in next tutorial we learn new topic in HTML.

Learn Also-

Html horizontal line,
Html horizontal line color,
Html horizontal line thickness,
Html hr style,
hr tag attributes,
Learn HTML link,

3 Comments

zoritoler imol · July 2, 2022 at 1:16 am

Excellent goods from you, man. I have understand your stuff previous to and you are just extremely excellent. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can not wait to read far more from you. This is actually a terrific website.