Links

In the previous chapter we added a table of past employments to our portfolio page. This detailed what positions the page's author had previously held, and the companies who employed them. It's likely that anyone reading this would at least be able to guess as to what the job entailed (especially if they are interested in the fields in which the author worked), but the employer may well be totally unfamiliar to them; to save anyone in this situation from having to search on the internet, we will provide a direct link to the various employer websites inside the table.

This also provides me with a vaguely plausible reason for introducing you to hyperlinks in HTML, which (as mentioned in this section's introduction) are probably the single most important building block of the web, so should not be left out.

Anchors

In HTML, hyperlinks are defined using the a tag, which stands for anchor. Think of it a bit like anchoring a line which can then be traced back to something. Anchors support a href attribute, which specifies the link's destination; and the content of the element will form the text of the link. An example is below:

<a href="https://developer.mozilla.org/">MDN web docs</a>

which when rendered by the browser would appear like this: MDN web docs.

URL schemes

The href attribute used above specifies a http-based URL to create a link to another document on the web. Aside from this, href also supports a few other types of value (known as url schemes):

Fragment URLs

Links to another element on the page. Will scroll the page down to bring the element into view. Starts with a hash symbol (#) followed by the id of the element they link to (e.g. href="#faqs").

Mailto

Links to an email address. Often creates a new email to the address specified using the user's default email programme. These take the form of mailto: followed by an email address (e.g. href="mailto:[email protected]").

Tel

Links to a telephone number. Will often call the number specified if the user's device supports calling. Takes the form of tel: followed by a phone number (e.g. href="tel:07457018710".

Opening in a new tab

Hyperlinks can also be made to open in a new tab or window by adding a target="_blank" attribute to the element, but please use this judiciously, as it can be a change to user expected behaviour. The text that you use to illustrate the link should also give some clue as to where the link leads, please avoid links that only say click me or, even worse, just here.

Block and Inline elements

You may have noticed that the a elements in the previous paragraph have behaved a little differently from most of the other elements we've seen so far: they sit within the surrounding content, rather than starting a new line. This is because a is an inline, rather than a block-level, element.

By default, HTML documents are laid out according to Normal Flow, which closely matches a book or manuscript. Elements are divided into two categories, block and inline, with inline elements being laid out next to one another in the writing direction, like sentences of text; and block elements proceeding one after another perpendicular to the inline direction with line-breaks in-between, just like paragraphs.

To appreciate the difference between them, consider the following example:

<p>
    Some paragraph text. This bit is <strong>more important</strong> than the rest.
    It also contains a link to <a href="https://bezpowell.github.io/building_websites_for_beginners/">the introduction</a>
</p>
<ul>
    <li>A list of items</li>
    <li>Contained within a ul</li>
    <li>So order doesn't matter</li>
</ul>
<p>
    Another paragraph for demonstration purposes.
</p>

Here we have defined three ancestor elements (two ps and an ul), which are all block-level. The ul has three li elements as children, which are also block level; and the first p has a strong¹ and a as children, which are both inline. When rendered by the browser, the example will be laid out like so:

All of the block level elements are laid out one after another perpendicular to the reading direction, with line breaks in-between. In most western languages this means that block level elements will be laid out starting at the top and working downwards, but depending on the language's reading direction they could go from top to bottom, left to right, or right to left.

In contrast to this, the inline elements are displayed next to one another as a continuos line in the writing direction. Again, here this is left to right, but will vary depending on the writing mode² of the document.

With the advent of HTML5 block and inline are not quite as strongly defined as they once were, and we will take a more in-depth look at the various ways we can alter Normal Flow in the next section on CSS.

For now, the main thing that we must be aware of is that HTML restricts what elements can be used as the descendants of other elements³. This varies from element to element, but the general rule is that while we can have inline elements as descendants of block level elements, it is invalid HTML to do the opposite. You may have as many strong elements inside a p as you wanted, but you can not include a h2 inside a strong. The main exception to this rule is the a element, which can accept block-level elements as descendants.

Adding the employer hyperlinks

Now that we know how to add hyperlinks to documents, and understand that that can only be the parents of certain elements, we can add the employer website hyperlinks to our table. As this is such a minor change, I will not show you what to do and will ask you to have a go at doing it yourselves. Remember that you can look at this chapter's source code if you get stuck.

In the next chapter we will look at forms, which allow visitors to interact with your website.

Footnotes

1. The strong element stands for Strong Importance, and is used to mark content out as having particular importance or urgency.
2. The document's writing mode is generally determined by the language set in the html lang attribute, but can be overridden on an element by element basis.
3. ol and ul elements may only have li as children, for example.