Internal Anchor Tags

If you’re building a simple webpage, chances are, you’ll have multiple sections(i.e. About Me, Projects, Contact, etc.) within it! One way to make your webpage a little easier for your users to navigate is with the use of a NavBar and Internal Anchor Tags.

Internal anchor tags are links that allow your user to navigate to a specific location on your webpage! Typical anchor tags will take a user to another webpage or another website, but with internal anchor tags, you can take your user to a section within your webpage!

To demonstrate how to create internal anchor tags, I will be using examples from my personal website!

Le Example:

Nav Bar

My NavBar contains five links, or internal anchor tags – About, Projects, Services, Contact and Blog! The purpose of my NavBar is to indicate to my users that there are multiple parts to my site! When a user clicks on the first four links, they will be taken to a section of my main landing page!

This reduces the amount of scrolling the user has to do. If they’ve come to my webpage with a purpose, I want them to make it simple for them to get what they need!

Here is how I make it happen:

Nav Bar

The four internal anchor tags/links that users can click on in my NavBar  are as follows:

<a href = "#Sam"> About <a/>
<a href = "#projects"> Projects </a>
<a href = "#Services"> Services </a>
<a href = "#Contact"> Contact </a>


Clicking on each of these links will bring my users to either my About, Projects, Services or Contact section!

You’ll notice in my links that <a href =  “#______” > isn’t a URL.

The “#______” indicates a section of your webpage that has a specific id.

<a href = “#Sam”> About</a> will jump to the section of my webpage with “id=Sam”

Check it out:

Is created by:

<a href = "#Sam"> About <a/>

Which links to:

Div

Which will bring the user to:

Div

Similarly to the ‘About’ section, my users can also check out my projects! Using an internal anchor tag, I’ve created a link that takes my users directly to the Projects section of my webpage!

Check it out:

Is created by:

<a href = "#projects"> Projects </a>

Which links to:

Projects

Which will bring the user to:

Projects

I love using internal anchor tags on my landing page because it makes user navigation super quick and easy! I use regular anchor tags to take users to other pages on my website or to external web pages!

Have you ever built your own webpage?! If so, do you have a navigation that takes your users to different sections of it?! Comment below!

Don’t forget to subscribe to Tech Talk Code for monthly roundups of our top posts!

Leave a Comment!