HTML Links

Used to create hyperlinks, allowing users to navigate between different web pages or resources on the internet.
Links are an essential part of web development and are created using the anchor tag <a> in HTML.

Example
<!DOCTYPE html>
<html>
  <head>
    <title>href attribute Example</title>
  </head>
  <body>
    <a href="www.bmreducation.com">This is a Link</a>
    <p>The links are valid which are kept in href attribute.</p>
    <p>href attribute is valid only in a  tag</p>
  </body>
</html>

The href Attribute

Used to specify the URL of a hyperlink
The href attribute is used only in a (Anchor) tag.
The format of the href attribute is <a href="www.bmreducation.com" >

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Links Example</title>
    </head>
    <body>
        <a href="https://online-tools.bmreducation.com/editor/web-compiler/">This is a Link</a>
        <a href="/editor/web-compiler/">This is a Link</a>
        <a href="web-compiler/">This is a Link</a>
    </body>
</html>
Refer: Know more about how the file path work

The target Attribute

The target attribute is an optional attribute used within the anchor tag <a> in HTML.
It specifies where the linked content should be opened when the user clicks on the link.
The attribute can take various values to control how the link behaves.

Target Type

Description

_self

This link will open in the same tab or frame as the one the link was clicked in.

_blank

This link will open in a new browser tab.

_parent

This link will open in the parent frame (if used within frames). If the link is not within a frameset, it behaves the same as _self.

_top

This link will open in the full window, breaking out of any frames (if used within frames).

framename

This link will open in a specific named frame. Note that for this example, you need to have a frame with the name "myframe" defined in your HTML. If you don't have frames, this link will behave like _self.


Example
<!DOCTYPE html>
<html>
    <head>
        <title>href attribute Example</title>
    </head>
    <body>
        <a href="https://www.bmreducation.com/" target="_self">_self - Open in same tab</a>
        <a href="https://www.bmreducation.com/" target="_blank">_blank - Open in new tab</a>
        <a href="https://www.bmreducation.com/" target="_parent">_parent - Open in parent frame</a>
        <a href="https://www.bmreducation.com/" target="_top">_top - Open in full window</a>
        <a href="https://www.bmreducation.com/" target="myframe">framename - Open in named frame</a>
    </body>
</html>

Image Links

Keep the image link or path in the href attribute to open the image when clicked.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Image Links Example</title>
    </head>
    <body>
        <a href="/BMR ONLINE TOOLS.ico">open the image</a>
    </body>
</html>

Email Links

Email links are a type of hyperlink in HTML that allows users to initiate an email composition directly from a web page.
When a user clicks on an email link, their default email client (such as Outlook, Gmail, or Apple Mail) will open with the recipient's email address pre-filled in the "To" field.
There are placed in href attribute starting with maitto syntax. Syntax: <a href="mailto:[email protected]">Send email>

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Mail Links Example</title>
    </head>
    <body>
        <a href="mailto:[email protected]">Send Email</a>
        <a href="mailto:[email protected]?subject=Send your query.">Send Email</a>
    </body>
</html>

Using Links for js

In JavaScript, you can use links in many ways. Lets see some of it
By handling the click event using the onclick attribute.
By manipulating the browser location directly using JavaScript functions.
by using js you dont need to use compulsorily href attribute or "a" tag.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Links using js Example</title>
    </head>
    <body>
       <a href="#" id="myLink">Click Me</a>
    <button onclick="document.location='https://www.bmreducation.com/'">HTML Tutorial</button>

    <script>
        document.getElementById('myLink').onclick = function() {
            // Change the current page's URL
            window.location.href = 'https://www.bmreducation.com/';
        };
    </script>
    </body>
</html>

Quick Recap - Topics Covered

HTML Links
href attribute
Target attribute
Image Links and Mail Links
Using js for Links

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example 1
Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK