HTML links and anchors

HTML links and anchors: HTML provides useful ways to link to other documents, URLs, images etc. The most convenient way to link to another page would be to use an anchor e.g.

<a href= “http://www.studybee.net/html-5-and-html-4-difference-features”> Difference in HTML 5 and HTML 4</a>

In the above code <a href= is the beginning tag while </a> is the ending tag. An anchor requires the following to work:

  1. <a href=
  2. “the URL or web address”
  3. />
  4. The text to show as link e.g. we have “love poetry” as our anchor
  5. </a>

Note: the anchor does not show the URL to the user unless mouse hovers over the anchor text. An example would better illustrate this:

HTML Code for displaying anchor text with URL:

<a href=” http://www.studybee.net/difference-between-html-4-and-5″/>Difference in HTML 5 and HTML 4</a>

Though the browser does not show the link to the website page yet browsers, generally, tend to change the anchor text color to purple or blue. The anchor text is also marked as underlined. However, a web developer has the convenience of changing the style, color and look of an anchor text either through inline styling or by using CSS i.e. Cascading Style Sheets.

Default rendering  and output of anchor text code by browsers:

Difference in HTML 5 and HTML 4

It is interesting to note that our hyperlink or anchor was actually the URL: http://www.studybee.net/html-5-and-html-4-difference-features but what our user sees is the anchor text: “Difference in HTML 5 and HTML 4”.

Handling of Anchors in HTML:

We have different options to handle HTML links or anchors i.e. we can make them behave as we desire in any of the following manners:

  1. Target= “_blank”: This would open the link or hyperlink in a new tab or window.
  2. If we don’t define ‘target=“_blank”’, the HTML link will open the new page in the same window or tab.

Example HTML code redirect users to a new tab or window when they click the anchor text or link:

 <a href=” http://www.studybee.net/html-layout-basic-tags-with-elements/” target=”_blank”/>HTML Basic Layout</a>

Sample HTML code for opening the new page without change of tab or window:

 <a href=” http://www.studybee.net/history-of-html-4-and-html-5/” target=”_blank”/>History of HTML 5</a>

——————————————————————————————————————————————————

Leave a Reply