HTML Link, Line break and Horizontal Rule with examples.
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 <br> 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 “<br> element”
| Use of <br> element; I am a boy I learn coding With use of HTML Without use of <br> 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 <br> 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,
8 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.
binance Отваряне на профил · April 18, 2023 at 4:05 am
Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.
Открыть учетную запись в binance · May 13, 2023 at 5:35 pm
Your article helped me a lot, is there any more related content? Thanks!
selling POS systems · December 12, 2023 at 9:17 am
I am not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this info for my mission.
88idr · January 4, 2024 at 4:15 pm
Hi there, You’ve done a great job. I?ll certainly digg it and personally suggest to my friends. I am sure they’ll be benefited from this site.
druck ups iii · February 5, 2024 at 8:20 pm
Great site. Lots of useful info here. I?m sending it to some friends ans also sharing in delicious. And certainly, thanks for your sweat!
film porno · February 10, 2024 at 11:14 pm
Hi there, just became alert to your blog through Google, and found that it’s truly informative. I am gonna watch out for brussels. I?ll appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!
ZoneAlarm coupon · February 24, 2024 at 11:19 am
My spouse and I absolutely love your blog and find most of your post’s to be exactly what I’m looking for. Does one offer guest writers to write content for you? I wouldn’t mind publishing a post or elaborating on some of the subjects you write about here. Again, awesome website!