Anchor Tags and href

Anchor Tags

Sometimes when I start off building my web pages I don’t always have all of my pages(i.e About, Home, FAQ, Contact, etc.) built out before I create my NavBarTo recap, your NavBar is the Menu at the top of your page that allows users to navigate to other pages within your site! In order to make the Menu Items (i.e About, home, FAQ, Contact, etc.) take your user somewhere when they click on it, you have to link your Menu Items to a destination via href.

href

You’ve probably seen href alongside an anchor tag, or <a> tag. Href stands for Hypertext Reference, which is just a fancy way of saying ‘URL‘! When using an anchor tag, you’ll want to use href to indicate to your anchor tag where you want that element to go once the user clicks on it!

If you need a refresher on <a> tags, check out my tutorial on anchor tags!

href in action looks like this:

<a href = “#’> </a>

There are multiple places your anchor tag can take you to: an internal HTML file (another web page you’ve built), an external URL (i.e. to buzzfeed.com or techtalkcode.com), a PDF file, another section of your web page, etc.

But today we’re going to focus on how you can use href within an anchor tag to take your user to a page within your website.

Anchor Tag Destinations: Placeholders

To start, if I don’t have all of my pages built(meaning I don’t have actual html files and URLs to include) before I create my NavBar, I will use “#” as a placeholder URL within href in my anchor tags.

If you want to use a “#” as your URL placeholder, it will look like this:

Anchor Tag Placeholder

<a href=”#” id=”home”>Home</a>

This means I am creating a Menu Item called “Home”, and when the user clicks on it, eventually it will link to my homepage. I really like that I can use href=”#” as a placeholder URL when creating anchor tags(Menu Items) within the NavBar because when I view it in my browser, I can see what everything looks like(even if the menu items don’t take me anywhere).

Anchor Tags

In order to make the Menu Items (i.e About, home, FAQ, Contact, etc.) take your user somewhere when they click on it, you have to link your Menu Items to a destination via href.

In my current .html file, I have href=”#” as placeholders for all of my NavBar items!

Le Example:

This means I can see all of my Menu items(Home, About, Contact, Blog) when I preview my file in my browser, but they don’t go anywhere when I click on them!

Let’s change href=”#” in each anchor tag so that they actually take the user somewhere.

I’ll link the Menu Item created by the<a> tag to an internal URL by replacing the “#” with the destination URL that I want each anchor tag to go to!

Note: Just make sure all internal files(that you’ve built) are also in the same directory as your index.html.

In my example, I will replace my “#” with internal web pages:

home.html
about.html
contact.html
blog.html

which are all .html files(web pages) that I have built!

Now, when users click on ‘Home’, ‘About’, ‘Contact’ or ‘Blog’, they will be redirected to those pages!

Ta-Daaaa!

Do you use placeholders when building out your webpages?! Comment below!

 

Subscribe to Tech Talk Code for new post updates!

 

 

Leave a Comment!