HTML: Learn How to code Links

HTML: Learn How to code Links

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • HTML
  • 3 mins read

Most of the web pages contain links that go to other web pages or web resources. To code a link in HTML use the <a> element (or anchor element). Because this element is an inline element, you usually code it within a block element like <p> element. In this HTML tutorial, you'll learn how to code links.

HTML Link Attribute of <a> Element

AttributeDescription
hrefSpecifies a relative or absolute URL for a link.

Notes on HTML Link Element

  • The content of a link should be a text that clearly indicates where the link is going.
  • The <a> element is an inline element that creates a link that loads another web page. The href attribute of this element identifies the page to be loaded.
  • The text content of a link is underlined by default to indicate that it's clickable.
  • If a link hasn't been visited, it will display in blue. If it has been visited, it will display in purple. You can change these values using CSS.
  • If the mouse hovers over a link, the cursor is changed to a hand with the finger pointed as shown above in the featured image of this article.

Examples

<html lang="en">

<body>
    <h1>HTML Links</h1>
    <h2>A link to a web page in the same folder</h2>
	<p>Click to view our <a href="items">Item List</a></p>
	
	<h2>A link to a web page in a subfolder of the parent folder.</h2>
	<p>We give the following <a href="../company/servies">Services</a></p>
	
	<h2>A link to a web page based on the root folder</h2>
	<p>View our <a href="orders/cart">Shopping Cart</a></p>
	
	<h2>A link to a web page at another web site.</h2>
	<p>Learn more <a href="https://www.vinish.ai/">Fox Infotech</a></p>
	
</body>

</html>

Output

As shown in the featured image.

See also: