HTML Links.

Links are what make the web a 'web'. They connect different pages, files, or even sections within the same page.

The Essentials

The <a> (anchor) tag is used to create a link.

The 'href' attribute specifies the destination (URL or path).

Links can point to external websites, local files, or email addresses.

The 'target' attribute determines where the link opens (e.g., _blank for a new tab).

Images can also be turned into links by wrapping them in an <a> tag.

Links can be used to navigate to specific IDs within the same page.

Professional Insights

Absolute vs Relative URLs

Absolute URLs (starting with http://) point to external sites. Relative URLs (like '/contact') point to pages within your own website, which is better for portability.

Link Titles and Tooltips

The 'title' attribute provides extra information that appears as a tooltip when a user hovers over the link. This improves UX and accessibility.

Opening in New Tabs Safely

When using target='_blank', always add rel='noopener noreferrer'. This prevents the new page from accessing your window object, which is a common security risk.

Descriptive Link Text

Avoid using 'Click Here' or 'Read More'. Descriptive text like 'Download our HTML Guide' is better for SEO and helps screen reader users understand the link's purpose.

Critical Pitfalls

Forgetting the http:// or https:// in external links, causing them to break.

Using non-descriptive text like 'here' which provides zero context for accessibility tools.

Leaving the 'href' attribute empty or using '#' excessively without a real destination.

Not checking for 'broken links' which negatively impacts user trust and SEO rankings.

Interactive Lab

Sprint Tasks

Create a link to 'https://google.com' that opens in a new tab

Add the text 'Search Google' to the link

Add a safety 'rel' attribute for the new tab

Loading editor...

Production Preview