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

Headings

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.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Basic Grid

The template has a basic 12-column grid included. It's in no way as powerful as other grids out there (like Twitter Bootstrap or Solved by Flexbox) so if you want more control you should their grid instead.

The HTML

<div class="row">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
</div>

1/12

1/12 continues

and increases width

to fill out

the remaining space.

1/3

2/3

1/2

Full

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

Blockquotes

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

Include an optional <footer> for identifying the source and <cite> for the name of the source work.

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Integer posuere erat a ante venenatis.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Example blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference in footer tag:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. 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.

Someone famous in Source Title

Right-aligned blockquote (.blockquote-reverse) with a cite reference:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. 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.
Someone famous

Unordered Lists

List item one
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

Ordered List

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

Description Lists

List Title: List division.
Description List: A description list is perfect for defining terms.
HTML: HyperText Markup Language
CSS: Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language (Wikipedia).

Tables

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

Example code

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

HTML Tags

Address Tag

1600 Pennsylvania Ave NW
Washington, DC 20500
United States

Anchor Tag (aka. Link)

This is an example of a link to the source of this section.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Delete Tag

The del element will let you ~~strikeout text~~ to represent a removal from the document.

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Code Tag

The code element represents a fragment of computer code, like word-wrap: break-word;.

Keyboard Tag

This scarsly known tag emulates keyboard text.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC², which should lift the 2 up.

Variable Tag

This allows you to denote variables.

Forms

Text fields

Text input

Text input (required)

Text input (with placeholder)

Text input (with datalist)

Text input (disabled)

Text input (readonly)

Email input

Search input

Tel input

URL input

Password input

Textarea Textarea text

Date fields

Date input

Month input

Week input

Time input

Datetime input

Datetime-local input

Other fields

Color input

Color input (with list)

Number input

Range input

File input

Radio input

Checkbox input

Checkbox input (disabled)

Select field

Multiple Select field

Input fields and buttons

Link (.btn)

Link (.btn-primary)

Media

Figure

Image alt — Figure caption (`<figcaption>` )

A figure with code as content and <figcaption> before the content:

Listing 4. The primary core interface API declaration.

interface PrimaryCore {
    boolean verifyDataLine();
    void sendData(in sequence<byte> data);
    void initSelfDestruct();
}

Trailing text.

Wide image

Youtube video (iframe)

HTML5 video

Video from W3 demo page.

HTML5 Audio

Miscellaneous

Alerts

Success! You successfully read this important alert message.

Tip! This is an alert that needs your attention, but it’s not a huge priority just yet.

Warning: Change this and that and try again.

Holy guacamole!

This is a super important error.

This is line two

Alert without any classes

<div class="alert alert-success"> [...] </div>
<div class="alert alert-info"> [...] </div>
<div class="alert alert-warning"> [...] </div>
<div class="alert alert-error"> [...] </div>
<div class="alert"> [...] </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"
`.screen-reader-text`	Hides text visually, but it will be available for screenreaders

Jayj HTML5 Theme

This is an awesome description of the site!

Test page