Have you ever clicked on a link which took you to a page, but not to the top? Perhaps it took you to a relevant part of an article, or a certain product section on a website.
Have you ever clicked on a menu item and had it, instead of loading a new page, scroll down the current page?
This is done with Anchors and IDs – they’re a really useful tool in any web developer’s toolkit.
Here’s an example of using this powerful combination in pure html code:
<html> <head> <title>My wicked-sweet website of awesomeness</title> </head> <header> <nav> <a href="#first-block">First Block</a> <a href="#second-block">Second Block</a> </nav> </header> </body> <div id="first-block" style="height: 200px;"> <p>This is the content of my first block.</p> </div> <div id="second-block" style="height: 200px;"> <p>This is the content of my second block"</p> </div> </body> </html>
Okay, that’s a silly page, and it’s largely useless, but the point here is that clicking on the “first block” link would take the user to the first block on the page, and clicking on the “second block” link would take the user to the second.
Using a #<id> in an <a> (anchor) tag tells the browser to scroll to that element. This is why, if you’ve never heard it before, element IDs need to be unique.
This can also be useful in WordPress, our Content Management System (CMS) of choice. Depending on the tools you’re using to build your website (a page builder, WordPress’ visual editor, whatever) there are different ways to assign IDs to elements on your page. Look up the documentation for the tools you’re using. This can be used to create single-page navigation, one-pager websites, or even linking to specific sections on a web page from a completely different page!