a
1
2
3
        <p>This is <a href="#">an inline link</a>.</p>

This is an inline link.

heading-1
1
2
3
        <h1>Heading One</h1>

Heading One

heading-2
1
2
3
        <h2>Heading Two</h2>

Heading Two

heading-3
1
2
3
        <h3>Heading Three</h3>

Heading Three

heading-4
1
2
3
        <h4>Heading Four</h4>

Heading Four

heading-5
1
2
3
        <h5>Heading Five</h5>

Heading Five
heading-6
1
2
3
        <h6>Heading Six</h6>

Heading Six
list-ordered
1
2
3
4
5
6
7
8
        <ol>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ol>

  1. Bread
  2. Milk
  3. Eggs
  4. Butter
list-unordered
1
2
3
4
5
6
7
8
9
        <ul>
<li>Preheat oven to 180°C</li>
<li>Mix ingredients together in a bowl</li>
<li>Grease a baking tin</li>
<li>Pour the mixture into the baking tin</li>
<li>Bake in oven for 40-45 minutes</li>
</ul>

  • Preheat oven to 180°C
  • Mix ingredients together in a bowl
  • Grease a baking tin
  • Pour the mixture into the baking tin
  • Bake in oven for 40-45 minutes
media-audio
1
2
3
        <audio src="/_media/audio/audio.mp3" controls></audio>

media-image
1
2
3
        <img src="image.jpg" alt="Some alt text"/>

Some alt text
media-video
1
2
3
4
5
6
        <video controls>
<source src="/_media/video/video.webm" type="video/webm"/>
<source src="/_media/video/video.mp4" type="video/mp4"/>
</video>

text-abbr
1
2
3
        <p><abbr title="HyperText Markup Language">HTML</abbr></p>

HTML

text-blockquote
1
2
3
4
5
        <blockquote>
<p>In matters of truth and justice, there is no difference between large and small problems, for issues concerning the treatment of people are all the same.</p>
</blockquote>

In matters of truth and justice, there is no difference between large and small problems, for issues concerning the treatment of people are all the same.

text-caption
1
2
3
        <p class="note">Your email address will not be published.</p><!--/.caption-->

Your email address will not be published.

text-cite
1
2
3
        <p><cite>The Guardian</cite>, January 2nd, 2014</p>

The Guardian, January 2nd, 2014

text-code-pre
1
2
3
4
5
6
7
8
        <pre class="language-css">
<code>ul li {
list-style-type: square;
padding-left: 0;
}</code>
</pre>

ul li {
    list-style-type: square;
    padding-left: 0;
    }
text-code
1
2
3
4
        <p>This is some <code>inline code</code>.</p>
</pre>

This is some inline code.

text-figure
1
2
3
4
5
6
7
8
        <figure>
<img src="image.jpg" alt="Some alt text"/>
<figcaption>
<p>This is a caption</p>
</figcaption>
</figure>

Some alt text

This is a caption

transcript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        <div class="brad-frost host">
<p><b>Brad</b> All right; welcome to the very first edition of the Style Guides Podcast. My name is Brad Frost.</p>
</div>

<div class="anna-debenham host">
<p><b>Anna</b> I'm Anna Debenham.</p>
</div>

<div class="brad-frost host">
<p><b>Brad</b> And today we are pleased to have Jina Bolton with us. Jina; how are you?</p>
</div>

<div class="jina-bolton guest">
<p><b>Jina</b> I'm doing great. How are you?</p>
</div>

Brad All right; welcome to the very first edition of the Style Guides Podcast. My name is Brad Frost.

Anna I'm Anna Debenham.

Brad And today we are pleased to have Jina Bolton with us. Jina; how are you?

Jina I'm doing great. How are you?