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.

Источник

Make headings into link targets

This page discusses how to turn a heading into a link target by using an id attribute. For more information about how to format headings, see Headings and titles.

In some content management systems, anchors are automatically created for headings. However, you might want to add a custom anchor to a heading for several reasons:

• You want to use an anchor that’s shorter than the automatically generated anchor.
• You want to use an anchor for content that might be frequently linked to. Adding a custom anchor reduces the likelihood of breaking existing links if the heading text changes later.
• You want to revise a heading. If the anchor for the heading is generated automatically, then the anchor changes when you revise the heading, breaking existing links.

Add a custom anchor

HTML

To add an anchor to a heading in HTML, add a element with an id attribute. Don’t use . Use lowercase for id values, and put hyphens between words.

 
Introduction to everything
 .
 

Introduction to everything
 

Introduction to everything
 

Introduction to everything
 

Markdown

To add an anchor to a heading in Markdown, add the following code to the end of the line that the heading is on. Replace ID_OF_ANCHOR with the ID for this heading. Use lowercase for id values, and put hyphens between words.

## Help conserve habitat for pollinators
## Help conserve habitat for pollinators
## Help conserve habitat for pollinators
## Help conserve habitat for pollinators

Revise a heading

If you revise a heading in a content management system where anchors are automatically created, you can create a custom anchor to avoid breaking existing links. If the heading already has a custom anchor, don’t change the anchor unless it contains a term that you want to remove (such as a disrespectful term).

To create the custom anchor, use the older ID string for the heading. You can find the ID string by inspecting the heading on the published page. For example, if you change a heading from Introduction to some things to Introduction to everything, then add a custom anchor that uses the older ID string and formatting.

HTML

 
Introduction to everything
 .
 

Markdown

## Introduction to everything

If you need to change an existing custom anchor, you should check your content management system to update any links that use the old anchor. Inbound links that use the old anchor still reach the page but not the specific section or heading.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-06-20 UTC.

Источник

Lesson 8: Links

In this lesson, you will learn how to make links between pages.

What do I need to make a link?

To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:

Example 1:

Would look like this in the browser:

The element a stands for «anchor». And the attribute href is short for «hypertext reference», which specifies where the link leads to — typically an address on the internet or a file name.

What about links between my own pages?

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:

Example 2:

If page 2 were placed in a subfolder (named «subfolder»), the link could look like this:

Example 3:

The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:

Example 4:

«../» points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing «../../».

Did you understand the system? Alternatively, you can always type the complete address for the file (URL).

What about internal links within a page?

You can also create internal links within a page — for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol «#».

Use the id attribute to mark the element to which you want to link. For example:

You can now create a link to that element by using «#» in the link attribute. The «#» must be followed by the id of the tag you want to link to. For example:

All will become clear with an example:

Example 5:

   
Link to heading 1
 
Link to heading 2
 
heading 1
 
Text text text text
 
heading 2
 
Text text text text
    

will look like this in the browser (click on the two links):

Heading 1

Heading 2

(Note: An id attribute must start with a letter)

Can I link to anything else?

You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document:

Example 6:

will look like this in the browser:

The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto: followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. Please note that this function will only work if there is an e-mail program installed on your computer. Give it a try!

Are there any other attributes I should know of?

To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:

Example 7:

Would look like this in the browser:

The title attribute is used to type a short description of the link. If you — without clicking — place the cursor over the link, you will see the text «Visit HTML.net and learn HTML» appears.

Источник