iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Links

Links are the original feature of the web. They're created with the <a> (anchor) element and the href attribute.

Where a link can point

KindExample hrefGoes to…
Absolute URLhttps://laravel.com/docsA specific page on any site.
Relative URL/css/colorsA path on the current site.
Fragment#section-2An element on the same page.
Emailmailto:hi@example.comOpens the user's mail client.
Telephonetel:+61400123456Starts a call on mobile.

Where the link opens

target="_self" (default) New page replaces the current tab target="_blank" Opens in a new tab
Fig 1. The target attribute decides where the link opens.
Security note: When using target="_blank", also add rel="noopener". It prevents the new page from being able to control the original tab through window.opener.
Tip: Write meaningful link text. "Read the Laravel docs" is far better for accessibility than "click here".

Example

Example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p><a href="https://laravel.com">Visit Laravel</a></p>

</body>
</html>
Try it Yourself »

Exercise

Open this link in a new browser tab.

<a href="/docs" ="_blank">Docs</a>

Test yourself

Q1. Which element defines a hyperlink?
Q2. Which attribute opens a link in a new tab?
Q3. Which extra attribute should go with target="_blank" for safety?

Discussion

Loading…