Links

Hyperlinks

The <a> tag defines a hyperlink. Using the href attribute we can assign the link's destination

Target Attribute

The title attribute determines where the link is opened

Target value can be:

• _self - Opens in same window/tab
  Example
• _blank - Opens in new window or tab
  Example
• _parent - Opens in the parent frame
  Example
• _top - Opens in the full body of the window
  Example

Link States / Pseudoclasses

• :link

  Default state. Not been visited, or clicked or interacted with yet.

• :visited

  Link has already been visited

• :hover

  Mouse cursor is hovering over link

• :focus

  Link is focused. Like as in if we pressed tab to select the element.

• :active

  State while being activated, aka while left mouse being held

Absolute vs. Relative URLs

Absolute

Contains the full web address. Example: https://www.example.com

Relative

Contains a LOCAL link - Same website. Example: /lessons/html/links.html

Image as a Link

To use an image, put the img element inside the anchor element.

Link to Email

Within the href attribute, we can use "mailto:" to make the link open the user's email program to send a new email

Example: <a href="mailto:someone@example.com">Send Email</a>
=> Send Email

Button as a Link

Buttons are a bit different. We have to use Javascript to make a button redirect on click.

We do this using the onclick attribute.

Example: <button onclick="document.location='https://example.com'">Button Link</button>

Link to Download a File

We can use the download attribute to specify the filename of the file to be downloaded.

Example: <a href="file.pdf" download="file.pdf">Download File</a>

Note: The download attribute is a boolean attribute. It does not need a value.

Link to a Specific Part of the Same Page

We can use the href attribute to link to a specific part of the same page.

The way we link to a specific part of the same page is by using the id attribute of the element we want to link to.

Example: <a href="#section1">Section 1</a>

Note: One cool thing we can do is use CSS to make this redirect happen smoothly. In CSS, we can use the selector html to target the HTML element and use the scroll-behavior property to make the scroll happen smoothly.