The Code Behind the Link

Have you ever wondered how clickable pictures or maps work? Believe it or not, for one section to be clickable, there are 6 different parts that have to defined. Let’s take a look at the code behind the link.

HTML is the building blocks for every website. It allows web designers the chance to define colors, fonts, line heights, layout and much more. HTML also gives them the ability to add pictures, links, and turn pictures into links. The links created in a picture are called “hot spots”.

Shape and Size

First, you have to decide which shape the “hot spot” will be. There are rectangles, circles, and polygons. Each shape has a different number of coordinates needed to define the size of the hot spots, which is the second thing designers need to decide. Programs like Paint can be used to find out which coordinates to use to get the right section.

Name, Alt, and Title

Next, you need to name the hot-spot. This is usually pretty easy since you are normally linking to another page about that area. This name comes up in two of the other attributes. Some people can’t read websites on their own, so they use a reading device. This is why it is common practice for web programmers to add the “alt” attribute. Reading devices will use the alt attribute to describe the picture or link to the user. The alt attribute is also what is loaded when the picture won’t load. The name you gave the hot spot will be used for the alt and tittle attribute. The title attribute is what pops up in the screen tip when you hover over the linked section.


The last thing that needs to be defined is the link. This can be a section on a web page on the same site or a completely different website. This uses the anchor element. It looks like this: <a href=”link”>Linked text</a>  or for a map the href attribute would be inside the hot spots code.

It seems crazy that something so simple to use could be so complex to put together. The web is something that is so simple on the outside but complex underneath the screen. Khan Academy and Code Academy have great videos explaining how to use HTML if you want to learn more about who the internet looks underneath.


Leave a Reply

Your email address will not be published. Required fields are marked *