Skip main navigation

Adding hyperlinks and links

Article discussing how to add hyperlinks and links in HTML.

The number of websites has increased massively partly because of the useful possibilities of HTML. On the one hand, HTML allows us to format internet-based documents to imitate the appearance and quality of books, magazines, and newspapers.

Here are just a few examples of how you can format text with HTML:

Side-by-side comparison of headings in html format (with tags used for styling) and actual appearance in a browser (text styled using the H1 tag, down to the H5 tag). Click to enlarge

On the other hand, HTML provides extra features that traditional paper-based media don’t have: interactivity and non-linear navigation through content. These features turn ordinary text into hypertext.

We’ll explore formatting for HTML text in the next activity, but here we’re going to focus on two more basic HTML elements: hyperlinks and lists.

Links are the defining feature of the web because they allow you to move from one web page to another – enabling the very idea of browsing or surfing. – Jon Duckett, author of HTML and CSS: Design and Build Websites (2011) [2 p75]
Where would the wonderful World Wide Web be without hyperlinks? To add these portals to other pages on the web, use the tag: <a></a>.
Compare the HTML code and the result you would see in a browser:
An important attribute to add to the opening of this tag is a href, which is then followed by the link’s destination (i.e. the URL). In browsers, this will appear highlighted and users can click on text between the tags to go to whatever path you put in the href attribute.
Try this example in JSFiddle:
<a href=https://weather.com>
Here is an example of a link that you can click on. Try it now!
</a>
Try changing the URL to another website and modify the text that you click on to reach the link. How does the output change? (If you are running this code in JSFiddle, you’ll need to right-click and open the link in a new window or tab for it to work.)
Did you know that hyperlinks can be images too? You’ll learn how to add images with attributes like this in Week 3 – so hang on until then!

Try for yourself

Paste this text into JSFiddle as a single paragraph:
The quick brown fox jumped over the lazy dog. This sentence contains all the letters of the alphabet.

For each word in bold, add a link to a web page with relevant information about that word. Make sure that only the three specified words are hyperlinks, like this.

Bulleted and numbered lists

Wait, what’s so great about lists? Lists were included in the first publicly available version of HTML that CERN (European Organization for Nuclear Research) released in a document titled, HTML tags. [3]

If you have a number of short items to display, you can use either <ul></ul> for an unordered list (i.e. bullets) or <ol></ol> for an ordered list (1, 2, 3, etc.). Between these tags, you can add items using <li></li>, which stands for ‘list item’.

This is an example of how you would create an ordered (numbered) list:

Side-by-side comparison of an ordered list in html format (using ol tags) and each line's actual appearance in a browser. Click to enlarge

Try for yourself

What are your top five websites that you use most often? Make a list of these websites in HTML. Now make each item in your list a link to the actual website.

Which part did you find easier: creating the list, or adding the hyperlinks?

References

  1. HTML: Living Standard [Internet]. The Web Hypertext Application Technology Working Group (WHATWG); 2021 Aug 2. Available from: https://html.spec.whatwg.org/multipage/dom.html#represents
  2. Duckett J. HTML and CSS: Design and Build Websites [Book]. Indianapolis: John Wiley & Sons; 2011. p.75.
  3. HTML Tags [Internet]. CERN (the European Organization for Nuclear Research); [date unknown]. Available from: http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html
  4. Beyer S, Gorris L. ‘We Like Lists Because We Don’t Want to Die’ [Internet]. Spiegel International; 2009 Oct 11. Available from: https://www.spiegel.de/international/zeitgeist/spiegel-interview-with-umberto-eco-we-like-lists-because-we-don-t-want-to-die-a-659577.html
This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education