Anchor Tag in Html5 with Examples

Definition of Anchor Tag in Html5

In an HTML document <a></a> tags or anchor tags are used for creating links. These tags are called anchor tags because they can be used as anchors on the page. But this is not in practice in the modern web development any more. They are not anchors any more they are just links. To discuss more about the anchor tags or <a> tags see the code below.

HTML tutorials

Anchor Tag in Html Example/Hyperlink Tag Html5

<!DOCTYPE html>

<html lang=’en’>

<head>

<meta charset=”UTF-8″ />

<title>

HTML Hyperlinks

</title>

</head>

<body>

<p>

To understand more look at this link of <a href=http://howtocode.pk/ target=”_blank”>my home page</a>.

Just the text inside the anchor tags is the part of the link.

</p>

</body>

</html>

Output:

To understand more look at this link of How to code. Just the text inside the anchor tags is the part of the link.

Here in the above code you can see that we are having a paragraph of text. In the text we are using the <a> anchor tag for a link to our home page. As you can see that the text between the anchor tags is displayed in the output. There are two attributes that we are using in this <a> anchor tag. The first is the most important and essential is the “href” attribute. It specifies the URL of the desired page or file in this case it is the home page of howtocode.pk. The next attribute we are using is the target attribute which is in this case telling the browser to open the link in new window.

The anchor tag is an inline tag. It can contain other inline tags as well as the block level tags in it. It means that if you want to make any tag a link simply put it into the anchor or hyperlink tag. To elaborate more we have the following code for you.

HTML Code Example for Anchor tags

<!DOCTYPE html>
<html lang='en'>

<head>

<meta charset=”UTF-8″ />

<title>

HTML Hyperlinks

</title>

</head>

<body>

<a href=http://howtocode.pk/ target=”_blank”>

<h2>Block level elements in the anchor tag</h2>

<p>

To understand more look at this link of my home page.<br />

Just the text inside the anchor tags is the part of the link.

</p>

</a>

</body>

</html>

Output:

In the above output we have made the heading and the paragraph one link to the home page of the howtocode.pk. You can see that the color of the paragraph is changed showing that it is now a link. You can change the style of the link using CSS.

Block level elements in the anchor tag

Comments