a-mail
1 <p>This is <a href="mailto:">an email link</a></p>

This is an email link

a-rel-external
1 <p>This is <a href="http://google.com" rel="external">an external link</a></p>
a-rel-xfn
1 <p>This is <a href="http://maban.co.uk" rel="me">my website</a></p>

This is my website

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

This is an inline link.

alert-default
1 <div class="alert">
2     <p>This is a general notification.</p>
3 </div><!-- .alert -->

This is a general notification.

alert-failure
1 <div class="alert alert-failure">
2     <p>This is a notification of a failed action or event.</p>
3 </div><!-- .alert-failure -->

This is a notification of a failed action or event.

alert-info
1 <div class="alert alert-info">
2     <p>This is a notification with some information.</p>
3 </div><!-- .alert-info -->

This is a notification with some information.

alert-success
1 <div class="alert alert-success">
2     <p>This is a notification of a successful action or event.</p>
3 </div><!-- .alert-success -->

This is a notification of a successful action or event.

availability
 1 <!-- Inspired by http://csswizardry.com/work/ -->
 2 
 3 <table class="availability">
 4     <tfoot>
 5         <tr class="availability-year">
 6             <th colspan="8">2014</th>
 7             <th colspan="4">2015</th>
 8         </tr>
 9     </tfoot>
10     <thead class="availability-header">
11         <tr class="availability-month">
12             <th><abbr title="May 2014">May</abbr></th>
13             <th><abbr title="June 2014">Jun</abbr></th>
14             <th><abbr title="July 2014">Jul</abbr></th>
15             <th><abbr title="August 2014">Aug</abbr></th>
16             <th><abbr title="September 2014">Sep</abbr></th>
17             <th><abbr title="October 2014">Oct</abbr></th>
18             <th><abbr title="November 2014">Nov</abbr></th>
19             <th><abbr title="December 2015">Dec</abbr></th>
20             <th><abbr title="January 2015">Jan</abbr></th>
21             <th><abbr title="February 2015">Feb</abbr></th>
22             <th><abbr title="March 2015">Mar</abbr></th>
23             <th><abbr title="April 2015">Apr</abbr></th>
24         </tr>
25     </thead>
26     <tbody class="availability-body">
27         <tr class="availability-schedule">
28             <td class="availability-unavailable" title="Unavailable">Unavailable</td>
29             <td class="availability-unavailable" title="Unavailable">Unavailable</td>
30             <td class="availability-unavailable" title="Unavailable">Unavailable</td>
31             <td class="availability-unavailable" title="Unavailable">Unavailable</td>
32             <td class="availability-limited" title="Limited Availability">Limited</td>
33             <td class="availability-limited" title="Limited Availability">Limited</td>
34             <td class="availability-available" title="Availabile">Available</td>
35             <td class="availability-available" title="Availabile">Available</td>
36             <td class="availability-available" title="Availabile">Available</td>
37             <td class="availability-available" title="Availabile">Available</td>
38             <td class="availability-available" title="Availabile">Available</td>
39             <td class="availability-available" title="Availabile">Available</td>
40         </tr>
41     </tbody>
42 </table>
2014 2015
May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr
Unavailable Unavailable Unavailable Unavailable Limited Limited Available Available Available Available Available Available
contact
 1 <p class="vcard">
 2     Name: <span class="honorific-prefix"> </span> <span class="fn"> </span><br/>
 3     Nickname: <span class="nickname"> </span><br/>
 4     Role: <span class="role"> </span><br/>
 5     Organisation: <span class="org"> </span><br/>
 6     Website: <a href="#" class="url"> </a><br/>
 7     Email: <a mailto="#" class="email"> </a><br/>
 8     Tel: <span class="tel"> </span><br/>
 9     Birthday: <time class="bday"> </time><br/>
10     <img src="" class="photo" />
11 </p>

Name:
Nickname:
Role:
Organisation:
Website:
Email:
Tel:
Birthday:

form-button-default
1 <button>Button</button>
2 <button type="submit">Submit button</button>
3 <a href="#" class="button">Link button</a>
4 <input type="button" value="Input button">
5 <input type="submit" value="Input submit button">
Link button
form-button-size-l
1 <button class="button-l">Button</button>
2 <button type="submit" class="button-l">Submit button</button>
3 <a href="#" class="button button-l">Link button</a>
4 <input type="button" value="Input button" class="button-l">
5 <input type="submit" value="Input submit button" class="button-l">
Link button
form-button-size-s
1 <button class="button-s">Button</button>
2 <button type="submit" class="button-s">Submit button</button>
3 <a href="#" class="button button-s">Link button</a>
4 <input type="button" value="Input button" class="button-s">
5 <input type="submit" value="Input submit button" class="button-s">
Link button
form-button-style-disabled
1 <button disabled>Button</button>
2 <button type="submit" disabled>Submit button</button>
3 <a href="#" class="button-disabled">Link button</a>
4 <input type="button" value="Input button" disabled>
5 <input type="submit" value="Input submit button" disabled>
Link button
form-datalist-multiple
 1 <p>
 2 	<label for="locations">Select your State <abbr title="Required">*</abbr></label>
 3 	<datalist id="locations">
 4 	    <select name="locations"><!-- Browser Fallback -->
 5     	    <option value="United Kingdom">United Kingdom</option>
 6     	    <option value="United States">United States</option>
 7     	    <option value="France">France</option>
 8     	    <option value="Spain">Spain</option>
 9     	    <option value="Germany">Germany</option>
10     	    <option value="Russia">Russia</option>
11     	    <option value="China">China</option>
12 	    </select>
13 	    If other, please specify:
14 	</datalist>
15 	<input id="text" type="text" name="location" list="locations" multiple/>
16 	<small class="note">Note about this selection</small>
17 </p>

If other, please specify: Note about this selection

form-datalist
 1 <p>
 2 	<label for="locations">Select your State <abbr title="Required">*</abbr></label>
 3 	<datalist id="locations">
 4 	    <select name="locations"><!-- Browser Fallback -->
 5     	    <option value="United Kingdom">United Kingdom</option>
 6     	    <option value="United States">United States</option>
 7     	    <option value="France">France</option>
 8     	    <option value="Spain">Spain</option>
 9     	    <option value="Germany">Germany</option>
10     	    <option value="Russia">Russia</option>
11     	    <option value="China">China</option>
12 	    </select>
13 	    If other, please specify:
14 	</datalist>
15 	<input id="text" type="text" name="location" list="locations"/>
16 	<small class="note">Note about this selection</small>
17 </p>

If other, please specify: Note about this selection

form-fieldset-select-checkboxes-captions
 1 <form>
 2     <fieldset class="select field">
 3         <legend>Checkboxes with captions <abbr title="Required">*</abbr></legend>
 4         <ul class="list-form">
 5             <li>
 6                 <label for="checkbox11"><input id="checkbox11" name="checkbox" type="checkbox" checked/> Choice A</label>
 7                 <small class="note">Note about this option</small>
 8             </li>
 9             <li>
10                 <label for="checkbox21"><input id="checkbox21" name="checkbox" type="checkbox"/> Choice B</label>
11                 <small class="note">Note about this option</small>
12             </li>
13             <li>
14                 <label for="checkbox31"><input id="checkbox31" name="checkbox" type="checkbox"/> Choice C</label>
15                 <small class="note">Note about this option</small>
16             </li>
17         </ul>
18     </fieldset>
19 </form>
Checkboxes with captions *
  • Note about this option
  • Note about this option
  • Note about this option
form-fieldset-select-checkboxes
 1 <form>
 2     <fieldset class="select field">
 3         <legend>Checkboxes <abbr title="Required">*</abbr></legend>
 4         <ul class="list-form">
 5             <li>
 6                 <label for="checkbox10"><input id="checkbox10" name="checkbox" type="checkbox" checked/> Choice A</label>
 7             </li>
 8             <li>
 9                 <label for="checkbox20"><input id="checkbox20" name="checkbox" type="checkbox"/> Choice B</label>
10             </li>
11             <li>
12                 <label for="checkbox30"><input id="checkbox30" name="checkbox" type="checkbox"/> Choice C</label>
13             </li>
14         </ul>
15         <small class="note">Note about these options</small>
16     </fieldset>
17 </form>
Checkboxes *
Note about these options
form-fieldset-select-radios
 1 <form>
 2     <fieldset class="select field">
 3         <legend>Radios <abbr title="Required">*</abbr></legend>
 4         <ul class="list-form">
 5             <li>
 6                 <label for="radio1"><input id="radio1" name="radio" type="radio" checked/> Option 1</label>
 7             </li>
 8             <li>
 9                 <label for="radio2"><input id="radio2" name="radio" type="radio"/> Option 2</label>
10             </li>
11             <li>
12                 <label for="radio3"><input id="radio3" name="radio" type="radio"/> Option 3</label>
13             </li>
14         </ul>
15         <small class="note">Note about these options</small>
16     </fieldset>
17 </form>
Radios *
Note about these options
form-fieldset
1 <form>
2     <fieldset>
3     	<legend>Legend</legend>
4     	<p><small class="note">Required fields are marked <abbr title="Required">*</abbr></small></p>
5     </fieldset>
6 </form>
Legend

Required fields are marked *

form-file-multiple
1 <p class="field">
2     <label for="upload-multiple">Upload Files</label>
3     <input name="upload-multiple" type="file" multiple/>
4 </p>

form-file
1 <p class="field">
2     <label for="upload">Upload Files</label>
3     <input name="upload" type="file" />
4 </p>

form-input-checkbox-disabled
1 <p>
2     <label for="checkbox"><input id="checkbox" type="checkbox" disabled/> Disabled checkbox</label>
3     <small class="note">Note about this field</small>
4 <p>

Note about this field

form-input-checkbox
1 <p class="field">
2     <label for="checkbox"><input id="checkbox" type="checkbox"/> Checkbox</label>
3     <small class="note">Note about this field</small>
4 <p>

Note about this field

form-input-color
1 <p class="field">
2     <label for="color">Pick a colour</label>
3     <input name="color" type="color"/>
4 </p>

form-input-date
 1 <p class="field">
 2     <label for="date">Pick a date</label>
 3     <input name="date" type="date"/>
 4 </p>
 5 
 6 <p class="field">
 7     <label for="date-ranged">Pick a date in 2013</label>
 8     <input name="date-ranged" type="date" min="2013-01-01" max="2013-12-31"/>
 9 </p>
10 
11 <p class="field">
12     <label for="date-month">Pick a month</label>
13     <input name="date-month" type="month"/>
14 </p>
15 
16 <p class="field">
17     <label for="date-week">Pick a week</label>
18     <input name="date-week" type="week"/>
19 </p>
20 
21 <p class="field">
22     <label for="date-time">Pick a time</label>
23     <input name="date-time" type="time"/>
24 </p>

form-input-email
1 <p class="field">
2     <label for="email">Email address <abbr title="Required">*</abbr></label>
3     <input id="email" type="email" placeholder="you@example.com" required/>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-input-number
1 <p class="field">
2     <label for="number">Pick a number</label>
3     <input name="number" type="number"/>
4 </p>
5 
6 <p class="field">
7     <label for="number-ranged">Rate your meal between 0 and 5</label>
8     <input name="number-ranged" type="number" min="0" max="5" step="0.5"/>
9 </p>

form-input-password
1 <p class="field">
2     <label for="password">Password <abbr title="Required">*</abbr></label>
3     <input id="password" type="password" required/>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-input-range
1 <p class="field">
2     <label for="number-range">Pick a number</label>
3     <input name="number-range" type="range" min="1" max="100" value="0"/>
4 </p>

form-input-tel
1 <p class="field">
2     <label for="phone-number">Phone number</label>
3     <input id="phone-number" type="tel" />
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-input-text-disabled
1 <p>
2     <label for="text-disabled">Disabled text</label>
3     <input id="text-disabled" type="text" disabled/>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-input-text
1 <p class="field">
2     <label for="text">Text <abbr title="Required">*</abbr></label>
3     <input id="text" type="text" required/>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-input-url
1 <p class="field">
2     <label for="url">Web address <abbr title="Required">*</abbr></label>
3     <input id="url" type="url" placeholder="http://example.com" required/>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-inputs-combined
1 <p>
2 	<label for="combined">Combined Input</label>
3 	<span class="combined">
4 		<input id="combined" class="input" type="text"/><!--
5 	 --><input type="button" class="button" value="Input Button"/>
6 	</span>
7 </p>

form-options.checkboxes-captions
 1 <form>
 2     <fieldset>
 3     	<legend>Checkbox <abbr title="Required">*</abbr></legend>
 4     	<ul class="list-form">
 5     		<li>
 6     			<label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
 7     			<small class="note">Note about these option</small>
 8     		</li>
 9     		<li>
10     			<label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
11     			<small class="note">Note about these option</small>
12     		</li>
13     		<li>
14     			<label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
15     			<small class="note">Note about these option</small>
16     		</li>
17     	</ul>
18     </fieldset>
19 </form>
Checkbox *
  • Note about these option
  • Note about these option
  • Note about these option
form-options.checkboxes
 1 <fieldset>
 2 	<legend>Checkbox <abbr title="Required">*</abbr></legend>
 3 	<ul class="list-form">
 4 		<li>
 5 			<label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
 6 		</li>
 7 		<li>
 8 			<label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
 9 		</li>
10 		<li>
11 			<label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
12 		</li>
13 	</ul>
14 	<small class="note">Note about these options</small>
15 </fieldset>
Checkbox *
Note about these options
form-options.radios
 1 <form>
 2     <fieldset>
 3     	<legend>Radio <abbr title="Required">*</abbr></legend>
 4     	<ul class="list-form">
 5     		<li>
 6     			<label for="radio1" class="check"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"/>Option 1</label>
 7     		</li>
 8     		<li>
 9     			<label for="radio2" class="check"><input id="radio2" name="radio" type="radio" class="radio"/>Option 2</label>
10     		</li>
11     		<li>
12     			<label for="radio3" class="check"><input id="radio3" name="radio" type="radio" class="radio"/>Option 3</label>
13     		</li>
14     	</ul>
15     	<small class="note">Note about these options</small>
16     </fieldset>
17 </form>
Radio *
Note about these options
form-search-global
1 <form class="search-global" id="search-global">
2     <input type="search" id="search-global-input" class="search-global-input" autocomplete="off" placeholder="Search" name="search-global" />
3     <!-- consider applying autofocus="autofocus" to input -->
4     <button class="search-global-submit" id="search-global-submit" value="Search" type="submit" name="search-global">Search</button>
5 </form>
form-select-disabled
 1 <p>
 2     <label for="select-disabled">Disabled select <abbr title="Required">*</abbr></label>
 3     <select id="select-disabled" disabled>
 4         <optgroup label="Option Group A">
 5             <option>Option One</option>
 6             <option>Option Two</option>
 7             <option>Option Three</option>
 8         </optgroup>
 9         <optgroup label="Option Group B">
10             <option>Option Four</option>
11             <option>Option Five</option>
12             <option>Option Six</option>
13         </optgroup>
14     </select>
15     <small class="note">Note about this selection</small>
16 </p>

Note about this selection

form-select-multiple-disabled
 1 <p>
 2     <label for="select-multiple-disabled">Disabled multiple select <abbr title="Required">*</abbr></label>
 3     <select id="select-multiple-disabled" multiple disabled>
 4         <optgroup label="Option Group A">
 5             <option>Option One</option>
 6             <option>Option Two</option>
 7             <option>Option Three</option>
 8         </optgroup>
 9         <optgroup label="Option Group B">
10             <option>Option Four</option>
11             <option>Option Five</option>
12             <option>Option Six</option>
13         </optgroup>
14     </select>
15     <small class="note">Note about this selection</small>
16 </p>

Note about this selection

form-select-multiple
 1 <p class="field">
 2     <label for="select-multiple">Multiple select <abbr title="Required">*</abbr></label>
 3     <select id="select-multiple" multiple>
 4         <optgroup label="Option Group A">
 5             <option>Option One</option>
 6             <option>Option Two</option>
 7             <option>Option Three</option>
 8         </optgroup>
 9         <optgroup label="Option Group B">
10             <option>Option Four</option>
11             <option>Option Five</option>
12             <option>Option Six</option>
13         </optgroup>
14     </select>
15     <small class="note">Note about this selection</small>
16 </p>

Note about this selection

form-select
 1 <p>
 2 	<label for="select">Select your State <abbr title="Required">*</abbr></label>
 3 	<select id="state">
 4 	    <option>Alabama</option>
 5 	    <option>Alaska</option>
 6 	    <option>Arizona</option>
 7 	    <option>Arkansas</option>
 8 	    <option>American Samoa</option>
 9 	    <option>California</option>
10 	    <option>Colorado</option>
11 	    <option>Connecticut</option>
12 	    <option>Delaware</option>
13 	    <option>District of Columbia</option>
14 	    <option>Florida</option>
15 	    <option>Georgia</option>
16 	    <option>Guam</option>
17 	    <option>Hawaii</option>
18 	    <option>Idaho</option>
19 	    <option>Illinois</option>
20 	    <option>Indiana</option>
21 	    <option>Iowa</option>
22 	    <option>Kansas</option>
23 	    <option>Kentucky</option>
24 	    <option>Louisiana</option>
25 	    <option>Maine</option>
26 	    <option>Maryland</option>
27 	    <option>Massachusetts</option>
28 	    <option>Michigan</option>
29 	    <option>Minnesota</option>
30 	    <option>Mississippi</option>
31 	    <option>Missouri</option>
32 	    <option>Montana</option>
33 	    <option>Nebraska</option>
34 	    <option>Nevada</option>
35 	    <option>New Hampshire</option>
36 	    <option>New Jersey</option>
37 	    <option>New Mexico</option>
38 	    <option>New York</option>
39 	    <option>North Carolina</option>
40 	    <option>North Dakota</option>
41 	    <option>Northern Mariana Islands</option>
42 	    <option>Ohio</option>
43 	    <option>Oklahoma</option>
44 	    <option>Oregon</option>
45 	    <option>Pennsylvania</option>
46 	    <option>Puerto Rico</option>
47 	    <option>Rhode Island</option>
48 	    <option>South Carolina</option>
49 	    <option>South Dakota</option>
50 	    <option>Tennessee</option>
51 	    <option>Texas</option>
52 	    <option>United States Virgin Islands</option>
53 	    <option>Utah</option>
54 	    <option>Vermont</option>
55 	    <option>Virginia</option>
56 	    <option>Washington</option>
57 	    <option>West Virginia</option>
58 	    <option>Wisconsin</option>
59 	    <option>Wyoming</option>
60 	</select>
61 	<small class="note">Note about this selection</small>
62 </p>

Note about this selection

form-signup
 1 <form>
 2     <ul class="list-form">
 3         <li class="form-field">
 4         	<input id="text" class="input" type="email" placeholder="email" />
 5         	<small class="note">Note about this field</small>
 6         </li>
 7         <li class="form-field">
 8         	<input id="text" class="input" type="text" placeholder="first name" />
 9         </li>
10         <li class="form-field">
11         	<select>
12         	  <option>1</option>
13         	  <option>2</option>
14         	  <option>3</option>
15         	  <option>4</option>
16         	  <option>5</option>
17         	</select>
18         </li>
19     </ul>
20 </form>
  • Note about this field
form-textarea-disabled
1 <p>
2     <label for="textarea">Disabled textarea</label>
3     <textarea id="textarea" rows="8" cols="32" disabled></textarea>
4     <small class="note">Note about this field</small>
5 </p>

Note about this field

form-textarea
1 <p>
2 	<label for="textarea">Textarea <abbr title="Required">*</abbr></label>
3 	<textarea id="textarea" class="input" rows="8" cols="32" required></textarea>
4 	<small class="note">Note about this field</small>
5 </p>

Note about this field

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

Heading One

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

Heading Two

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

Heading Three

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

Heading Four

heading-5
1 <h5>Heading Five</h5>
Heading Five
heading-6
1 <h6>Heading Six</h6>
Heading Six
lede
1 <p class="lede">A <strong>lede</strong>, or <strong>lead</strong>, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word <em>need</em>.</p><!--/.lede-->

A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.

list-horizontal
1 <nav role="navigation" class="nav list-horizontal">
2     <ul class="list">
3         <li><a href="#">Lorem link</a></li>
4         <li><a href="#" class="is-active">Active link</a></li>
5         <li><a href="#">Ipsum link</a></li>
6         <li><a href="#">Dolor link</a></li>
7     </ul>
8 </nav><!--/.nav-horizontal-->
list-ordered
1 <ol>
2     <li>Bread</li>
3     <li>Milk</li>
4     <li>Eggs</li>
5     <li>Butter</li>
6 </ol>
  1. Bread
  2. Milk
  3. Eggs
  4. Butter
list-unordered
1 <ul>
2     <li>Preheat oven to 180°C</li>
3     <li>Mix ingredients together in a bowl</li>
4     <li>Grease a baking tin</li>
5     <li>Pour the mixture into the baking tin</li>
6     <li>Bake in oven for 40-45 minutes</li>
7 </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 <audio src="/_media/audio/audio.mp3" controls></audio>
media-image
1 <img src="/image/image.jpg" alt="Some alt text"/>
Some alt text
media-video
1 <video controls>
2     <source src="/_media/video/video.webm" type="video/webm"/>
3     <source src="/_media/video/video.mp4" type="video/mp4"/>
4 </video>
table
 1 <table>
 2     <thead>
 3         <tr>
 4             <th>State</th>
 5         </tr>
 6         <tr>
 7             <th>Minimum driving age</th>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <th>South Africa</th>
13             <td>18</td>
14         </tr>
15         <tr>
16             <th>Canada</th>
17             <td>16</td>
18         </tr>
19         <tr>
20             <th>United States</th>
21             <td>14-21</td>
22         </tr>
23         <tr>
24             <th>Bahamas</th>
25             <td>17</td>
26         </tr>
27         <tr>
28             <th>Bangladesh</th>
29             <td>18</td>
30         </tr>
31         <tr>
32             <th>China</th>
33             <td>18</td>
34         </tr>
35         <tr>
36             <th>Ireland</th>
37             <td>17</td>
38         </tr>
39         <tr>
40             <th>Spain</th>
41             <td>18</td>
42         </tr>
43         <tr>
44             <th>Australia</th>
45             <td>16-18</td>
46         </tr>
47     </tbody>
48 </table>
State
Minimum driving age
South Africa 18
Canada 16
United States 14-21
Bahamas 17
Bangladesh 18
China 18
Ireland 17
Spain 18
Australia 16-18
text-abbr
1 <p><abbr title="HyperText Markup Language">HTML</abbr></p>

HTML

text-addr
1 <p class="adr">
2     <span class="street-address">10 Downing Street</span><br/>
3     <span class="locality">London</span><br/>
4     <span class="region">City of London</span><br/>
5     <span class="postal-code">A12 3BC</span><br/>
6     <span class="country-name">United Kingdom</span><br/>
7 </p>

10 Downing Street
London
City of London
A12 3BC
United Kingdom

text-blockquote
1 <blockquote>
2     <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>
3 </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 <p class="note">Your email address will not be published.</p><!--/.caption-->

Your email address will not be published.

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

The Guardian, January 2nd, 2014

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

This is some inline code.

text-dfn
1 <p>A <dfn>kernel</dfn> is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.</p>

A kernel is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.

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

This is a caption