Creating Links

Links are the foundation of the web, connecting pages and resources. The anchor element <a> creates hyperlinks.

Basic Links

The href attribute specifies the link destination:

• Absolute URL: https://www.example.com
• Relative URL: /about or page.html

Link Attributes

Common attributes:

• href - The destination URL
• target="_blank" - Opens in new tab
• title - Tooltip text on hover
• download - Downloads instead of navigating

Security with External Links

Always add rel="noopener noreferrer" when using target="_blank":

• noopener - Prevents the new page from accessing the original page
• noreferrer - Doesn't send referrer information

Link Text Best Practices

Good link text:

• Describes the destination
• Makes sense out of context
• Avoids "click here" or "read more"
• Helps screen reader users

Styling Links

Links have different states that can be styled:

Link states:

• :link - Unvisited links
• :visited - Already visited
• :hover - Mouse over
• :active - Being clicked

Exercise: Create a Navigation

Build a simple navigation with links:

Links connect the web together. Writing good, accessible links improves user experience and SEO!