Some Rumination On Internal Links

When your page has a lot of content and scrolling up and down rapidly becomes an annoyance, Internal Links are your best friend. In this day and age of reading content on mobile devices and therefore tolerating the limitations on screen width, this has become more important than ever.

What Internal Links do is that when clicked on, they redirect you to another section of the page you're currently on.

Internal Links aren't new. They've been around since HTML's birth. It doesn't seem so long ago that I was using Internal Links like they were going out of fashion. Although, time may have passed faster than I like to admit. Because they did go out of fashion; or rather, the method of implementation did.

Let me explain...

How we used to implement Internal Links was, first define an anchor tag, with a name attribute. Here, I've used an ultra-long page with three thick paragraphs as an example.

<a name="top">
 
<h1>Header</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac erat egestas, congue nibh nec, sagittis ipsum. Maecenas et lacinia quam, sagittis blandit odio. Etiam nec dolor est. Maecenas quis libero ullamcorper, vulputate tellus vitae, viverra magna. Praesent eu lectus finibus, pellentesque augue id, dignissim sem. Maecenas vitae leo at augue dapibus maximus. Sed condimentum ipsum eu magna sollicitudin rutrum. Morbi libero neque, consequat sed metus ac, ultricies vehicula elit. Donec sed laoreet ex. Cras auctor, justo placerat tincidunt dictum, nisi purus ultrices risus, eleifend suscipit neque tellus sit amet ligula. Aenean quis vestibulum justo, eget tempor dolor. Pellentesque aliquet ornare sem, vitae porta odio mattis sed.
</p>

<p>
Maecenas placerat mollis suscipit. Duis non sollicitudin magna. Maecenas blandit eget tortor at feugiat. Nam eget scelerisque ex, hendrerit imperdiet nisi. Vestibulum felis felis, congue eget neque ut, auctor placerat urna. Suspendisse molestie dapibus lobortis. Donec venenatis porta tristique. Donec ullamcorper, dui eu dictum congue, velit nisl rutrum augue, et vehicula odio tellus eu lacus. Ut eros lacus, finibus eu lacus nec, tincidunt laoreet diam. Nullam id tellus laoreet, sagittis leo sit amet, dignissim ligula. Morbi lacus turpis, ultricies et libero at, egestas cursus libero. Aenean consectetur tempor sapien vel lacinia. Cras odio nulla, pretium vitae euismod non, placerat at sem. Maecenas gravida placerat fringilla. In quam purus, lobortis et interdum nec, interdum a felis. Praesent ligula ligula, semper quis malesuada in, venenatis a ligula.
</p>

<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu est a justo hendrerit condimentum. Vestibulum id ullamcorper urna. Ut ut rutrum lorem, at dignissim sem. Vestibulum ac leo urna. Mauris sollicitudin bibendum leo, sed pretium quam sodales nec. Proin convallis ut nunc commodo fringilla.
</p>

Then create another a tag, this time with the href attribute using the pound (#) sign and the name of your anchor.

<a name="top">
 
<h1>Header</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac erat egestas, congue nibh nec, sagittis ipsum. Maecenas et lacinia quam, sagittis blandit odio. Etiam nec dolor est. Maecenas quis libero ullamcorper, vulputate tellus vitae, viverra magna. Praesent eu lectus finibus, pellentesque augue id, dignissim sem. Maecenas vitae leo at augue dapibus maximus. Sed condimentum ipsum eu magna sollicitudin rutrum. Morbi libero neque, consequat sed metus ac, ultricies vehicula elit. Donec sed laoreet ex. Cras auctor, justo placerat tincidunt dictum, nisi purus ultrices risus, eleifend suscipit neque tellus sit amet ligula. Aenean quis vestibulum justo, eget tempor dolor. Pellentesque aliquet ornare sem, vitae porta odio mattis sed.
</p>

<p>
Maecenas placerat mollis suscipit. Duis non sollicitudin magna. Maecenas blandit eget tortor at feugiat. Nam eget scelerisque ex, hendrerit imperdiet nisi. Vestibulum felis felis, congue eget neque ut, auctor placerat urna. Suspendisse molestie dapibus lobortis. Donec venenatis porta tristique. Donec ullamcorper, dui eu dictum congue, velit nisl rutrum augue, et vehicula odio tellus eu lacus. Ut eros lacus, finibus eu lacus nec, tincidunt laoreet diam. Nullam id tellus laoreet, sagittis leo sit amet, dignissim ligula. Morbi lacus turpis, ultricies et libero at, egestas cursus libero. Aenean consectetur tempor sapien vel lacinia. Cras odio nulla, pretium vitae euismod non, placerat at sem. Maecenas gravida placerat fringilla. In quam purus, lobortis et interdum nec, interdum a felis. Praesent ligula ligula, semper quis malesuada in, venenatis a ligula.
</p>

<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu est a justo hendrerit condimentum. Vestibulum id ullamcorper urna. Ut ut rutrum lorem, at dignissim sem. Vestibulum ac leo urna. Mauris sollicitudin bibendum leo, sed pretium quam sodales nec. Proin convallis ut nunc commodo fringilla.
</p>

<a href="#top">Go to Top</a>

This is the page. Scroll down until you see a "Go to Top" link.

When you click on the "Go to Top" link, it brings you back to the top of the page!

I've got Good News and Bad News...

The good news is, Internal Links are still around.

The bad news is, what I've just shown you has been deprecated since XHTML. Yep, it's been that long. Don't take my word for it - it's in the XHTML specification. Some browsers may still render it that way, but don't count on it.

We've been using HTML5 for a decade now and my brain is still stuck at old clunky classic HTML where Internal Links are concerned, for some reason. Go figure.

The New Way

Instead of a name attribute, define the anchor by using the id attribute, like so.

<a id="top">

<h1>Header</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac erat egestas, congue nibh nec, sagittis ipsum. Maecenas et lacinia quam, sagittis blandit odio. Etiam nec dolor est. Maecenas quis libero ullamcorper, vulputate tellus vitae, viverra magna. Praesent eu lectus finibus, pellentesque augue id, dignissim sem. Maecenas vitae leo at augue dapibus maximus. Sed condimentum ipsum eu magna sollicitudin rutrum. Morbi libero neque, consequat sed metus ac, ultricies vehicula elit. Donec sed laoreet ex. Cras auctor, justo placerat tincidunt dictum, nisi purus ultrices risus, eleifend suscipit neque tellus sit amet ligula. Aenean quis vestibulum justo, eget tempor dolor. Pellentesque aliquet ornare sem, vitae porta odio mattis sed.
</p>

<p>
Maecenas placerat mollis suscipit. Duis non sollicitudin magna. Maecenas blandit eget tortor at feugiat. Nam eget scelerisque ex, hendrerit imperdiet nisi. Vestibulum felis felis, congue eget neque ut, auctor placerat urna. Suspendisse molestie dapibus lobortis. Donec venenatis porta tristique. Donec ullamcorper, dui eu dictum congue, velit nisl rutrum augue, et vehicula odio tellus eu lacus. Ut eros lacus, finibus eu lacus nec, tincidunt laoreet diam. Nullam id tellus laoreet, sagittis leo sit amet, dignissim ligula. Morbi lacus turpis, ultricies et libero at, egestas cursus libero. Aenean consectetur tempor sapien vel lacinia. Cras odio nulla, pretium vitae euismod non, placerat at sem. Maecenas gravida placerat fringilla. In quam purus, lobortis et interdum nec, interdum a felis. Praesent ligula ligula, semper quis malesuada in, venenatis a ligula.
</p>

<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu est a justo hendrerit condimentum. Vestibulum id ullamcorper urna. Ut ut rutrum lorem, at dignissim sem. Vestibulum ac leo urna. Mauris sollicitudin bibendum leo, sed pretium quam sodales nec. Proin convallis ut nunc commodo fringilla.
</p>

<a href="#top">Go to Top</a>

Why this makes sense

This makes things more consistent. You know how jQuery uses that very same pound (#) sign to denote the id of a DOM element? The example below assigns the example object to the variable obj.

var obj = $("#example");

Yep, in XHTML (and HTML5), the pound (#) sign for Internal Links will refer to the id attribute as well, as opposed to the name attribute.

This has been a public service announcement from your friendly neighborhood web crawler developer!

#kthnxbye,
T___T