HTML & CSS: Hyperlinks and Lists

Hyperlinks

Hyperlinks (or just 'links' for short) are basically just click-able links to a location - whether that be another webpage or a resource of some sort. Links basically make up the web (and if you think about it, it gives a sense to calling it "the web" - since the links make everything reference everything else). Links are necessary so the user can go to different pages in a website and to go to different websites with ease. Search engines are most basically just a big list of links.

Links are accomplished in HTML by using the anchor (a) element (which is always started and ended using anchor tags). Setting the href attribute defines the location that the link links to. Any text inside the a element is then used as anchor text for that link (the text that you have to click on to 'jump' to the location that the link points to).

1

<a href="URL">Link Text</a>

The href (which stands for "Hypertext REFerence" by the way) value can be a fixed path (for example a URL such as http://www.dev-hq.net) or a relative path (for example, something in the same folder as your HTML document - such as page_two.html). An example of a fixed path link would be a link from your website, to this website:

1

<a href="http://www.dev-hq.net">Visit Dev-HQ!</a>

We can then style all links on the page very easily, by using the a selector. Note that CSS selectors can be more specific to certain areas of the page by using a space in the selector - for example the body a selector would refer to all anchor elements inside the body - however in this example doing such a thing would be seemingly pointless (as all anchor elements should be in the body). It's very common to simply change the link text colour using the color property:

1
2
3

a {
	color: #FF0000;
}

Remember that we are putting the a after body in the selector to specify that the stylings apply to all anchor elements in the body section.

We can also use the :hover, :visited and :active pseudo-classes (which sound so much scarier than they actually are) to set the style when the user hovers over the link or when the link has previously been visited by the user. Note that the :hover pseudo-class isn't exclusive to a, it can be used on a variety of elements (while :visited and :active are just for links). Pseudo-classes are used in CSS by simply adding them to the end of the element you want the class action (for example :hover) to apply to in the selector. For example we want to target the :hover on a - so we'd want a:hover as the CSS selector for when links are hovered over. So if we wanted the link to be red normally, green on hover, and blue once visited we would do something like the following:

1
2
3
4

a { color: #FF0000; }
a:hover { color: #FF0000; }
a:active { color: #00FF00; }
a:visited { color: #0000FF; }

Notice that because there is only one rule in each ruleset, we are simply condensing the rulesets down to one line each -- it's another one of those formatting things, it's personal choice.

Lists

Lists are used in HTML, as you would expect, for displaying related data (and in some areas you might not expect, like navigation bars). You can have ordered lists where the points in the list should be ordered in a specific way (for example 1, 2, 3, 4, 5) or unordered lists where the points don't have a specific order (for example a bullet point list).

To do unordered lists - you start with the ul element (which stands for unordered list), and then wrap each point you want to put in your unordered list in li (list) tags. For example:

1
2
3
4

<ul>
	<li>Point One</li>
	<li>Point Two</li>
</ul>

Ordered lists are pretty much exactly the same, apart from we use the ol (ordered list) element as a parent to our li elements instead of the ul:

1
2
3
4

<ol>
	<li>Point One</li>
	<li>Point Two</li>
</ol>

You can style lists very easily in CSS by simply targeting the elements as you would with any other element - for example using ul or li as selectors. One of the things that is often customised is the "bullet point" type. With ordered lists this defaults to numbers (1, 2, 3, 4 etc) and with unordered lists this defaults to bullet points, but we can change is using the list-style-type property. There are a variety of values this property can be set to:

Unordered Lists

• none – No marker.
• disc – Default - A filled circle.
• circle – An 'empty' circle.
• square – A square.

Ordered Lists

1. armenian – Traditional Armenian numbering.
2. decimal – Default - A 'regular', decimal number.
3. decimal-leading-zero – A 'regular' number with a 0 preceding it (01, 02, etc).
4. georgian – Traditional Georgian numbering (an, ban, gan, etc).
5. lower-alpha – Lowercase alphabet (a, b, c, etc).
6. upper-alpha – Uppercase alphabet (A, B, C, etc).
7. lower-greek – Lowercase greek (alpha, beta, gamma, etc).
8. lower-latin – Lowercase latin (a, b, c, etc).
9. upper-latin – Uppercase Latin (A, B, C, etc).
10. lower-roman – Lowercase Roman (i, ii, iii, etc).
11. upper-roman – Uppercase Roman (I, II, III, etc).

Some example usage of this is as follows:

1
2
3

ul { /* Unordered lists in the body */
	list-style-type: square;
}