- HTML Links
- Creating Links in HTML
- HTML Link Syntax
- Example
- Setting the Targets for Links
- Example
- Creating Bookmark Anchors
- Example
- How to Create Links to Files in HTML: A Comprehensive Guide
- Using the download attribute to create a download link
- Linking to local files using the file:/// protocol
- HTML Tutorial — How to create a hyperlink
- Creating links using the tag and href attribute
- Linking to an existing file
- 12: How to Create Links in HTML
- Using bookmarks to create a hyperlink to a specific part of a web page
- Linking to external style sheets using the tag
- Best practices for creating HTML links
- Latest advancements in HTML for creating links
- Other helpful code examples for creating links to files in HTML
- Conclusion
HTML Links
In this tutorial you will learn how to create links to other pages in HTML.
Creating Links in HTML
A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.
A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.
By default, links will appear as follows in most of the browsers:
- An unvisited link is underlined and blue.
- A visited link is underlined and purple.
- An active link is underlined and red.
However, you can overwrite this using CSS. Learn more about styling links.
HTML Link Syntax
Links are specified in HTML using the tag.
A link or hyperlink could be a word, group of words, or image.
Anything between the opening tag and the closing tag becomes the part of the link that the user sees and clicks in a browser. Here are some examples of the links:
Example
The href attribute specifies the target of the link. Its value can be an absolute or relative URL.
An absolute URL is the URL that includes every part of the URL format, such as protocol, host name, and path of the document, e.g., https://www.google.com/ , https://www.example.com/form.php , etc. While, relative URLs are page-relative paths, e.g., contact.html , images/smiley.png , and so on. A relative URL never includes the http:// or https:// prefix.
Setting the Targets for Links
The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore( _ ) character:
- _blank — Opens the linked document in a new window or tab.
- _parent — Opens the linked document in the parent window.
- _self — Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value.
- _top — Opens the linked document in the full browser window.
Try out the following example to understand how the link’s target basically works:
Example
Tip: If your web page is placed inside an iframe, you can use the target=»_top» on the links to break out of the iframe and show the target page in full browser window.
Creating Bookmark Anchors
You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks are especially helpful if you have a very long web page.
Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump, then use that id attribute value preceded by the hash sign ( # ) as the value of the href attribute of the tag, as shown in the following example:
Example
Jump to Section A Section A
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
How to Create Links to Files in HTML: A Comprehensive Guide
Learn how to create links to files in HTML using different attributes and protocols. This comprehensive guide covers best practices and the latest HTML advancements.
- Using the download attribute to create a download link
- Linking to local files using the file:/// protocol
- HTML Tutorial — How to create a hyperlink
- Creating links using the tag and href attribute
- Linking to an existing file
- 12: How to Create Links in HTML
- Using bookmarks to create a hyperlink to a specific part of a web page
- Linking to external style sheets using the tag
- Best practices for creating HTML links
- Latest advancements in HTML for creating links
- Other helpful code examples for creating links to files in HTML
- Conclusion
- How do you link a file in HTML?
- How do I create a link to a file?
- How do I link a file to a URL?
- Can I share HTML file as a link?
HTML links are an essential part of web development, allowing users to navigate between different web pages and files. Creating links to files in HTML can be done using different attributes and protocols, and this blog post will guide you through the process. This post will cover the key points, important points, and helpful points related to creating links to files in HTML.
Using the download attribute to create a download link
The download attribute can be used to specify that the target will be downloaded when a user clicks on the hyperlink. This attribute is used by adding the “download” keyword to the tag. Here’s an example code:
Using the download attribute is very useful when you want to allow users to download files from your website. It’s important to note that this attribute is only supported by modern browsers.
Linking to local files using the file:/// protocol
To link to local files, use the file:/// protocol with three slashes. Here’s an example code:
Using the file:/// protocol is useful when you want to link to a file on your local machine or server. However, it’s important to understand that this protocol may not work in certain situations, such as when you’re linking to a file on a remote server.