Code a Hyperlink with HTML: A Beginner's How-To Guide

PDF download Download Article
Learn how to code hyperlinks in HTML in a flash
PDF download Download Article

Are you trying to code a link into your HTML document? Links in HTML are called hyperlinks, because they directly jump you to a new document (or page). While some aspects of HTML take a little bit of time to grasp, coding hyperlinks is pretty easy. Keep reading to learn more.

Ways to Use HTML to Make Hyperlinks

  • Write <a href="https://www.wikihow.com">Learn how to do anything</a> for a basic hyperlink.
  • To make a link out of an image, write <a href="https://www.wikihow.com"><img src="https://www.imagehost.com/button.png"></a> .
  • If you want your link to open in a new tab, write <a href="https://www.wikihow.com" target="_blank">Learn how to do anything</a> .
Section 1 of 3:

Creating a Basic HTML Link

PDF download Download Article
  1. You can use Notepad or Notepad++ on Windows, or TextEdit on a Mac. You can also use any HTML editor that you prefer.
  2. All HTML documents should be formatted with the same tags to create the document, head, and body. Below is the basic structure of an HTML document and is required for all web pages. 
     < 
 html 
 > 
 < 
 head 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Advertisement
  3. The link should go somewhere in the head or body of your document. Begin your link by typing both the starting and end tags. Type out <a href=" "> followed by </a> .
    • This is also called an anchor tag, which is what the "a" represents.
  4. Copy the URL that you want to link to, and add it between the quotation marks in your code.
  5. This text is what users will click on to follow the link. Insert this text between the two tags (tags are code enclosed in brackets).
    • Example: If you wanted to link to wikiHow with the text "Learn how to do anything" as the link, your link should look like this: 
       < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 > 
Learn how to do anything </ 
 a 
 >
  6. To preview in most cases, you'll have to save the file and open the file later. Make sure to save your file with an .HTML file extension.
  7. Simply open the HTML file in a web browser to see what your site looks like. You can also try clicking the link to make sure it works and directs you to the page you want it to go to.
    8. Advertisement
Section 2 of 3:

More Link Types & Examples

PDF download Download Article
  1. Instead of using text as a link, you can use an image instead. Making an image link is the same format as making a text link, but instead of writing text between the <a></a> tags, you'll include an image tag.
    • Images are added using the <img> tag. If you don't have your own server to upload images, you'll need to upload them to an image hosting site, and then use that URL in the <img> tag. If you are using an image hosting site to upload a file called "button.png", the <img> tag might look like this: 
       < 
 img 
 src 
 = 
 "https://www.imagehost.com/button.png" 
 >
      • If your site is hosted on the same server as your images, you can reference the images without needing the full URL. If the "button.png" is uploaded to a directory called "images" in your server, the <img> tag might look like this: 
         < 
 img 
 src 
 = 
 "/images/button.png" 
 >
    • Example: If you wanted to link to wikiHow with the image URL from above as the link, your link should look like this: 
       < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 >< 
 img 
 src 
 = 
 "https://www.imagehost.com/button.png" 
 ></ 
 a 
 >
  2. By default, when you click on a hyperlink it will open in the same tab that you're in. This is okay if you're staying within the same webpage, but if you're linking to an external webpage, overriding the current tab with the link destination might be frustrating to users. This is easily fixed with the "target" attribute for the <a></a> tag.
    • Example: To link to wikiHow with the text "Learn to do anything," but the link opens in a new tab, add the target="_blank" attribute to your link, like this: 
       < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 target 
 = 
 "_blank" 
 > 
Learn to do anything </ 
 a 
 >
  3. While hyperlinks usually link to website URLs, you can also add a hyperlink that, when clicked or tapped, will open up a new email to an email address or start a phone call to a telephone number.
    • To create a link to an email, you will use a mailto: link. Likewise, to create a link to a telephone number, you'll use a tel: link. Below are examples of what a mailto: or tel: link look like:
      • mailto:email@domain.com
      • tel:+5551234567
    • Example: Use the mailto: or tel: link in place of a URL in your <a></a> tag, like this: 
       < 
 a 
 href 
 = 
 "mailto:email@domain.com" 
 > 
Email email@domain.com </ 
 a 
 > 

       < 
 a 
 href 
 = 
 "tel:+5551234567" 
 > 
Call 555-123-4567 </ 
 a 
 >
    4. Advertisement
Section 3 of 3:

Styling Links With CSS

PDF download Download Article
  1. On its own, HTML can be a little plain. This is where CSS (Cascading Style Sheets) comes in—CSS is a markup language that can change how HTML elements look. While you can get very in-depth with CSS, we're just going to cover some CSS basics in this section.
  2. CSS only works when you write it between <style></style> tags. These tags can go directly in your HTML document's head. Your HTML document, including a link, should look something like this now: 
     < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 > 
Learn how to do anything </ 
 a 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  3. When writing CSS, you must use a selector to tell the webpage what elements you're trying to style. Most of the time, these selectors are the same as the HTML tag—so, the selector for a hyperlink is a .
    • Between the <style></style> tags, write the following: 
       a 
 { 
 }
  4. Basic CSS involves writing property/value pairs in between curly braces after the selector. What this essentially tells the browser is that every element with that selector on the page should be displayed with the styling between the curly braces.
    • There are tons and tons of CSS selectors that you can use, but for this link we're going to change the color ( color ), font ( font-family ), and size ( font-size ). We're also going to remove the underline ( text-decoration ) that is default under all hyperlinks.
    • After adding the values, your CSS code should look like this: 
       a 
 { 
 color 
 : 
 font-family 
 : 
 font-size 
 : 
 text 
 - 
 decoration 
 : 
 }
  5. As stated above, CSS uses property/value pairs to style elements. Now that you've got your properties added to the code, you can add values.
    • Normally, you'd write properties and values at the same time, but for the sake of going over the basics, we've split them into two steps. Once you get comfortable with CSS, you can write properties and values one after the other.
    • If you wanted to make the links on your page red, 12px Arial font without an underline, you'd write the following: 
       a 
 { 
 color 
 : 
 red 
 ; 
 font-family 
 : 
 arial 
 , 
 sans-serif 
 ; 
 font-size 
 : 
 12 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 }
      • Always end each property/value pair with a semicolon (;). This separates each CSS rule so the browser can read them properly.
      • You can use color names in CSS (such as red, blue, yellow, etc.) but hex codes are more precise. In the example, you could replace red with #FF0000 to get the same color.
      • When adding a font family in CSS, always include a fallback. Not every computer will be able to display every font. All of the font fallbacks in CSS are serif , sans-serif , monospace , cursive , and fantasy . In the example, we used the sans-serif fallback because Arial is a sans-serif font.
  6. The only way to see your CSS in action is to test your webpage. If you don't like the style you've created, simply go back to the CSS and tweak it. Your final HTML code with the CSS styling should look like this: 
     < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 a 
 { 
 color 
 : 
 red 
 ; 
 font-family 
 : 
 arial 
 , 
 sans-serif 
 ; 
 font-size 
 : 
 12 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 > 
Learn how to do anything </ 
 a 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • If you prefer, CSS allows you to write CSS for each link state: unvisited, visited, active, and hovered. You can use any number of these link state selectors in place of or alongside the a selector. The selectors for these states are as follows:
      • a:link : A link the user has never clicked before. By default, these links are blue and underlined.
      • a:visited : A link the user has clicked before. By default, these links are purple and underlined.
      • a:active : A link that's been clicked and is in the process of loading. As Internet connections are faster today, you might not have noticed any "active" link styling. By default, these links are red and underlined.
      • a:hover : A link that you are hovering over with your cursor, but haven't clicked. There is no default styling for this link state.
    7. Advertisement

Community Q&A

Search
Add New Question
  • Question
    How would I link multiple webpages?
    Community Answer
    Create the different links following the process above. Recognize the names of each file you create, and type them into the appropriate document, ensuring you don't link the same page to the page where it's been called into action (a file called page1.html can't be linked to page1.html, but page1.html can be linked to page2.html) and still be a worthy link.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 16 Helpful 26
  • Question
    How do I create a hyperlink on a given text using a notepad to go to the top of the page?
    Community Answer
    Put the hyperlink on a text or image and then in the command put this code: < a href="The name of the current page " >. When the person clicks on it, the page reloads and opens the current page again, and the page is opened at the top.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 15 Helpful 26
  • Question
    How do I specify that a link will be opened in a new tab or window?
    Community Answer
    You can right click the link.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 41 Helpful 13
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • When adding an <img> tag, the "src" attribute is required so the image tag has an image source to display. However, the "alt" attribute is also technically required for HTML code validation and accessibility. The "alt" attribute displays text in place of an image if it cannot load, and is also used by screen readers to explain what an image is to users with visual impairments. Best practice is to include an "alt" attribute for every <img> tag you have.
        Thanks
        Helpful 0 Not Helpful 0
      • The reason mailto: , tel: , and URLs can all be used as links in a <a></a> tag is because they are all URIs (uniform resource identifiers). Technically, a URL (uniform resource locator) is a URI because http and https are URI schemes, alongside mailto and tel .
        Thanks
        Helpful 0 Not Helpful 0
      • Removing the underline under a hyperlink with CSS is a common stylistic choice, but always make sure the link is distinct from the rest of your text in some way. The most common way to do this is by making the link a drastically different color. For example, most text on wikiHow is dark gray, but the hyperlinks are green.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Video

      You Might Also Like

      How to
      Link Within a Page Using HTML
      How to
      Make Text Blink in HTML: Easy Tutorial
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      Advertisement

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 360,616 times.

      Is this article up to date?

      Advertisement