Subscribe to Articles
Sign up to receive articles and get our free Easy Website Check-up ebook.
Hyperlink basics, part 1
Although HTML knowledge was required to maintain a website back in the late 1990′s and early 2000′s, now content management systems make it easy for a non-geek to be a webmaster. Nonetheless, it’s a good idea to have a grasp of some basics. Let’s take a look at the basic HTML behind links.
When creating a link, you have to select the text that you want to link. Let’s look at the following example:
I can’t imagine life without a good search engine to help me find things online.
Let’s say you want to link the phrase “good search engine” to Google’s website. To do so, you’ll wrap the phrase with an <a> tag, which is a link tag. You would end up with something like this:
I can’t imagine life without a <a href=”http://www.google.com”>good search engine</a> to help me find things online.
Fortunately these tags are pretty easy to understand. Inside the first tag you have an “a” that tells your browser this is a link. And don’t forget the closing tag, or the rest of your HTML document will be linked!
In addition, you have the “href” (hypertext reference) and it’s value. This tells the browser what to do when you click on the link. In this case, it sees that there is a website address there, so it sends us on to another page.
There are other options besides putting a website address. You can also put a # symbol followed by the id of some element on the page. If you had the following:
But you can read <a href=”#moreAboutThat”more about that later</a>.
…and then later in the same document had this:
<h3 id=”moreAboutThat”>More About What I Said Earlier</h3>
…then clicking the link would jump down to this section of the web page. And it doesn’t just work with h3′s, it works with any element.
Of course, you can also create links to email addresses. You do that in the following format:
Feel free to <a href=”mailto:firstname.lastname@example.org”>email me</a> if you have any questions.
In that case, the “mailto:” tells the browser to open your computer’s email program.
We’ll look more at hyperlinks next time, including opening links in new windows, and creating more functional email links.
September 1st, 2011
Tim Priebe is a public speaker, the author of the book Webifiable and the upcoming book Blogify Your Business and the owner of T&S Web Design. You can reach him on Twitter and Facebook with the username timjpriebe.