Are you looking to create links to other pages using HTML links?
Although we encountered links in previous posts, like the intro to HTML elements, we haven’t looked at links in great detail.
In this post, you will learn how to easily include a clickable link in your web page and understand core attributes like href.
Do you, also, want to add some character and oomph to your basic HTML skills?
We also go over how to bring in some special bits, like entities & iframes, to affect the visual appearance of your web pages.
Let’s kick our HTML abilities up a notch. We are ready – how about you?
What do HTML links do?
HTML links (otherwise known as hyperlinks) provide a way to add relationships:
- Between your pages (clicking on Blog in the menu will take you to the blog page)
- Between your pages and outside documents (clicking “add relationships” will take you to the Mozilla Developer website on the page talking about links)
Can you even imagine navigating a website without links? There would be no buttons to take you from one point to another unless you manually changed the URL – assuming you know what to change it into.
So HTML links play a huge role in usability and affect the user experience tremendously. Broken links are off-putting, missing links require backtracking and absent searching – plus, you wouldn’t be able to direct users where you want to.
How do you create HTML links?
<a href="URL"></a>To define a hyperlink in HTML use the anchor tags, <a></a>, with a specified href attribute that is absolutely required. Without an href, a link will look like a link in the sense of being clickable and underlined by default, however, it will not do anything.
Note:
<a>tags are inline elements!
Link Attributes
Explaining href & different types of links
What does href do?
The href attribute specifies a link’s destination. Basically where the link is going to send you, in the form of a URL.
We like to think of URLs as virtual addresses which vary based on your relative location.
For example, when someone asks you where you live it’s most likely the case you omit particular bits like the country or planet.
If the asking person is from the same country, you wouldn’t specify the country in your reply (totally could, but that’s just weird). Similarly, if the asking person is human, you aren’t going to attach to the end of your reply “planet Earth”.
Your location, therefore, depends on the relative location of the asking party.
The same logic applies to virtual addresses which is why we have different types of links.
3 Different Types of HTML Hyperlinks
Absolute link
An absolute link takes you to a specific page on the web and starts with https://www which is considered an absolute address.
Relative link
A relative link takes you to a page on your website, basically pointing to different pages within a website.
Anchor link
An anchor link takes you to a different portion of a page you are currently on – a great example is a table of contents. Try the one on this post and notice how it takes you to relevant sections within this page.
But try the “About” option on THT’s menu on top of this page and you will notice it will take you to the about section on the homepage.
Anchor links are designated by a
#Element idso the element you are pointing to must have an id.
Practice!
Let’s simulate the behavior of an anchor link on our current page.
- Add content so we can see the anchor affect. We need a good chunk of scrollable material so we can use the popular lorem ipsum to take care of that.
- Go to: https://www.lipsum.com/ and scroll to the part where you choose how much content you want. Feel free to customize, but remember we want lots of content for a full page!
- Generate the lorem ipsum and copy & paste it onto VS Code in
<p>tags. We added some line breaks,<br>, between paragraphs to make things easier on the eyes.
- Then add an
<h3 id="anchor-link">to signal the section we want to link to within this page. Create another<p>to include some more lorem ipsum.
- Now define the anchor link at the top of the page and check it out.
<a href="#anchor-link">Go to Important Section</a>
Relative and absolute links with anchor
But an anchor link can also lead to a specific section on another website in addition to a specific section of another page within a website.
The latter you can see by clicking “About” in THT’s menu – it will send you to the about section on the homepage.
The former, however, is tricky since you will need to know the id of the section on the other website you are trying to link to. This is possible – you can use Google’s inspect tool to get the id – but it’s clearly not the most practical way of approaching this.
To link to a specific section on another website you will add the id of the element you want to anchor to at the end of the page’s link.
<a href="link#id"></a>We can try this out on our page by linking to THT’s blog section on the homepage which happens to have the id of “blog”.
<a href="https://thehelpfultipper.com/#blog">THT's Blog Page</a>
Optional target attribute
The target attribute specifies where to open a link once a user clicks it.
Setting a target is optional, but, unless changed, the default would be to open in the same window. This might not be the ideal behavior if your goal is to keep people on your website.
| Target | What it does |
|---|---|
| _self | default; opens in the same window |
| _blank | opens in a new window |
| _parent | opens in the parent frame |
| _top | opens in the full body of the window |
For the external anchor link example above, make it so the link opens on a new page.
<a href="https://thehelpfultipper.com/#blog" target="_blank">THT's Blog Page</a>What are HTML entities?
HTML entities offer a way to display reserved characters that would otherwise be rendered by the browser as HTML.
Think of “<“ and “>” which indicate tags or “@” usually found on every footer for copyright or extra spaces in your text. For a comprehensive list of supported entities, visit this link.
How do you create an HTML entity?
An HTML entity starts with & (ampersand) and ends with ;(semicolon). All have different codes – a google search is your best friend here.
You really don’t need to remember all of them (unless you want to flex your mental prowess).
What are iframes in HTML?
Inline frames are a way to include content from other sites in yours by embedding another HTML document in your current one.
How do you use an HTML iframe?
<iframe src="URL of site to embed"></iframe>Use the src attribute, as we do in images, to specify the source (address) of the website you want to embed.
Tip: the URL here is going to be an absolute link because it’s taking you to an outside website!
You can customize the iframe by additional attributes like height and width or a frameborder (when it’s zero there’s no frame border).
Why is your iframe not working?
Know that some sites don’t allow iframes and there’s really nothing you can do about it.
Also, iframes are associated with certain security risks that might expose you to hackers.
Now that we learned how to make our HTML page dynamic, you have all the skills you need to create an HTML page.
Are you ready to put all our skills to use?