Building Websites for Beginners: 8. Links
Tags: beginners, html, webdev, tutorial
Published: 2020-12-23 10:41:22

# 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: <a href="https://developer.mozilla.org/">MDN web docs</a>.

### 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):
<dl>
    <dt>Fragment URLs</dt>
    <dd>
        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 <code>id</code> of the element they link to (e.g. <code>href="#faqs"</code>).
    </dd>
    <dt>Mailto</dt>
    <dd>
        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 <code>mailto:</code> followed by an email address (e.g. <code>href="mailto:hello@example.com"</code>).
    </dd>
    <dt>Tel</dt>
    <dd>
        Links to a telephone number. Will often call the number specified if the user's device supports calling. Takes the form of <code>tel:</code> followed by a phone number (e.g. <code>href="tel:07457018710"</code>.
    </dd>
</dl>

### 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](https://css-tricks.com/use-target_blank/). 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 `p`s 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`<sup id="a1">[1](#f1)</sup> and `a` as children, which are both `inline`. When rendered by the browser, the example will be laid out like so:

<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>

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<sup id="a2">[2](#f2)</sup> 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<sup id="a3">[3](#f3)</sup>. 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](https://github.com/BezPowell/building_websites_for_beginners/blob/master/code/s1c8/index.html) if you get stuck.

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

### Footnotes
<ol>
    <li id="f1">The strong element stands for Strong Importance, and is used to mark content out as having particular importance or urgency.</li>
    <li id="f2">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.</li>
    <li id="f3">ol and ul elements may only have li as children, for example.</li>
</ol>

---
This is a chapter from my <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a> book, Building Websites for Beginners. You can read everything that I have written so far on the [book website](https://bezpowell.github.io/building_websites_for_beginners/), and can see the [source code on github](https://github.com/BezPowell/building_websites_for_beginners).