Sample Post (repurposed for generic use cases)

Sample-Post.html

<p>This is a sample post. It is designed to test the presentation of range of standard content elements. To be specific, these are the non-structured, elements that would make up the main content of a generic page, post, or article. This content is CMS agnostic and Markdown-friendly. A properly configured editor should support (and perhaps even be limited to) the set of elements on this page.</p>
<h2 id="this-is-a-major-heading-h2">This is a major heading (h2)</h2>
<p>If you peek at it with a web inspector, you'll see that it is an <code>H2</code>. There should only be one first level heading per page and it should be reserved for the page title itself. In most CMSes this title field is separate from the main content body and its placement is controlled at the template level, ideally with a custom class attribute. Consult the <a href="http://html5doctor.com/outlines/">HTML5 outlining algorithm</a> for best practice.</p>
<p>There's nothing stopping you from using <code>H3</code>, <code>H4</code>, or <code>H5</code>. They are all appropriately styled with a nod to <a href="http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326">Bringhurst</a>, and you can check out a preview of how they look below.</p>
<h3 id="this-is-a-third-level-heading-h3">This is a third-level heading (h3)</h3>
<p>Here, have some <a href="http://slipsum.com">slipsum</a> in a <code>&lt;blockquote&gt;</code>:</p>
<blockquote>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</blockquote>
<h4 id="this-is-a-fourth-level-heading-h4">This is a fourth-level heading (h4)</h4>
<p>Down here we are quite in the weeds already. I guess this is a good a time as any to say that lists are appropriately styled:</p>
<h5 id="milkshake-ingredients-to-get-at-the-supermarket-h5">Milkshake ingredients to get at the supermarket (h5)</h5>
<ul>
<li>Bananas</li>
<li>Cocoa</li>
<li>Milk</li>
</ul>
<p><em>Add bananas, chocolate milk powder, and milk to blender. Blend at high-speed until suitably frothy. Drink and then instagram a pic of your milkshake moustache for extra hipster cool points or something.</em></p>
<h5 id="steps-to-recovery-from-milkshake-addiction-h5">Steps to recovery from milkshake addiction (h5)</h5>
<ol type="1">
<li>Discard your blender to remove temptation.</li>
<li>Don't make milkshakes.</li>
<li>Repeat step 2 until unreasonable desire for milkshakes has abated.</li>
</ol>
<p>Both of the preceding lists were subtitled with fifth-level headings. Sixth level headings are usually displayed as minor label elements and usually displayed in the font-size as the body text itself (sometimes in bold, italic, or a lighter color).</p>
<h2 id="also-images">Also: Images</h2>
<p>You can embed images in posts too, and they'll respect the width of your browser:</p>
<p><a href="http://www.flickr.com/photos/zachharkey/5119984852/" title="example-blue-1 by Zach Harkey, on Flickr"> <img src="http://farm5.staticflickr.com/4027/5119984852_b3a0aec771_b.jpg" alt="example-blue-1"> </a></p>
<p><em>A placeholder image of the number 1 on a blue background</em></p>
<figure>
<img src="http://farm5.staticflickr.com/4027/5119984852_b3a0aec771_b.jpg" alt="Placeholder Image" /><figcaption>Placeholder Image</figcaption>
</figure>

Sample-Post.md

This is a sample post. It is designed to test the presentation of range of standard content elements. To be specific, these are the non-structured, elements that would make up the main content of a generic page, post, or article. This content is CMS agnostic and Markdown-friendly. A properly configured editor should support (and perhaps even be limited to) the set of elements on this page.

This is a major heading (h2)

If you peek at it with a web inspector, you'll see that it is an H2. There should only be one first level heading per page and it should be reserved for the page title itself. In most CMSes this title field is separate from the main content body and its placement is controlled at the template level, ideally with a custom class attribute. Consult the HTML5 outlining algorithm for best practice.

There's nothing stopping you from using H3, H4, or H5. They are all appropriately styled with a nod to Bringhurst, and you can check out a preview of how they look below.

This is a third-level heading (h3)

Here, have some slipsum in a <blockquote>:

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

This is a fourth-level heading (h4)

Down here we are quite in the weeds already. I guess this is a good a time as any to say that lists are appropriately styled:

Milkshake ingredients to get at the supermarket (h5)

• Bananas
• Cocoa
• Milk

Add bananas, chocolate milk powder, and milk to blender. Blend at high-speed until suitably frothy. Drink and then instagram a pic of your milkshake moustache for extra hipster cool points or something.

Steps to recovery from milkshake addiction (h5)

1. Discard your blender to remove temptation.
2. Don't make milkshakes.
3. Repeat step 2 until unreasonable desire for milkshakes has abated.

Both of the preceding lists were subtitled with fifth-level headings. Sixth level headings are usually displayed as minor label elements and usually displayed in the font-size as the body text itself (sometimes in bold, italic, or a lighter color).

Inline Images

You can embed images in posts too, and they'll respect the width of your browser. This particular image is placed in a paragraph by itself and a caption is provided by the following paragraph in italics.

A placeholder image of the number 1 on a blue background

Images as Figures with captions

Here is another image. This time the image is marked up as an HTML5 <figure> with a proper <figcaption>.