Test page

This page contains examples of many basic HTML elements and their styles.

Typography Headings, paragraphs, lists, and other inline type elements

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Page Header <small>Subtitle</small>

<h1 class="page-header"></h1>

// or
<div class="page-header">
   <h1></h1>
</div>

// or
<section>
   <h1></h1>
</section>

HTML elements

Element Usage Note
<strong> For emphasizing a snippet of text with important
<em> For emphasizing a snippet of text with stress
<abbr> Wraps abbreviations and acronyms to show the expanded version on hover Include optional title attribute for expanded text
<address> For contact information for its nearest ancestor or the entire body of work Preserve formatting by ending all lines with <br>
<hr /> Represents a paragraph-level thematic break Can be written as <hr>
<ins> Represents an addition to the document Include optional cite attribute to specify the address of a document that explains the change
The datetime attribute may be used to specify the time and date of the change.
<del> Represents a removal from the document Same as for <ins>
<mark> Represents a run of text in one document marked or highlighted because of its relevance in another context
<small> Represents side comments such as small print
<sub> Subscripts Water is H2O:   Water is H<sub>2</sub>O
<sup> Superscripts E = MC2:            E = MC<sub>2</sub>

Examples

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

HTML is the best thing since sliced bread. An abbreviation of the word attribute is attr.

Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest. This is marked using the <mark> tag.

Oh no! I wrote something incorrectly. I’d better delete it, using the <del> tag. I could alternately strike something out using the <strike> tag, or strike something out using the <s> tag. So many choices, which I emphasize using the <em> tag.

Just to clarify, this is some inserted text, that I’ll highlight using the <ins> tag.

Information obtained from Twitter Bootstrap and the HTML5 spec. I use the <small> tag here.

Blockquotes

Element Usage Optional
<blockquote> For quoting content from another source Add cite attribute for source URL
Use .alignleft and .alignright classes for floated options
<small> Optional element for adding a user-facing citation, typically an author with title of work Place the <cite> around the title or name of source

To include a blockquote, wrap <blockquote> around any HTML as the quote.

Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
	<small>Someone famous</small>
</blockquote>

Example blockquotes

Default blockquotes are styled as such:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="alignright":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Lists

Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Purus sodales ultricies
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
      1. Phasellus
      2. Purus ultricies
      3. Vestibulum
      4. Ac tristique
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Code Inline and block code snippets

Inline

Wrap inline snippets of code with <code>.

For example, <code>section</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
   <p>Sample text here...</p>
</pre>

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

Google Prettify

The theme supports Google Prettify but it is not included in the download. Download google-code-prettify and view the readme for how to use.

Take the same <pre> element and add two optional classes for enhanced rendering.

<p>Sample text here...</p>
<pre class="prettyprint linenums">
   <p>Sample text here...</p>
</pre>

Tables

Table markup

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tfoot> Container element for table footer rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
Tag Description 
<table>
   <thead>
     <tr>
       <th>…</th>
       <th>…</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>…</td>
       <td>…</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>…</td>
       <td>…</td>
     </tr>
   </tfoot>
</table>

Forms

Inputs as descendents of labels (form legend)

Inputs as siblings of labels


Clickable inputs and buttons

Images

Image alt
Image caption
<figure>
   <img src="" alt="">
   <figcaption>Caption</figcaption>
</figure>
Image alt

Miscellaneous

The grid system

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The grid system is a fluid grid, adapted from Twitter Bootstrap. It utilizes 12 columns and uses percents for column widths instead of fixed pixels.

<div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
</div>

As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 columns.

Alerts Styles for success, warning, and error messages

Default! This is a default alert. 
<div class="alert">
   ...
</div>
Oh snap! Change this and that and try again. 
<div class="alert alert-warning"> [...] </div>

Holy guacamole!

Best check yo self, you're not looking too good.

This is line two

<div class="alert alert-error"> [...] </div>
Success! You successfully read this important alert message. 
<div class="alert alert-success"> [...] </div>
Tip! This is an alert that needs your attention, but it’s not a huge priority just yet. 
<div class="alert alert-info"> [...] </div>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
<div class="well"> [...] </div>

Helper classes

Class Usage
.alignleft Floats an element to the left
.alignright Floats an element to the right
.aligncenter Makes the element a block element and centers it
.clearfix For clearing floats, see "A new micro clearfix hack"
.assistive-text Hides text visually, but it will be available for screenreaders
.hidden Hides from both screenreaders and browsers
.invisible Hides visually and from screenreaders, but maintains layout