Style demo
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).
Sections
Headings
First we’ll have a look at the headings.
Example H1
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.
Example H2
If an article is long enough, I divide it into sections. I use the <h2>
element to do so. A nice example are some of the conference note posts where
each talk gets its own section.
Example H3
Occasionally more hierarchy is necessary and this is where the <h3>
comes
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.
Example H4
In very rare occasions even more levels are needed and that is what the <h4>
is for.
Example H5
I don’t expect to reach the <h5>
level, but there is how that would look like.
Grouping content
Paragraph
Because this is a weblog, most of the content will be contained in
paragraphs, using the <p>
element.
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.
Code blocks
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,
use <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>
Blockquote
There are a couple of ways to quote someone. In the most simple form, it’s just a
<blockquote>
:
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:
Lists
There are three types of lists: ordered lists (using <ol>
) unordered
lists (<ul>
) and finally description lists (<dl>
).
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
numbered.
- 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 <dl>
element
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.
Figures
For figures, such as images, which are (according to the
HTML5 spec)
self-contained and [are] typically referenced as a single unit from
the main flow of the document
you can use the <figure>
element. Optionally you can add a caption, using the <figcaption>
element.
For example if I would talk about the Ubuntu Circle of Friends logo, I might want to include an image of that logo.
Notes
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:
note
” shortcode.
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
notes.
Text-level semantics
Anchors
Using the <a>
tag you can create links.
First an example of a visited link and then an example of an unvisited link.
Emphasis
To stress emphasis on a certain piece of text, use the <em>
element.
Example: You must try this fancy HTML element.
Strong
To change the importance of text, use the <strong>
element.
Example: Do not use this element too much.
Deleted text
To mark a text as having been removed, use the <del>
element (for example on
a todo list).
Example of <del>
:
Write style demo- Update style demo
Cite
To represent a title of a “work” (e.g. a book, film, report, etc) use
the <cite>
element. Most often found on this site in combination
with a quote (using the <blockquote>
or <q>
element).
Example: To know why 42 is an important number, you must have read The Hitchhiker’s Guide to the Galaxy.
Phrasing content
Content quoted from another source, not being a block of code, should
use the <q>
element. Note that the browser add the quotation
marks.
Example: Okay, I’ll tell you: 42 is the Ultimate Answer to the Ultimate
Question of Life, The Universe, and Everything.
Inline code
To display code fragments inline, use the <code>
element, as shown
throughout this page.
Tabular data
For tabular data, the <table>
element is available. There are a
number of elements related to tables, for instance <thead>
,
<tbody>
, <tfoot>
, <tr>
, <th>
, <td>
,
<caption>
. I’ve combined these in one example (without the <tfoot>
):
Option | Value 1 (%) | Value 2 (abs) | Foo |
---|---|---|---|
A first item in this table | 58 | 377.0 | > 234 |
Second item | 14 | 91.0 | 4,718 |
Third item | 21 | 136.5 | 13,457 |
Last item | 7 | 45.5 | 56,728 |
Total | 100 | 650.0 | > 75,137 |
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.