Download Article
Learn how to code hyperlinks in HTML in a flash
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> .
Steps
Section 1 of 3:
Creating a Basic HTML Link
Download Article
-
Open a new document in a simple text editor. You can use Notepad or Notepad++ on Windows, or TextEdit on a Mac. You can also use any HTML editor that you prefer.
-
Create your HTML document. 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 -
Add the link to your document. 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.
-
Insert the link into the HTML. Copy the URL that you want to link to, and add it between the quotation marks in your code.
-
Insert the link text into the HTML. 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 >
- 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:
-
Save your HTML file. 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.
-
Preview your site. 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.
Advertisement
Section 3 of 3:
Styling Links With CSS
Download Article
-
Understand what CSS is. 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.
-
Add style tags to your document. 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 >
-
Add the hyperlink selector to your CSS. 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 { }
- Between the
-
Add properties to style your link. 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 : }
- There are tons and tons of CSS selectors that you can use, but for this link we're going to change the color (
-
Add values to your CSS properties. 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
#FF0000to 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.
-
Test your webpage. 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
aselector. 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.
-
- 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
Advertisement
Community Q&A
Search
-
QuestionHow would I link multiple webpages?Community AnswerCreate 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.
-
QuestionHow do I create a hyperlink on a given text using a notepad to go to the top of the page?Community AnswerPut 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.
-
QuestionHow do I specify that a link will be opened in a new tab or window?Community AnswerYou can right click the link.
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 - 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 becausehttpandhttpsare URI schemes, alongsidemailtoandtel.Thanks - 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
Submit a Tip
All tip submissions are carefully reviewed before being published
Thanks for submitting a tip for review!
Advertisement
Video
About This Article
Thanks to all authors for creating a page that has been read 353,832 times.
Advertisement
