Sprinkle Some Hash on Your Headings
URLs (Uniform Resource Locators) are how we arrive at a given location on the web. Similar to how a building has a unique address, every web page has a unique URL. In addition to navigating to a specific webpage, URLs can take us to a specific part of a webpage.
If you live in an apartment complex you have the same building address as your neighbor. Your apartment number along with the building address define your unique mailing address. Elements on a webpage have the same ability. Sheltered under the roof of the same DOM (Document Object Model), elements all live within the same “building”. Just like a unique apartment number, assigning a DOM element a unique id attribute allows that element to be directly linked to. Any visible DOM element with an id attribute can be accessed by its own unique fragment identifier.
The fragment identifier introduced by a hash mark (#) is the optional last part of a URL for a document.
— Fragment Identifier
Hash Mark
At the end of a URL you can add a hash mark (#) followed by the id of a DOM element. This will cause the browser to scroll directly to that element. This is a very clever technique that can be used to share a specific section of a page. Let’s say you write a super awesome blog post. Like this one. And you want to share a particular section of that post. Before sending the URL to a friend all you need to do is add a URL fragment to the end of the URL with the id of the section you’d like to share.
But how does a user determine what the id of the section is? If they are technically savvy they can view the source of the web page and copy the id attribute of the section they want to share. Yuck. Most users won’t do that. This is why it is important to not only add id attributes to sections of your document but give users a way to easily access them as well.
Take this heading for example:
Let’s say the heading is half way down our page. Without an id attribute we won’t be able to link users directly to the Yolo section. So let’s add an id attribute now by sprinkling some hash on our heading:
Much better. Now we can add #yolo to the end of our URL and users will be taken directly to that section.
We’ve added a capability to our page but we haven’t provided users an easy way to access that ability. We don’t want to keep the hash to ourselves, so let’s use an anchor tag to make our heading more sharable now:
Our semantic heading now contains an anchor tag that links to its associated heading. When a user clicks this link their URL bar will be updated to contain the #yolo URL fragment and the document will also scroll immediately to that section. Like any other link, users can right click the anchor tag and copy the URL. When the user copies the URL the fragment will be included. This makes our semantic headings shareable.
Maybe you want to add this capability without making the heading look like a link. No problem. You can add a subtle class to your anchor tag and use CSS styles to make your heading look as it would without the link.
Now your heading subtly provides the accessibility of a link while maintaining your heading styles. By adding an id attribute and an anchor tag you’ve made your headings easily sharable and more accessible. It’s the little things.
