Skip main navigation

New lower prices! Get up to 50% off 1000s of courses. 

Explore courses

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

Reach your personal and professional goals

Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.

Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.

Start Learning now