Cutup #3 Link <a>

Today, I would like to share with you about the HTML <a> element.

I am sure <a> element is the oldest and most used element in HTML. It was named when Tim Berners-Lee invented the World Wide Web in 1991.

Definition

The HTML <a> element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

-MDN

Attributes

download: This attribute instructs browsers to download files, like png, pdf or any documents, instead of navigating to it. The customer will be prompted to save it as a local file.

<a href="/images/nana.jpg" download="midnightblue.jpg">

Notice

• The filename of the downloaded file will be saved as “midnightblue.jpg” instead of “nana.jpg”.
• The download link should be under the same domain.

href: Contains a URL or a URL fragment that the hyperlink points to.

<a href="URL"> </a>

target:Specifies where to display the linked URL.

• _blank: Load the URL into a new browsing context.
• _self: Default behaviour, Load the URL into the same browsing context as the current one.
• _parent , _top

title: The title global attribute contains text representing advisory information, related to the element it belongs to.

title example

iframe : The HTML Inline Frame element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page.

<iframe name="sample" src="URL1" width="50%" frameborder="0"></iframe>
 <a href="URL2" target="sample">Go to URL2</a>

name: This attribute was required for anchors defining a possible target location within a page.

<a href="#chapter4"></a>
......
<a name="chapter4"></a>

How to styling basic link

global.sass

@import "elements/link.scss";

HTML

<div>
  This is a <a href="#" target="_blank">Link</a>.
</div>

link.scss

a {
 color: salmon;
 font-weight: 400;
 text-decoration: none;
 
 &:hover {
  color: midnightblue;
  text-decoration: underline;
  }
}

Link states

• Unvisited Link : The default state that a link resides in, when it isn’t in any other state. This can be specifically styled using the :link pseudo class.
• Visited: A link when it has already been visited (exists in the browser’s history), styled using the :visited pseudo class.
• Hover: A link when it is being hovered over by a user’s mouse pointer, styled using the :hover pseudo class.
• Focus: A link when it has been focused (for example moved to by a keyboard user using the Tab key or similar, or programmatically focused using HTMLElement.focus()) — this is styled using the :focus pseudo class.
• Active: A link when it is being activated (e.g. clicked on), styled using the :active pseudo class.

Reference Styling links -MDN

Link animation collection

🔗 Link - a Collection by nana on CodePen

I will collect Link animation above CodePen collection.

Please Please, stay tuned with me. ❤️

📖 Articles

• <a>: The Anchor element -MDN
• Styling links -MDN
• Link — opentutorials.org
• Timberners Lee

💌 Any questions or feedback

I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.

☕️

Lastly, I would love to share <FrontEnd30 /> where I learnt many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.

🎉 Happy codesign today