Hyper links in html

The text between our tags will link to the URL that we specify in our opening tag. We use the href attribute to choose the target of the URL. This could be an absolute URL or absolute link such as https://www.careerkarma.com or a URL relative to somewhere on our site.

Here is an example of a link that points to the Career Karma home page’s web address:

HTML Hyperlink Tag Types

There are three types of links that may appear in a browser. These are as follows:

• Unvisited links, which appear in blue
• Visited links, which appear in purple
• Active links, which appear in red

Some websites overwrite these colors, which means they appear differently, but those are the main types of links that you can style in HTML.

Hyperlink HTML: Targets

You can change how a link is opened. For example, say you want a link to open in a new tab in the user’s web browser. This will make sure the user does not lose their place on the web page they’re currently viewing.

That’s where the link targetHTML attribute comes in. By using the link target attribute, you can specify where the browser should open the resource to which you have linked.

There are four types of targets you can use, which are as follows:

• _self: Visits the web resource in the same window and tab. This is the default target used in HTML hyperlinks.
• _parent: Visits the web resource in the parent window.
• _blank: Visits the web resource in a new window or tab.
• _top: Visits the web resource in a full browser window.

Here’s an example of a few of these links in action:

This link will open in this tab. This link will open a parent window. This link will open in a new tab. This link will open in a full browser window.

Hyperlink HTML: Bookmark Anchors

Hyperlinks in HTML can also reference a specific part of an HTML document. This is useful if you have a long web page and want to direct a user to a particular place in the text.

Before you start using bookmark anchors, you first need to define an ID attribute on the element where you want the user to go. Here’s an example of declaring an ID attribute on a title in a web page:

We have given the HTML heading tag the id subtitle3, which we can then use to reference it in a hyperlink.

Here’s an example of a hyperlink that references this heading:

Instead of specifying a URL in our href tag, we specify the ID of the element we want to link to. We add a hash sign before that id (#) so the browser knows the linked document is on our web page.

HTML Anchor Tag

A HTML anchor tag refers to the tag. This tag links a user to another web resource. The “href” attribute defines the resource to which a user will be taken when they click the link.

HTML Anchor Tag Examples

Let’s walk through a few examples of using the HTML tag.

Relative URLs

If you are linking to a resource on the same HTML document as you are developing, you can use a relative URL. Relative URLs are also referred to as local links and do not use the “https://www.sitename.com” syntax. Instead, relative URLs point to the file path of a specific web resource on the local server.

Suppose we were creating a link on the Career Karma website which should point to our blog. Instead of using an absolute URL, we could use a local URL, because our site is the Career Karma site. Here’s the code we would use to create this link:

When we click on the text Career Karma blog, we are sent to the /blog resource on our site.

Email Address

The anchor tag can also be used to link to an email address. When a link to an email address is clicked, the user’s default email program will be opened. The user will be asked if they want to send a message to the email address you have specified.

To link to an email address, we need to start our link with the mailto: protocol. Here’s an example of linking to an email address in HTML:

When we click our link, our email program opens up and asks us to email “nothing@google.com”.

«Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!»

Venus, Software Engineer at Rockbot

Link to an Element

The anchor tag can link to an element on a web page. You can create this link by specifying the id of the element to which the anchor should point. Suppose we wanted a link to take our user to the heading Test Heading on a web page. We could create this link using the following code:

Jump to Test Heading 
Test Heading

When we click on our link, our web page will scroll down to the element with the id test_heading.

Conclusion

Hyperlinks can be used in HTML to link one web page or resource to another. You can use hyperlinks to connect to resources on your site, or on any other website. In this guide, we have broken down how to use hyperlinks in an HTML document.

With all of this information, you’re ready to create hyperlinks in HTML like a master!

To learn more about coding in HTML, read our How to Learn HTML guide.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

Источник

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links — Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links — Syntax

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links — The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self — Default. Opens the document in the same window/tab as it was clicked
• _blank — Opens the document in a new window or tab
• _parent — Opens the document in the parent frame
• _top — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

HTML Links — Use an Image as a Link

To use an image as a link, just put the tag inside the tag:

Example

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

Example

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

Tip: Learn more about JavaScript in our JavaScript Tutorial.

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Источник