Table of Contents
When I started working on this page, I was planning on writing a style guide. In the end it turned out not so much as a guide on how to use certain elements, but more a demonstration of what certain content looks like.
Over the years I’ve found this page useful when redesigning this site: check how things look or if I have forgotten to style anything. But it also serves as an example of how to create e.g. nested lists, definition lists, figures and tables (to name a some types of content I do not use all too often).
First we’ll have a look at the headings.
Usually there is just one
<h1> element on a page and it is used for the
title of the page, as you can see at the top of this page.
If an article is long enough, I divide it into sections. I use the
element to do so. A nice example are some of the conference note posts where
each talk gets its own section.
Occasionally more hierarchy is necessary and this is where the
in. To use the conference notes as an example again: sometimes a talk consists
of multiple sections and I want to mark these as such.
In very rare occasions even more levels are needed and that is what the
I don’t expect to reach the
<h5> level, but there is how that would look like.
Because this is a weblog, most of the content will be contained in
paragraphs, using the
I am using a complete font family. This means I can use e.g. bold to
increase the importance of text (using
<strong>) and italic to put
emphasis on other text (using the
<em> element). Should it be necessary, I
can even combine them to bold italic. Having separate fonts means that the
result looks better than when the browser tries to fake them. In other words, I
can say no to faux bold.
As this is a technical weblog, pieces of code are often part of the articles. They can be included in two separate ways: inline in a paragraph and as a preformatted chunk of text.
For code that needs to be displayed in a normal sentence, as
demonstrated earlier, use the
<code> element. For preformatted text,
<code> wrapped in a
<pre> element, like so:
<pre> <code> Put your source code here... <!-- And another line, but this time quite a bit longer to see what happens when a line is longer than the width of the content block. --> </code> </pre>
There are a couple of ways to quote someone. In the most simple form, it’s just a
Someone said this.
You can also add a source URL (which won’t be visible on the page, but is
present as the
cite attribute) and an attribution, for example:
You can, if you want to, include a link to a source in the attribution:
There are three types of lists: ordered lists (using
<ul>) and finally description lists (
In ordered lists each item is created by an
<li> element and each item
is preceded by a number:
- Here is an example of an item.
- This is an item with a nested list.
- The first sub item.
- The second sub item.
- And back to the original list but this time the list item is a bit longer just to see whether the line is nicely indented.
Unordered lists are similar to ordered lists in the sense that they
are consist of
<li> elements. The difference is that the items are not
- An item in an unordered list
- This item has a nested list:
- Item one
- Item two
- And a last item that contains a bit more text. This mainly shows that if an item spans more than a single line, it is nicely indented.
Description lists are created a bit differently. The
must contain one or more terms (
<dt>) which are followed by one or
more definitions (
<dd>). Note that one term may have more
definitions and multiple terms may be related to a single definition.
- Single term
- Single definition
- First term
- Second term
- Single definition
- Single term
- First definition
- Second definition which—just as with the lists from above—is longer just to demonstrate that we also have a nice indentation going on here.
For figures, such as images, which are (according to the
self-contained and [are] typically referenced as a single unit from
the main flow of the document you can use the
element. Optionally you can add a caption, using the
For example if I would talk about the Ubuntu Circle of Friends logo, I might want to include an image of that logo.
Sometimes I want to make (side)notes in my text.
Just a sidenote.
With two paragraphs.
Specifically for the situation where I want to make it explicit that I have updated a post, there is this note:
If you look at the Markdown source of this page, you can see that I’ve added the
type parameter with the value
update. The idea is that I want this note to
stand out from the normal text, but also draw less attention than the regular
<a> tag you can create links.
To stress emphasis on a certain piece of text, use the
Example: You must try this fancy HTML element.
To change the importance of text, use the
Example: Do not use this element too much.
To mark a text as having been removed, use the
<del> element (for example on
a todo list).
Write style demo
- Update style demo
To represent a title of a “work” (e.g. a book, film, report, etc) use
<cite> element. Most often found on this site in combination
with a quote (using the
Example: To know why 42 is an important number, you must have read The Hitchhiker’s Guide to the Galaxy.
Content quoted from another source, not being a block of code, should
<q> element. Note that the browser add the quotation
Example: Okay, I’ll tell you: 42 is
the Ultimate Answer to the Ultimate
Question of Life, The Universe, and Everything.
To display code fragments inline, use the
<code> element, as shown
throughout this page.
For tabular data, the
<table> element is available. There are a
number of elements related to tables, for instance
<caption>. I’ve combined these in one example (without the
|Option||Value 1 (%)||Value 2 (abs)||Foo|
|A first item in this table||58||377.0||> 234|
Note that the rows are separated by a horizontal line. This should make it easier to follow a row on larger tables while being less ‘heavy’ than e.g. using a background colour every other row.