> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-links.md).

# HTML Links

### HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

**Note:** A link does not have to be text. A link can be an image or any other HTML element!

### HTML Links - Syntax

The HTML `<a>` tag defines a hyperlink. It has the following syntax:

{% code overflow="wrap" lineNumbers="true" %}

```html
<a href="url">link text</a>
<a href="https://www.google.com/">Visit Google.com!</a>
```

{% endcode %}

### HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The `target` attribute specifies where to open the linked document.

The `target` attribute can have one of the following values:

* `_self` - Default. Opens the document in the same window/tab as it was clicked
* `_blank` - Opens the document in a new window or tab
* `_parent` - Opens the document in the parent frame
* `_top` - Opens the document in the full body of the window

{% code overflow="wrap" lineNumbers="true" %}

```html
<a href="https://www.google.com/" target="_self">Visit google!</a>
<a href="https://www.google.com/" target="_blank">Visit google!</a>
<a href="https://www.google.com/" target="_parent">Visit google!</a>
<a href="https://www.google.com/" target="_top">Visit google!</a>
```

{% endcode %}

### HTML Link Colors

By default, a link will appear like this (in all browsers):

* An unvisited link is underlined and blue
* A visited link is underlined and purple
* An active link is underlined and red

You can change the link state colors, by using CSS:

{% code overflow="wrap" lineNumbers="true" %}

```html
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
```

{% endcode %}

### Link Buttons

A link can also be styled as a button, by using CSS:

{% code overflow="wrap" lineNumbers="true" %}

```html
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
```

{% endcode %}

### Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

### Example

First, use the `id` attribute to create a bookmark:

{% code overflow="wrap" lineNumbers="true" %}

```html
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a>
```

{% endcode %}