leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML link

Estimated reading: 7 minutes 36 views

HTML uses hyperlinks to connect to another document on the web. Links can be found on almost all web pages. Click a link to jump from one page to another.

example

HTML Links
How to create links in HTML documents.

(More examples can be found at the bottom of this page)

HTML uses the tag <a> to set up hypertext links.

A hyperlink can be a word, a word, or a group of words, or an image that you can click to jump to a new document or a section in the current document.

When you move the mouse pointer over a link in a web page, the arrow turns into a small hand.

The href attribute is used in the tag <a> to describe the address of the link.

By default, the link will appear in the browser as:

  • An unvisited link is shown in blue font and underlined.
  • Visited links are purple and underlined.
  • When a link is clicked, the link appears red and underlined.

Note: If CSS styles are set for these hyperlinks, the display styles will be displayed according to the CSS settings.

The HTML code for the link is simple. It looks like this:<a href=” url “> link text </a>

The href attribute describes the target of the link. .

Example

<a href=”https://www.coding180.com/”>Visit Beginners Tutorial</a>

The above line of code is displayed as: Visit the beginners tutorial

Clicking on this hyperlink will take the user to the home page of the beginners tutorial.

Tip: “Link text” doesn’t have to be text. Images or other HTML elements can be links.

Using the target attribute, you can define where the linked document is displayed.

The following line will open the document in a new window:

Example

< a href = ” https://www.coding.com/ ” target = ” _blank ” rel = ” noopener noreferrer ” > Visit the Beginners Tutorial! </ a >

The id attribute can be used to create an HTML document bookmark.

Tip: Bookmarks are not displayed in any special way, that is, they are not displayed in the HTML page, so they are hidden from the reader.

Example

Insert ID in HTML document:<a id=”tips”>Helpful Tips Section</a>

Create a link to the “Helpful Tips Section (id=”tips”)” in the HTML document:<a href=”#tips”>Visit the helpful tips section</a>

Alternatively, create a link to the “Helpful Tips Section (id=”tips”)” from another page:<a href=”https://www.coding180.com/html/html-links.html#tips”>
Visit the Helpful Tips section</a>

Basic Notes – Helpful Tips

NOTE: Always add forward slashes to subfolders. If the link is written like this: href=”https://www.coding180.com/html”, two HTTP requests will be made to the server. This is because the server will add forward slashes to this address and then create a new request like this: href=”https://www.coding180.com/html/”.

more examples

Image Links
How to use Image Links.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <p>Create image link:
        <a href="https://www.coding180.com/html/html-tutorial.html">
            <img border="10" src="car.jpg" alt="HTML Tutorial" width="80" height="70"></a>
    </p>

    <p>Image links without borders:
        <a href="https://www.coding180.com/html/html-tutorial.html">
            <img border="0" src="car.jpg" alt="HTML Tutorial" width="80" height="70"></a>
    </p>

</body>

</html>l-tutoveiw chapter4
html img link

Link to a specified location on the current page
How to use bookmarks

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <p>
        <a href="#C4">View Chapter 4</a>
    </p>

    <h2>Chapter 1</h2>
    <p>This section shows the content of this chapter...</p>

    <h2>Chapter 2</h2>
    <p>This section shows the content of this chapter...</p>

    <h2>Chapter 3</h2>
    <p>This section shows the content of this chapter...</p>

    <h2><a id="C4">Chapter 4</a></h2>
    <p>This section shows the content of this chapter...</p>

    <h2>Chapter 5</h2>
    <p>This section shows the content of this chapter...</p>

    <h2>Chapter 6</h2>
    <p>This section shows the content of this chapter...</p>

    <h2>Chapter 7</h2>
    <p>This section shows the content of this chapter...</p>

</body>

</html>
view chapter4

Out of the frame
This example shows how to jump out of the frame, if your page is fixed inside the frame.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <p>Out of frame?</p>
    <a href="https://www.coding180.com/" target="_top">Click here!</a>

</body>

</html>
out of frame

Creating Email Links
This example demonstrates how to link to an email. (This example does not work until a mail client program is installed.)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <p>
        Here is an email link:
        <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
            send mail</a>
    </p>

    <p>
        <b>Note:</b> Use %20 for spaces between words to ensure that the browser can display the text properly.
    </p>

</body>

</html>
mail link1

Creating Email Links 2
This example demonstrates a more complex email link.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <p>
        Here's another email link:
        <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
            target="_top">Send Mail!</a>
    </p>

    <p>
        <b>Note:</b> Spaces between words are replaced with %20 to ensure that the browser can display the text
        properly.
    </p>

</body>

</html>
mail link2
Labeldescribe
<a>define a hyperlink

Leave a Comment

CONTENTS