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

1 <p>This is <a href="http://google.com" rel="external">an external link</a></p>

1 <p>This is <a href="http://maban.co.uk" rel="me">my website</a></p>

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

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

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

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

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

 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>

 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>

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">

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">

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">

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>

 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>

 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>

 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>

 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>

 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>

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>

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

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

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>

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>

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

 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>

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>

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>

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>

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>

1 <p class="field">
2     <input type="search" placeholder="Search" autocomplete="on" /><input type="submit" value="Go" />
3 </p>

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>

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>

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>

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>

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>

 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>

 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>

 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>

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>

 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>

 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>

 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>

 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>

 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>

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>

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>

1 <h1>Heading One</h1>

1 <h2>Heading Two</h2>

1 <h3>Heading Three</h3>

1 <h4>Heading Four</h4>

1 <h5>Heading Five</h5>

1 <h6>Heading Six</h6>

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-->

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-->

1 <ol>
2     <li>Bread</li>
3     <li>Milk</li>
4     <li>Eggs</li>
5     <li>Butter</li>
6 </ol>

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>

1 <audio src="/_media/audio/audio.mp3" controls></audio>

1 <img src="/image/image.jpg" alt="Some alt text"/>

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>

1 <nav class="nav-breadcrumb list-horizontal" role="navigation" aria-label="Breadcrumb">
2     <ol>
3         <li><a href="#">Home</a></li>
4         <li><a href="#">Page Title</a></li>
5         <li>Page Title</li>
6     </ol>
7 </nav><!--/.nav-breadcrumb-->

 1 <nav role="navigation" class="nav nav-page list-horizontal" aria-label="Pagination">
 2     <ul class="alphabet-links">
 3         <li><a href="#a">A</a></li>
 4         <li><a href="#b">B</a></li>
 5         <li><span class="is-active">C</span></li>
 6         <li><a href="#d">D</a></li>
 7         <li><a href="#e">E</a></li>
 8         <li><a href="#f">F</a></li>
 9         <li><a href="#g">G</a></li>
10         <li><a href="#h">H</a></li>
11         <li><a href="#i">I</a></li>
12         <li><a href="#j">J</a></li>
13         <li><a href="#k">K</a></li>
14         <li><a href="#l">L</a></li>
15         <li><a href="#m">M</a></li>
16         <li><a href="#n">N</a></li>
17         <li><a href="#o">O</a></li>
18         <li><a href="#p">P</a></li>
19         <li><span class="is-empty">Q</span></li>
20         <li><a href="#r">R</a></li>
21         <li><a href="#s">S</a></li>
22         <li><a href="#t">T</a></li>
23         <li><a href="#u">U</a></li>
24         <li><a href="#v">V</a></li>
25         <li><a href="#w">W</a></li>
26         <li><span class="is-empty">X</span></li>
27         <li><a href="#y">Y</a></li>
28         <li><a href="#z">Z</a></li>
29     </ul>
30 </nav><!--/.nav-page-->

1 <nav role="navigation" class="nav nav-page list-horizontal" aria-label="Pagination">
2     <ul>
3         <li><a href="#" rel="prev">Previous</a></li>
4         <li><a href="#">1</a></li>
5         <li><span class="is-active">2</span></li>
6         <li><a href="#">3</a></li>
7         <li><a href="#" rel="next">Next</a></li>
8     </ul>
9 </nav><!--/.nav-page-->

1 <nav role="navigation" class="nav" aria-label="Global">
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-->

 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>

1 <p><abbr title="HyperText Markup Language">HTML</abbr></p>

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>

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>

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

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

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

1 <p>This is some <code>inline code</code>.</p>

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

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