HTML Introduction | Basic HTML Elements | HTML Links

Tags:

Web pages contain many hyperlinks that connect to other pages or other sites. These hyperlinks are often simply called links, and in HTML they are represented with the <a> tag. The “a” means Anchor.

Syntax

<a href="Link URL">Link title</a>

The following example moves to another page when clicked.

<a href="//www.devkuma.com">DevKuma</a>

Run code

target attribute

Attribute value Description
_blank Opens the linked document in a new window or new tab.
_self Opens the linked document in the current frame. This is the default.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the topmost frame of the current window.
frame Opens the linked document in the specified frame name.

Example

<div><a href="/books/5" target="_blank">_blank</a></div>
<div><a href="/books/5" target="_self">_self</a></div>
<div><a href="/books/5" target="_parent">_parent</a></div>
<div><a href="/books/5" target="_top">_top</a></div>
<div><a href="/books/5" target="myframe">frame</a></div>
 
<iframe name="myframe" style="width:50%; height: 100%"></iframe>

Run code

HTML links have the following four states.

State Description
link A state that has not been visited yet. This is the default.
visited A state that has been visited at least once.
hover A state where the mouse pointer is placed over the link.
active A state where the link is being pressed with the mouse.

In a web browser, the text color of linked text is as follows.

  • By default, linked text is underlined and its text color changes to blue.
  • A visited link is underlined and its text color changes to purple.
  • An active link is underlined and its text color changes to red.
 <style>
        a:link    { color: blue; }
        a:visited { color: green; }
        a:hover   { color: yellow; }
        a:active  { color: red; }
</style>

Run code

Page bookmarks

You can create a simple bookmark by using the name attribute of the <a> tag. First, create an <a> tag at the location you want to move to through the bookmark and write the name attribute. Then use the value of that name attribute to create a link from another <a> tag.

<a href="#bookmark25">Go to heading 25</a>
...
<h2><a name="bookmark25">Heading 25</a><h2>

Run code