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.
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.
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
idof the element they link to (e.g.
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.
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.
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.
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
By default, HTML documents are laid out according to Normal Flow, which closely matches a book or manuscript. Elements are divided into two categories,
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
ul has three
li elements as children, which are also
block level; and the first
p has a
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 mode2 of the document.
With the advent of HTML5
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 elements3. 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.
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.
- The strong element stands for Strong Importance, and is used to mark content out as having particular importance or urgency.
- 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.
- ol and ul elements may only have li as children, for example.