It’s that easy to insert an HTML link that leads to another website. External, anchor, mailto – all links simply explained.

You are watching : Add URL link in HTML

Insert HTML link with a href

Using HTML code, you can insert a link. With the HTML tag <a href> start the link text and close it with </a>.

It’s that easy to insert an HTML link and link content:

Insert HTML link with a href

Create HTML link: How to link correctly

Creating a link is technically very simple. However, it is much more difficult to set links in a website in a standard-compliant and thus correct manner. This is the only way that the links to the individual pages, sections, folders or external websites always work as desired and are also very user-friendly.

In the following, therefore, some basic rules for standard-compliant, correct links are shown:

HTML Link mailto: Link email address

If you want to link an email address on your website, extend the HTML link with mailto:

Example: <a href=”mailto:dange@schulhomepage.de”>dange@schulhomepage.de</a>

So to create a mailto link you need to include the <a> with its href attribute followed by a “mailto:”.

If a visitor clicks on this e-mail link, the standard program opens directly, e.g. B. Outlook, with which the visitor manages his e-mails. In the standard program, the e-mail address after “mailto” is automatically entered as the recipient.

Alternatively, a visitor can copy the e-mail address on a computer with a right mouse click and paste it as a recipient in his e-mail program. A mobile user can also copy the link by long-pressing on the mailto link.

HTML Anchor Tag: Link to a section with an anchor

For long texts, it makes sense, e.g. B. to link from a table of contents to a subsection. You can do this very easily with a jump label (anchor):

For example, if you For example, if you want to link to the heading of a section in a table of contents, first specify an ID (anchor name) in the heading:

<h2 id="chapter2">Chapter 2: Creating a link with HTML</h2>

Then create a link in the table of contents pointing to the ID (anchor name):

<a href="#chapter2">Create a link using HTML</h2>

This code links the text “Create a link with HTML” in the Table of Contents directly to “Chapter 2: Create a link with HTML”.

HTML img link: create a link with an image

To set an image link to a subpage, write e.g. B. this HTML code:

<a href="https://www.schulhomepage.de"><img src="/bild.jpg" alt="image link"></a>< /code>

The code is basically the same as for a text link, except that instead of the text such as B. "Schulhomepage.de" a code is used to display the image:

<img src="/image.jpg" alt="Link to image">

If you click on the image "bild.jpg" in this link, the page that you specified after "a href" will be called up. In this example, this is https://www.schulhomepage.de.

Insert HTML link to new tab or window

If you place a hyperlink to an external website such as B. set de.wikipedia.org, you should make it clear to your visitor that he is now leaving your website. For this purpose, the external page is opened in a new tab or new window. You can do this very easily with the addition target="_blank". This looks then overall with a text link z. For example:

<a href="https://de.wikipedia.org" target="_blank">https://de.wikipedia.org</a>

The code "target=_blank" opens the link in either a new tab or a new window, depending on your browser settings. The link target is thus defined.

HTML Link style: Design the link with CSS

You can style an HTML link almost anything you like with a CSS stylesheet. Every website has a CSS file in which the appearance of the individual website elements can be adjusted.

Example code for integrating a CSS Style file into a HTML document:

<head><link rel="stylesheet" href="style.css"></head>

In the style.css file you can design your link as you wish. For example, you can change the link color, whether the link is underlined, or the background color of the link. Examples:

a {color: red; text-decoration: underline; } // Links are red in color and underlined
a:visited {color: green; text-decoration: underline;} // visited links are underlined and colored green
a:hover {color: blue; text-decoration: none;} // Links to which the mouse hovers are colored blue and have no underlining
a:active {color: black; background-color: lightgreen;} // Links that are currently clicked on get the color black and the background color is light green

More examples of how to design HTML links with CSS style.

HTML Link color: color the link

By default, a link in any browser has these colors:

  • unvisited link: blue
  • visited link: purple
  • active ("just clicked") link: red

Each website has an integrated style sheet. Example:

<head><link rel="stylesheet" href="style.css"></head>

You can customize the colors of the link in the style.css style sheet. Example:

a {color: green;} //normal link: green
a:visited {color: pink;} //visited link: pink
a:hover {color: red;} // Link the mouse is pointing to: red
a:active {color: yellow;} //active ("just clicked") link: yellow

The colors of the shortcut will change like this:

  • normal link: green
  • visited link: pink
  • Link to which the mouse is pointing: red
  • active ("just clicked") link: yellow

HTML link to local directory

Specify a hyperlink to a local directory on your computer like this:

<a href="file://C:/">Link to disk C</a>

You can easily test this link to a local directory by:

  1. Highlight and copy the code above.
  2. Start the file manager in Windows.
  3. Copy the code into the address bar and press "Enter".

As a result, all directories on hard disk C are displayed.

Please note that this link with file://C:/ only works with a local hyperlink to a folder or directory on your computer. A link to a website directory works without file://C:/.

Absolute and relative paths - domain

If you set links within your website, you do not always have to enter the full link address with the domain.

Absolute path with domain

Example:

<a href="https://www.schulhomepage.de/seite1.html">Example link</a>

Relative path without domain

You can simply omit the domain "https://www.schulhomepage.de". Instead, just write a "/". The short form then looks like this:

<a href="/page1.html">Example link</a>

Warning: This only works for internal links within your website with the same domain! There can also be problems with some websites due to different server settings, so you should definitely try this before you set all internal links like this.

Link directory or folder

Once you have multiple pages on your website, you will eventually start using folders and directories (folder) to create. Be sure to put an index page in each folder: index.html. This means that every visitor can see the content of index.html when they call up the folder. Do not set a link to the folder to the index page (e.g. index.html), only to the folder itself. Example:

<a href="/webdesign/" >Link to web design directory</a>

It is important for the link that there is always or never a "/" at the end. It doesn't matter whether you always put the "/" or not, you just always have to do it the same way so that a search engine like Google only lists the directories once and not twice in their search results. Otherwise the search engine does not know exactly which directory is the right one: with or without "/"?

With "www" and without "www"

Decide whether you always want to access your website with "www" or without it. Example: Schulhomepage.de can be accessed with and without "www": 1. By accessing "www.schulhomepage.de" and 2. by accessing "schulhomepage.de". So that a search engine does not see these pages as two different ones, each call is forwarded to "www.schulhomepage.de". Because: Most visitors do not use the "www" in front of the Internet address and save themselves typing the three letters.

Technically, this forwarding is easily implemented. The prerequisite is that your provider/server allows the .htaccess file. If so, please do the following:

Use an editor to create the .htaccess file (without ".txt"!). Write the following in the file:

 RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.mein-domain.de$ [NC]
RewriteRule ^(.*) $ https://meine-domain.de/$1 [R=301,L]

Explanation: This will redirect all requests to www.meine-domain.de (with "www") to https://meine-domain.de (without "www"). All you have to do is replace "meine-domain.de" with your Internet address.

Then save the .htaccess file (without the ".txt" extension!) and place it in the main directory ("root directory") of your website by using an FTP program such as For example, use FileZilla.

Additional Articles

Further articles on link creation and syntax for inserting an HTML link:

Insert HTML link with an editor

With the free HTML editor Notepad++ you can easily insert an HTML link:

1. Download and install the free HTML editor Notepad++. Alternatively, open the less extensive Windows Editor via Start > Windows Accessories > Notepad.

2. Copy this code (highlight and press CTRL+C) and paste it into Notepad++ or Notepad (press CTRL+V):

<!doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>HTML Link</title>
</head>

<body>

</body>
</html>

3. Between the tags <body> and </body> you can now insert different types of HTML links.

a) To insert an internal link:

<a href="https://www.schulhomepage.de">Schulhomepage.de</a>

This code links within a website, such as B. all pages on Schulhomepage.de.

b) To insert an external link:

<a href="https://de.wikipedia.org" target="_blank">https://de.wikipedia.org</a>

This code links from one website to another website, such as B. from Schulhomepage.de to de.wikipedia.org in a new window of your browser to show that a new website is being opened here.

4. Here's how you can test your HTML link:
Save your complete HTML code with the link <a href="https://www.schulhomepage.de">Schulhomepage.de</a> as "testpage.html" and open the file in a browser such as e.g. Chrome or Firefox. If you now get to this website when you click on "Schulhomepage.de", your HTML link works correctly. Or test with the online HTML editor at selfhtml.org

Check HTML with a link validator

Finally, you should always link your code with a HTML validator check. The link validator checks your code for errors that deviate from the specifications of the World Wide Web Consortium (W3C). These errors can cause display problems or security vulnerabilities. The validtor shows you exactly what is wrong in which line. Example: The tag <a> was not closed with </a>. This can cause the following content to be displayed incorrectly.

The best link validator is the link checker from https://validator.w3.org. This great free tool offers these benefits:

  • Link checker from the W3C consortium that defines the standards for HTML
  • External and internal links to other websites are checked
  • Linking of files and images is being tested
  • Anchor links are tested

After the link check, you will receive an overview of all errors and tips on how to easily fix them:

W3C HTML Link checker

This way you always get valid code and your websites work securely and the way you want them to.

Conclusion

Inserting an HTML link and linking it correctly is technically very easy. But always creating correct and compliant links for an entire website is difficult. But the effort is worth it. Because it makes your website more user-friendly and easier to find on a search engine. With a Linkchecker you can check all links on your website.

And if you would like to practice linking correctly: Set an HTML link to Schulhomepage.de:

<a href="https://www.schulhomepage.de">Schulhomepage.de</a>

Thank you very much!

More HTML tips:

  • HTML Editor Online, WYSIWYG, Free: 19 Best HTML Editors Compared
  • HTML simply and understandably explained
  • HTML Validator: 3 Best Tools to Check and Fix HTML and CSS
  • Phase 5 - excellent free HTML editor
  • Bluegriffon - free WYSIWYG HTML editor with preview | Download and Tutorial
  • Link checker: find all broken links for free - 5 best tools

FAQ

What is an HTML link?

An HTML link is a "link" from one website to another website. As soon as a user clicks on it, the new website is called up.
HTML (a standardized specification of characters) is used for this link to function technically correctly. Example:

<a href="file.html">Link text</a>

How to link in HTML?

Example code for Linking in HTML:

<a href="file.html">Link text</a>

How to link to a website?

To link to a website you must include an HTML link.

Example code:

<a href="file.html">Link text</a>

An HTML link is a "link" from one website to another website. As soon as a user clicks on this, the new website is called up.
HTML (a standardized specification of characters) is used for this link to function technically correctly.

How do I point to a local directory?

To point to a local directory, you must begin the link like this: file://

Example code:

<a href="file://C:">Link to disk C</a>

How do I insert a link to a new tab?

You can easily add a link to a new tab like this:

Example code:

<a href="Link target" target="_blank">Link text</a>

Once a user clicks on a link with "target=_blank", the website will be opened in a new tab.

What is an external link?

An external link is a reference from a website to a page outside your own domain (e.g. schulhomepage.de). Example: At www.schulhomepage.de/seite1 there is an external link to de.wikipedia.org. If the link were to www.schulhomepage.de/interner-link, it would be internal because it points to the same domain.

How do I link an email address?

An e-mail address is linked using the HTML code mailto. Example: a href="mailto:dange@schulhomepage.de" Clicking on an e-mail address linked to mailto calls the user's default e-mail program, such as Outlook.

What is a href?

A href is a piece of HTML code used to link websites.

Example code:

<a href="Link target">Link text</a>


See more information related to the topic Add URL link in HTML

HTML5 & CSS3 - Beginners Tutorial - Part 11 - [ HTML URL Links Tutorial ]

alt

  • Author: DCP Web Designers
  • Post date: 2019-01-11
  • Ratings: 4 ⭐ ( 9198 Ratings )
  • Match search results: In this video tutorial, I will show you how to add URL links to your website page using HTML5 code.

    Watch Part 1 here: https://youtu.be/L93L8dnYfoY

    Download Google Chrome: https://www.google.com/chrome/

    Download NotePad++ (Windows Users) : https://notepad-plus-plus.org/

    Download Brackets.io (MAC Users) : http://brackets.io/

    What is HTML5

    HTML 5 (formerly spelt HTML5[a]) is a software solution stack that defines the properties and behaviours of web page content by implementing a markup-based pattern to it.

    HTML 5 is the fifth and current major version of the HTML standard and subsumes XHTML. It currently exists in two standardized forms: HTML 5.2 Recommendation[4] by the World Wide Web Consortium (W3C, a broad coalition of organizations), intended primarily for Web content developers; and HTML Living Standard[5] by WHATWG (a small consortium of four browser vendors), intended primarily for browser developers, though it also exists in an abridged Web developer version.[6] There are minor conflicts between the two groups' specifications.

    HTML 5 was first released in a public-facing form on 22 January 2008, with a major update and "W3C Recommendation" status in October 2014.[2][8] Its goals are to improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices such as Web browsers, parsers, etc., without XHTML's rigidity; and to remain backwards-compatible with older software. HTML 5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML;[9] the HTML 4 and XHTML specs were announced as superseded by HTML 5.2 on 27 March 2018.

    Read More: https://en.wikipedia.org/wiki/HTML5

    What is CCS3

    CSS is designed to enable the separation of presentation and content, including layout, colours, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content.

    Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

    The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

    Read More: https://en.wikipedia.org/wiki/Cascading_Style_Sheets

    Subscribe to access 500+ video tutorials: https://www.youtube.com/dcpwebdesigners

    Contact me on:

    Instagram: https://www.instagram.com/dcp_web_designers/
    Facebook: https://www.facebook.com/dcpwebdesigners/
    Pinterest: https://www.pinterest.co.uk/dcpwebdesigners/
    LinkedIn: https://www.linkedin.com/in/dcpwebdesigners/

    HTML5Tutorial HTMLurlLinks dcpweb

    Free tutorials, infographics, articles: https://www.dcpweb.co.uk/blog

    HTML5 Beginners Tutorial, CSS3 Beginners Tutorial, Install Free Website Design Software, CSS3 Beginners Tutorial 2019, HTML5 Beginners Tutorial 2019, HTML5 URL Links Tutorial, HTML URL Links Tutorial, html url link tutorial, html link tutorial, html links tutorial, url links html tutorial, url link html tutorial, html external links tutorial, external html links tutorial, internal html links tutorial, html links - the target attribute, html links on same page

HTML Links Hyperlinks

  • Author: www.w3schools.com
  • Ratings: 4 ⭐ ( 1090 Ratings )
  • Match search results:

HTML Link – How to Insert a Link to a Website with HREF Code

  • Author: www.freecodecamp.org
  • Ratings: 4 ⭐ ( 7373 Ratings )
  • Match search results: A website is made up of of various pieces of information that live in different sections and on different pages within the site itself. You can also find information relating to that site on pages that are on different websites. All these sections and pages are linked together in HTML

How to add hyperlink in the ‘Create HTML table’ Power Automate action

  • Author: tomriha.com
  • Ratings: 4 ⭐ ( 1509 Ratings )
  • Match search results: "I've got all the items in a single HTML table, but I'd like to include also clickable hyperlink to the items, is that doable with Power Automate?"

HTML Links: How to create Links to other Web Pages

  • Author: www.quackit.com
  • Ratings: 3 ⭐ ( 6384 Ratings )
  • Match search results:

How to add Link in Html

  • Author: www.javatpoint.com
  • Ratings: 3 ⭐ ( 8565 Ratings )
  • Match search results: How to add Link in Html with html tutorial, tags, anchor, img, div, entity, textarea, marquee, p tag, heading tag, h1, h2, table, formatting, attribute, elements, ol, ul, Input Types, block element tag, inline element tag, html tags, phrase tag, head, body, form, lists, symbols etc.

How to Add a Hyperlink with HTML

  • Author: www.wikihow.com
  • Ratings: 4 ⭐ ( 5636 Ratings )
  • Match search results: It can be hard to create a hyperlink in HTML, but with this tutorial it will show you how to make a hyperlink in HTML. You'll be able to do it in no time. Open a new document in a simple text editor. Whether it's Notepad or Notepad++ on a...

See more articles in this category: Computer tips

See also  Where to buy Xbox Series X: all the retailers to check for the console - xbox x series in stock