Building a static website (part 4: Adding some navigation)

Having spent time looking at images related design concepts, I wanted to take a brief detour into something different, before starting to look at the basics of responsive images.

The subject I want to look at in this blog post is the addition of some basic site navigation. Although I intend to return to this subject in much greater depth later on, I think it would be useful from this point on to at least be able to present an easy and visual way to access the previous and next blog posts and be able to return to the homepage for the main website. I want to do this not only because it will be handy, but it will also allow the exploration of some CSS and a few of the semantic HTML elements that are useful in modern webpages. As a bonus, I intend to add a bit more style to the published date that appears towards the top of each blog post page.

You will of course see the results of those additions on the version of this blog post that is published, but I want to go through the steps I went through when thinking about this.

Semantic HTML elements and webpage structure

Talking about basic website navigation also made me think about the so-called semantic Web, which is the attempt to use certain HTML elements and website structure to provide a bit more meaning and context to the contents of an HTML page. This is designed to help things like assistive technology such as screen readers and website indexes such as those maintained by Google. As an aside: with the rise of AI, maybe those scrapers will be intelligent enough to understand webpages as well as we can!

The reason that website navigation makes me think of this is that there are semantic HTML elements that amongst other things, support the description of website navigation links. As one of my objectives is to be standards compliant where I can, I'm keen to support the idea of semantic elements as appropriate to my design.

As there are plenty of resources out there that explain what the semantic Web is and how it is supported by semantic HTML elements in great detail, I'm not going to explain that. Instead, I'm going to start by saying that based on my understanding, I'm likely to be using (or considering the use of) the following semantic HTML elements in my webpages, at least the ones associated with basic website structure (rather than something like <figure>, which I will consider in the future blog post). Note that I am listing them in the rough order that they would tend to appear in an HTML page:

• <header> — the header section of the document, that can contain links and heading elements (e.g. <h1>).
• <nav> — contains lists of webpage navigation links.
• <main> – the main content in the document.
• <article> — independent, self contained content within the webpage.
• <section> – a section within the HTML document.
• <aside> — defines content that is peripheral to the main HTML content.
• <footer> — the footer of a document.

Frankly, some of these can be rather confusing, because it's not 100% fixed in terms of what these different elements are actually used for, although this is often explained by the following sort of diagram, which shows the structure of a typical page.

As I said earlier, it is rather confusing regarding when some of these elements should be used, largely because if you look at how they are defined, it's rather ambiguous. This seems particularly the case for the <article> and <section> elements, where it is difficult to understand whether one should be nesting inside the other. Also, I personally find it difficult to decide whether there is a functionally useful difference between <main> and <article>.

After some thought, I have decided that the <main> element is superfluous to my design, at least for the time being, whereas <article> does make some sense to use and hence I will include the latter. My stance on <section> is that it makes sense to me for that to be nested inside <article>.

It is worth bearing in mind that these kind of decisions are not in any way critical, because webpage will display just fine without the use of any of these and as with most other HTML elements, they can be used very flexibly without it causing a problem. In my case, this series of blog posts is a journey through thought processes that lead to certain design decisions and so I reserve the right to change my mind as I go along. Nonetheless, for the moment, I will be using the following webpage structure in these blog posts. Note that the diagram attempts to show how some of the elements are nested inside other ones as part of the structure. For example, the <nav> element will only appear at present inside the <header> element.

Adding and styling the basic page navigation

Now I have discussed the webpage structure for these blog posts going forward and how they are supported by certain semantic HTML elements, I want to look into creating the basic navigation menu that is the nominal focus of this blog post. I will no doubt be returning to this kind of subject later on, as I move ahead with the design of the website, but I just want to attempt something straightforward that I can build on later.

I have implemented this kind of thing in the past, so I've got an idea of the approach, bit it has been quite a while. Both looking back at those earlier attempts and making use of a CSS Navigation Bar tutorial, here is the process I have gone through.

The basic HTML

No surprise that the basis for the menu is based on HTML. It appears a common idea that we can think of a menu as a list of links and therefore semantically, it makes sense to use the corresponding HTML as the basis for our menu. In other words, by using an unordered list: <ul> .. </ul>. In my case, I have three links: one for the previous blog post (represented by a left arrow SVG), one that takes you back to the home page (represented by a home SVG) and a third for the next blog post (represented by a right arrow SVG), assuming the blog post already exists. Importantly, this unordered list is enclosed within a navigation section (using the <nav> element. Thus, it would look like the following:

<nav>

<ul>
   <li><a href="prev.html">
       <img src="icons/icon_big_left_arrow.svg"
            alt="Previous blog post."></a></li>
   <li><a href="home.html">
       <img src="icons/icon_home.svg"
            alt="Homepage."></a></li>
   <li><a href="next.html">
       <img src="icons/icon_big_right_arrow.svg"
            alt="Next blog post."></a></li>
</ul>

</nav>

Note that the unsigned list (<ul) is nested within the navigation element (<nav>), which is important. This is all that is required from an HTML point of view. The magic then happens in the CSS.

The supporting CSS

The CSS that makes the presentation possible is shown below.

• We remove any displayed bullets, because they aren't relevant.
• We set the margin and padding to 0, because we don't want any extra space round the list entries.
• Each list element is set to be "inline", so that each item on the list will appear next to each other (as the navigation is displayed horizontally).
• Finally, we set the icon images to have a width of 40 pixels, so they will appear at a reasonable size.

nav ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
}

nav li
{
   display: inline;
}

nav img
{
   width: 40px;
}

Adding and styling the published and updated date section.

This is nice and straightforward at the moment, because we are just displaying a calendar icon, to emphasise the use of dates, followed by text that displays the published and updated date (if that is relevant).

The basic HTML

Nothing too exciting here, but importantly we are using a <section> element to define this as a small separate section of the article. A typical example would look like the following.

<p><img src="icons/icon_calendar.svg"
          alt="Published and updated date of webpage.">
          18-AUG-2025, updated 20-AUG-2025</p>]

The supporting CSS

In this case, it is very straightforward. We set the height of the calendar icon such that it will match nicely with the text that is following it.

section.published img
{
   height: 1em;
}