Initially I was planning on writing a style guide. However, this is not so much a guide on how to use certain elements, but more a demonstration of how certain elements are styled.
This page roughly follows the chapters in the
elements of HTML
section in the HTML5 spec. That is, I’ve picked the elements that are
relevant for this site and I also changed the order a bit (for
example, it makes sense to describe the
<code> element together
Usually there is just one
<h1> element on a page and it is used
for the title of the page, as is the case in this page.
If an article is long enough that it needs to be split in several
<h2> element is used. This heading is smaller
smaller than the
<h1> and is not bold. The
<h2> is also used
in lists of articles where the titles of the articles are marked up
Occasionally more hierarchy is necessary and this is where the
<h3> comes in. To make it stand out from an
<h2>, the heading
is a lot smaller and bold. This makes it easier to determine the level
of the heading, especially in a longer text where the
<h3> might not appear on the screen at the same time.
The headings are set in Source Sans Pro.
Because this is a weblog, most of the content will be contained in
paragraphs, using the
<p> element. Normal paragraphs are set in
have chosen this font mainly because I liked the appearance.
Another important reason is that Noticia Text is a complete
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 both, the font Inconsolata is used.
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. </code> </pre>
When quoting someone, use the
<blockquote> element, optionally
combined with a
This is for example a quote from the HTML5 spec:
The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.
The content of the
<cite> element is set in italic, while the
quote itself is indented on both sides to distinguish it from ‘normal’ text.
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 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
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
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
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.
<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.
For side comments, such as small print, you can us the
element. It typically contains disclaimers, caveats and copyright information.
Example: Copyright 2012. All rights reserved.
To mark text as no longer relevant or accurate, use the
element. To mark a text as having been removed, use the
element (for example on a “to do” list).
<s>: My favourite editor is
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 marks.
Example: Okay, I’ll tell you: 42 is
Ultimate Answer to the Ultimate Question of Life, The Universe, and Everything.
To display code fragments inline, use the
<code> element, as shown earlier.
Example: To display code fragments inline, use the
Subscript and superscript
Subscript and superscript can be accomplished using the
Example: Since this is a software development blog and not a science blog, this is the 1st time I’ve used something like “H2O” on this site. And it will also probably be the last time.
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:
|Item||Value 1 (%)||Value 2 (abs)|
|A first item in this table||58||377.0|
- The caption has been placed at the bottom. (Although this is common, it is not the default.)
- 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.