# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codingzonebd.gitbook.io/html-elements/html-links.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.