Logo - ProgrammingHead

Links in HTML – Learn HTML for Beginners

Links (Hyperlinks) are found in nearly all Web-Pages. Links are used to Redirect user to one page to another. Other than Redirecting User Links can be used to Get and Send file, processing files in Background open a new tab ETC.
So in this Tutorial we are going to Learn about LINKS.

Links in HTML – Learn HTML for Beginners

index.html [Anchor Syntax]

<a href="http://programminghead.com">
    click here
</a>

HTML Anchor <a> Tags

<a> or HTML Element Defines Links inside HTML Documents.
To add Links/Hyperlinks to a webpage we have to use HTML's <a> Tag for that. Between the starting <a> and closing </a> of Link we have to write our Text.

Anchor ta'gs href Attrubute

HTML href attribute Defines the path/URL for our Link Tag.
for adding path to our Link Tag we have to write href attribute inside Link's Starting tag <a> and inside the Double quotas of href we have to gave our Web-Page's URL or Web-site's URL href="url".

HTML Link Types

HTML Local Links

There is not always the case when you have to redirect your user to a page that's only available on the Internet, there are many cases when you just have to redirect or link a page from your Local Machine (Computer) or a file that available on the same Location/Folder/Directory.
in local web-page cases we can link a page without giving the full path. Just the file name and followed by the file Extension (.html).

index.html [Local Link Example]

<a href="index.html"> Click me </a>

HTML Empty Links

There are Some cases when you Don't want to Redirect user to Another page, or you just want to Link the Current page for some reasons like (Reloading the Same page), You can use Empty link.
You just have to enter # insider the href's double quotas href="#".

index.html [Empty Link Example]

<a href="#"> Click me </a>

This Empty url/# will redirect user to Current Web-page's location. You will find a # sign at the end of the url after clicking on the Empty URL.

HTML External Link

in HTML External Links we usually Link to External Websites.
Where website URL needs to includes in Anchor tag.

index.html [External Link Example]

<a href="http://programminghead.com/test.html"> External Link </a>

index.html [All 3 Links]

<html>
 <head>
  <title>HTML Links</title>
 </head>
 <body>
  <a href="home.html"> Local Link </a> <br/>
  <a href="http://programminghead.com/test.html"> Link with full Path </a> <br/>
  <a href="#"> Empty/Current page Link </a> <br/>
  <a> un-click-able Link </a>
 </body>
</html>

Related Topics: Links in HTML – Learn HTML for Beginners

Click on Titles below to reveal the Data

How to Add Link to an Image

To add a links in images using Anchor Tags, you just need to Declare/Write your Image tag inside HTML Anchor Tag's Starting <a> and Closing </a> tags and you are DONE.

index.html

<a href="page2.html">
  <img src="myImage.jpg"/>
</a>

Results

How to Add Link to a Button

Linking Submit buttons using Anchor Tag <a> is Easy and Reliable method in HTML. We need to Write/Declare Submit button between Anchor tag's Starting and Closing tags <a>...</a>.
By using Anchor tag's href attribute we can give a Path where we want to Link our Submit Button.

index.html

<a href="page2.html">
    <input type="submit"/>
</a>

Results

Personal Tutor

1$/Session

Learn HTML, CSS, JavaScript (ReactJs and NextJS)