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,
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.
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!