<h1> Heading level 1

<h2> Heading level 2

<h3> Heading level 3

<h4> Heading level 4

<h1 class="headline"> Post heading

Header image

<figure class="header-image">
  <div class="header-image-wrapper">
    <img src="/images/header-images/test-header-image.jpeg"/>
  <figcaption class="header-image-caption">Some caption about the image</figcaption>
Some caption about the image (optional)

<h2> Post heading level 2

<h3> Post heading level 3

<h4> Post heading level 4

<p> Paragraph. Our brains work in weird ways. Sometimes you struggle to think of anything, you sit there looking at the blank computer screen for hours, unable to make something look good. Never mind whether you are a designer or developer, you have trouble to put pieces together so the website behaves the way you want.

<strong><b> Strong/bold text

<a> Link

<em><i> Emphasized, italic text

<small> Small text

<ul> Unordered list:

<ol> Ordered list:

  1. A point
  2. Another point
  3. Another point
    1. A nested point
    2. Another nested point
    3. Another nested point

<blockquote> Blockquote (with <cite>):

This was a vision, fresh and clear as a mountain stream, the mind revealing itself to itself. In my vision, I was on the veranda of a vast estate, a palazzo of some fantastic proportion. There seemed to emanate from it a light from within, this gleaming, radiant marble. I'd known this place. I had in fact been born and raised there. This was my first return.

Major Briggs
Using markdown:
> Hi there!
> -- <cite>Benjamin Franklin</cite>

<q>Inline quote, he said.

<code> or <span class="code"> or <`back-ticks`> in markdown Inline code

<pre><code> Block code:

code {
  line-height: 1.4em;
  padding-left: $ms0;
  padding-bottom: $ms0;
  margin: $ms3 0;
  overflow: auto;

<figure class="post-image-box"> Post image box:

Barcelona. Photo by Maciek

<figure class="post-image-box">
  <img class="post-image" src="/images/11951699_1242705769088872_123862856957539727_o.jpg" alt="11951699_1242705769088872_123862856957539727_o" width="374" height="374" />

    Barcelona. Photo by Maciek

<hr> Separator:

Good practices for writers


  • maintain proper heading structure; use <h2>/## for top-level headings inside the post content because the headline is the actual first-level heading <h1>/#
  • to avoid orphans or widows you can use &nbsp; to glue words together
  • when you add floating post images (with text wrapped around), don't put them in a separate paragraph
  • create gists for longer blocks of code

When using <html>

  • use semantic <strong> rather than <b>
  • use semantic <em> rather than <i>

When using markdown

  • in lists, don't put an image as the first thing in <li> - it doesn't look good
  • best to use markdown for code blocks - just indent all the code by 4 spaces
  • see Markdown reference