Adding hyperlinks and links
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:
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.
Hyperlinks
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]
<a></a>.
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.<a href=https://weather.com>
Here is an example of a link that you can click on. Try it now!
</a>
Try for yourself
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:
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
- 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
- Duckett J. HTML and CSS: Design and Build Websites [Book]. Indianapolis: John Wiley & Sons; 2011. p.75.
- HTML Tags [Internet]. CERN (the European Organization for Nuclear Research); [date unknown]. Available from: http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html
- 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
