<a>

The HTML <a> element defines hyperlinks, enabling navigation to external webpages, resources, or sections within the same document, using attributes like href, target, and rel.

a tag

The HTML <a> tag (anchor tag) is a fundamental element for creating hyperlinks. It enables text or images to become clickable, directing users to external sites, internal sections, or downloadable files. The href attribute specifies the destination, while attributes like target control how the link opens.

Syntax

index.html

<a href="...">Content...</a>

Using an image as a link

index.html

<a href="https://institute.qarpeo.com">
  <img border="0" alt="Qarpeo" src="logo_w3s.gif" width="100" height="100">
</a>

Opening a link in a new browser window

Visit https://institute.qarpeo.com

index.html

<a href="https://institute.qarpeo.com" target="_blank">Visit https://institute.qarpeo.com</a>

Linking to an email address

Send email

index.html

<a href="mailto:[email protected]">Send email</a>

Linking to a phone number

+47 333 78 901

index.html

<a href="tel:+4733378901">+47 333 78 901</a>

Navigating to another section on the same page

Go to Section 2

index.html

<a href="#section2">Go to Section 2</a>

Executing JavaScript via a link

Execute JavaScript

index.html

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

If the <a> tag lacks an href attribute, it serves as a placeholder for a hyperlink.

Overview and Function

The <a> element enables navigation within or outside a webpage. Its key attribute, href, determines the link destination.

Default styles for links in most browsers:
Unvisited links appear blue and underlined.
Visited links appear purple and underlined.
Active links (when clicked) appear red and underlined.

If an <a> element lacks an href attribute, it does not function as a hyperlink but can still be styled and used in scripts.

Attributes

Attribute	Value	Description
`download`	filename	Enables file downloads when the link is clicked.
`href`	URL	Specifies the hyperlink's destination.
`hreflang`	language_code	Indicates the language of the linked resource.
`media`	media_query	Defines the media type or conditions for the link.
`ping`	list_of_URLs	Sends a request to listed URLs when the link is clicked, typically for tracking.
`referrerpolicy`	`no-referrer` `no-referrer-when-downgrade` `origin` `origin-when-cross-origin` `same-origin` `strict-origin-when-cross-origin` `unsafe-url`	Controls referrer information sent with link requests.
`rel`	`alternate` `author` `bookmark` `external` `help` `license` `next` `nofollow` `noreferrer` `noopener` `prev` `search` `tag`	Defines the relationship between the current and linked pages.
`target`	`_blank` `_parent` `_self` `_top`	Specifies how the linked page will open.
`type`	media_type	Specifies the content type of the linked document.

Conclusion

The <a> tag is an essential HTML element for navigation. With attributes like href, target, and download, it enables linking to web pages, downloadable resources, and interactive actions such as phone calls and JavaScript execution. This makes it a key tool for structuring content and user interactions on the web.

Typography

HTML typography shapes text for readability, structure, and accessibility using elements like headings, paragraphs, quotes, and code, with some enhancing SEO and styling.CSS further customizes fonts, sizes, spacing, and alignment, creating visually appealing and responsive content.

<abbr>

The <abbr> tag is used to represent an abbreviated version of a longer word or phrase.