HTML Links
HTML Links are clickable text or images on a web page. When the user clicks a link they will be taken to a new page. Links can be found in almost all web pages and they are represented by using the <a></a> tag. Take a look at the following example below:
<a href="https://devdojo.com>Visit DevDojo</a>
The code above will display a text link that says Visit DevDojo and once a user clicks on that link they will be taken to the DevDojo homepage. Take a look at another link example below:
<a href="https://devdojo.com" target="_blank">Visit DevDojo</a>
The code above will display the same as the first link; however, when the user clicks on the Visit DevDojo link, a new tab will open to the DevDojo homepage. By specifying the target attribute we can specify where we want the link to be opened. In the example above we specified that we want it to be open in a new tab by specifying target="_blank". Here's an example of how the code above will be displayed:
Visit DevDojo Link in a New Tab
There are 4 common targets that are used when displaying a link, you can take a look at each of the targets and the description below:
| Target | Description |
|---|---|
| _self | The _self value will open the current link in the same window (this is default when no target is specified) |
| _blank | The _blank value will open a link in a new tab |
| _parent | The _parent will open the link in the parent window. An iframe will open this link in the window above itself. |
| _top | The _top will open the link in the top parent window. An iframe will open this link in the current document. |
The _parent and the _top are not used too often. Just remember if you want to open a link in the same document, then don't even worry about including a target; otherwise, if you want a link to open in a new tab include the target="_blank" attribute and value.
Image Links
Image links will have the same functionality as the links above except they will wrap an image. Take a look at the following code example:
<a href="https://devdojo.com">
<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png">
</a>
The code above will have the following result:
HTML Image Link
So, you can see how easy it is to use links and link images. Now, that you got a feel for how to add an image to your page. Let's move on to the next section and talk more about HTML Images.