Thanks for checking out my first blog post on dev.to! In my inaugural post, I’ll be discussing how to use the <a> href HTML attribute with javascript: what <a> href is, and why it’s used, how to use it in the context of js, and my experience working with <a> href. Before I jump into the technical details, I’ll be sharing a little bit about my background, and the project that led me to write about href.
[about me]
Before we jump into the technical details about our main topic, a little more about me. I’ve spent the last decade in tech, having worked for several start-ups in software in various client-facing roles. I didn’t originally set out to work in tech, having read philosophy (specifically some arcane political philosophy at that) while in university, and rather ‘fell into it’. I now work as a technical program manager in big tech.
I’ve been extraordinarily lucky to have had many brilliant technical mentors over the years. They taught me many software fundamentals and many technical management (re: Scrum, Kanban) theories. Over time, I picked up enough through mentors, on-the-job learning and self-study to be effective in my field, but I always felt at a disadvantage (re: imposter syndrome) for not receiving any formal software engineering training.
The pandemic provides some dedicated time at home for me to learn new things, so I decided to sign up for a coding bootcamp to round out my technical skills. This blog, and the javascript project I coded using <a> href are part of my program curriculum.
[info about my project]
The capstone for the first phase of my program is a simple web app. I decided to use a URL shortening API to code a single-page web app that allows users to shorten URLs, and have the links show up on the page. This project necessitated an understanding of and leveraging the <a> href attribute. This blog post shares what I learned about this topic through my project.
You can access the web app and source code through my github:
[What is <a> href and what does it do?]
Strictly speaking, the <a> is an HTML tag, and the ‘href’ is the tag attribute. Href comes from “Hypertext REFerence”.
Together (and always together) <a> href renders a clickable link to a local file or url.
"anchor text. Which is the clickable text
Remember: You must use the href attribute with an <a> </a> tag.
Here’s for the <a> href is constructed: Link , Target, & Title
Link is the url or file path.
Target is how you want the linked document to open (new window, same frame, etc. - you can read more on this here.
Title is what you want the link to show up as on the webpage
How to use <a> href in Javascript:
So, when might you want to manipulate document links through your javascript instead of coding the links into the html - after all, <a> href is an html tag and attribute?
There were two requirements for my URL shortener app 1) take a long form url and return a short link & 2) add both the original and short links to the web page as clickable hyperlinks.
We therefore need a mechanism to update the web page with the new content. To accomplish this, I used <a> href in my javascript to dynamically update the web page.
My approach to getting the URLs added to the DOM was to create an
the stuff ). I then used string interpolation to place the url (as a locally scoped variable ${urlHere) ) as the href link.
You’ll note that the Target is set as “_blank”, which opens the link in a new window when clicked on the webpage.
let card = document.createElement('li')
card.className = 'card'
card.innerHTML =
<a href= ${orgLink} target = "_blank"> ${orgLink} </a>
<br/>
<a href= ${shortLink} target = "_blank"> "Short Link"</a>
<div class ="buttons">
<button id="close"> X </button>
</div>`
Alternatively, I could have had my javascript function append the attribute and the link title step by step. However, I opted against this method as I needed to add more than one URL, together, to show up on the web page, and this approach would result in a lot more lines of code.
Example:
function example() {
NewUrl = document.createElement('a');
let url = document.createTextNode("Url Link Title");
a.appendChild(url);
a.title = "This is Link";
a.href = "https://www.SuperDuperLongUrl.com";
document.body.appendChild(a)
}
Happy Coding!
*Sources:
*
https://www.w3schools.com/tags/att_a_href.asp
https://www.freecodecamp.org/news/the-a-href-attribute-explained/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
https://www.pcmag.com/encyclopedia/term/href#:~:text=The%20HREF%20is%20an%20attribute,called%20the%20%22anchor%20text.%22
Top comments (0)