HTML Elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.

Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros at neque pretium sagittis. Sed sodales lorem a ipsum suscipit gravida. Ut fringilla placerat arcu. Phasellus imperdiet. Mauris ac justo et turpis pharetra vulputate.

Foo proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros at neque pretium sagittis. Sed sodales lorem a ipsum suscipit gravida. Ut fringilla placerat arcu. Phasellus imperdiet. Mauris ac justo et turpis pharetra vulputate.

Quote Source

Vestibulum in mauris semper tortor interdum ultrices.	Vestibulum in mauris semper tortor interdum ultrices.	Vestibulum in mauris semper tortor interdum ultrices.	Vestibulum in mauris semper tortor interdum ultrices

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

An Unordered List

Vestibulum in mauris semper tortor interdum ultrices.
Sed vel lorem et justo laoreet bibendum. Donec dictum.
Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
Praesent volutpat eros quis enim blandit tincidunt.
Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Images

Image with no class or alignment

Class: alignleft

Left with caption

Alice in Wonderland illustration from Wikipedia

Right with caption

Alice in Wonderland illustration from Wikipedia

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat. Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.

Left with caption, small thumb

Alice in Wonderland illustration from Wikipedia

Most of us were born in a world where we knew of no other planets besides our solar system.

Class: aligncenter

Alice in Wonderland illustration from Wikipedia Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.

Center with caption

Alice in Wonderland illustration from Wikipedia

Most of us were born in a world where we knew of no other planets besides our solar system.

An Ordered List

Vestibulum in mauris semper tortor interdum ultrices.
Sed vel lorem et justo laoreet bibendum. Donec dictum.
Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
Praesent volutpat eros quis enim blandit tincidunt.
Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Headings

In addition to standard h1 through h6 headings, these themes offer two heading alternatives. User can add class=”fancy” to their heading tag to get an italicized, serif font in the same color and roughly the same size as a standard heading. Additionally, users can add class=”caps” to their heading tag to get an all-uppercase heading in the same color and at an appropriate size.

Level 1 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quam odio, lacinia tristique, convallis a, lacinia ac, risus. Maecenas fringilla odio cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi porta justo ut odio.

Level 1 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 1 Heading class=”fancy”

Level 1 Heading class=”caps”

Callout Header

Content for the callout box. Totam rem aperiam, eaque ipsa quae ab inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

Level 2 Heading

Level 2 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 2 Heading class=”fancy”

Level 2 heading class=”caps”

Level 3 Heading

Level 3 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That It Wraps To A Second Line So We Can Tes

Callout Header

Content for the callout box. Totam rem aperiam, eaque ipsa quae ab inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

Level 3 heading class=”fancy”

Level 3 heading class=”caps”

Level 4 Heading

Level 4 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 4 Heading class=”fancy”

Level 5 Heading

Level 5 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 5 Heading class=”caps”

Level 6 Heading

Level 6 Heading class=”fancy”

Paragraph inside Blockquote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quam odio, lacinia tristique, convallis a, lacinia ac, risus. Maecenas fringilla odio cursus nisl.

Headings and paragraph text inside blockquotes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quam odio, lacinia tristique, convallis a, lacinia ac, risus. Maecenas fringilla odio cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi porta justo ut odio.

Level 6 Heading class=”fancy”

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quam odio, lacinia tristique, convallis a, lacinia ac, risus. Maecenas fringilla odio cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi porta justo ut odio.

Various HTML Elements

Address: Example address 770 Commonwealth Avenue

Address with class=”large fancy”: Example address 770 Commonwealth Avenue

Preformated:Testing one row
	                        and another

I am the a tag example
I am the abbr tag example

I am the acronym tag example
I am the b tag example
I am the big tag example

I am the cite tag example
I am the code tag example
I am ~~the del tag~~ example

I am the s tag example (deprecated tag – use del instead)
I am the strike tag example (deprecated tag – use del instead)

I am the dfn tag example
I am the em tag example
I am the i tag example

I am the ins tag example
I am the kbd tag example
I am the q tag inside a q tag example

I am the samp tag example
I am the small tag example
I am the span tag example

I am the strong tag example
I am _{the sub tag} example
I am ^{the sup tag} example

I am the tt tag example
I am the var tag example
I am the small class example

I am the large class example
I am the highlight class example

Horizontal Rule:

Regular Lists

Unordered list 01
Unordered list 02
Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
  - Unordered list inside list level 3
  - Unordered list inside list level 3

Ordered list 01
Ordered list 02
Ordered list 03
1. Ordered list inside list level 2
2. Ordered list inside list level 2
  1. Ordered list inside list level 3
  2. Ordered list inside list level 3

Description List Term 1: Description list description 1
Description List Term 2: Description list description 2; Description list description 3

List Term 1: Description list description 1
List Term 2: Description list description 2; Description list description 3

Single-Spaced Lists

Add class=”singlespace” to the list tag (ul, ol, or dl) and the list (and all nested lists) will be singlespaced.

Unordered list 01 (with ul class=”singlespace”)
Unordered list 02
Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
  - Unordered list inside list level 3
  - Unordered list inside list level 3

Ordered list 01 (with ol class=”singlespace”)
Ordered list 02
Ordered list 03
1. Ordered list inside list level 2
2. Ordered list inside list level 2
  1. Ordered list inside list level 3
  2. Ordered list inside list level 3

Default Tables

Table Caption (Unstyled Table)
Table head th <thead><tr><th>	Table head td <thead><tr><td>	Table head td
Table foot th <tfoot><tr><th>	Table foot td <tfoot><tr><td>	Table foot td
Table body th <tbody><tr><th>	Table body td <tbody><tr><td>	Table body td
Table body th	Table body td	Table body td
Table body th	Table body td	Table body td
Table body th	Table body td	Table body td

Note: If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element. Each requires a <tr> tag and <td> or <th> tags for each cell. See the source code of the table above for an example.

Table Caption (Unstyled Table without thead, tfoot, or tbody)
Table row – header <tr><th>	Table row – header	Table row – header
Table row – regular <tr><td>	Table row – regular	Table row – regular
Table row – regular	Table row – regular	Table row – regular
Table row – regular	Table row – regular	Table row – regular

Unstyled Tables

Table Caption (Table class=”unstyled”)
Table head th <thead><tr><th>	Table head td <thead><tr><td>	Table head td
Table foot th <tfoot><tr><th>	Table foot td <tfoot><tr><td>	Table foot td
Table body th <tbody><tr><th>	Table body td	Table body td
Table body th	Table body td	Table body td
Table body th	Table body td	Table body td
Table body th	Table body td	Table body td

Table Caption (Table class=”unstyled” without using thead, tfoot, or tbody)
Table row – header <tr><th>	Table row – header	Table row – header
Table row – regular <tr><td>	Table row – regular	Table row – regular
Table row – regular	Table row – regular	Table row – regular
Table row – regular	Table row – regular	Table row – regular

HTML Elements

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

An Unordered List

Images

Image with no class or alignment

Class: alignleft

Left with caption

Right with caption

Left with caption, small thumb

Class: aligncenter

Center with caption

An Ordered List

Headings

Level 1 Heading

Level 1 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 1 Heading class=”fancy”

Level 1 Heading class=”caps”

Callout Header

Level 2 Heading

Level 2 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 2 Heading class=”fancy”

Level 2 heading class=”caps”

Level 3 Heading

Level 3 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That It Wraps To A Second Line So We Can Tes

Callout Header

Level 3 heading class=”fancy”

Level 3 heading class=”caps”

Level 4 Heading

Level 4 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 4 Heading class=”fancy”

Level 5 Heading

Level 5 Heading That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing That Is Long Enough That It Wraps To A Second Line So We Can Test Linespacing

Level 5 Heading class=”caps”

Level 6 Heading

Level 6 Heading class=”fancy”

Headings and paragraph text inside blockquotes

Level 6 Heading class=”fancy”

Various HTML Elements

Regular Lists

Single-Spaced Lists

Add class=”singlespace” to the list tag (ul, ol, or dl) and the list (and all nested lists) will be singlespaced.

Default Tables

Unstyled Tables

Share this: