Headings

Header One

Header Two

Header Three

Header Four

Header Five

Header Six

---

Display Headers

Display One

Display Two

Display Three

Display Four

A lead paragraph Sunt voluptate do ea sit eiusmod magna ad exercitation do nostrud pariatur incididunt. Magna est excepteur ullamco exercitation mollit laborum sunt proident laboris in commodo. Consequat ut in Lorem proident do. Sit est et aute esse enim velit occaecat eiusmod sit amet non ut cillum. Ullamco ad culpa et est ut sit. Fugiat reprehenderit et ullamco ipsum deserunt nostrud amet ex sint adipisicing enim laborum ea.

Cupidatat Lorem culpa consectetur id minim reprehenderit veniam. Irure et qui esse occaecat ex excepteur. Dolor fugiat mollit enim occaecat magna aute exercitation officia ex.

---

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text using the del tag.

This line of text is meant to be treated as no longer accurate using the s tag.

This line of text is meant to be treated as an addition to the document using the ins tag.

This line of text will render as underlined using the underline tag which is deprecated.

This line of text is meant to be treated as fine print using the small.

This line rendered as bold text using the strong tag.

This line rendered as italicized text using the emphasis tag

---

Abbreviations

attr

HTML

---

Blockquotes

Single line blockquote:

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

Multi line blockquote with a cite reference:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Cupidatat Lorem culpa consectetur id minim reprehenderit veniam.

Alignment

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

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

---

Lists

Unstyled

• 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
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Inline

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Definition Lists

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.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Unordered (Nested)

• 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 (Nested)

8. List item one -start at 8
   1. List item one
      1. List item one -reversed attribute
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
9. List item two
10. List item three
11. List item four

---

Tables

Common or Garden Table with caption

List of users

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark Table with caption

List of users

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Head options

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Borderless Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Hoverable Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Contextual Classes

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

#	Heading	Heading
1	Cell	Cell
2	Cell	Cell
3	Cell	Cell
4	Cell	Cell
5	Cell	Cell
6	Cell	Cell
7	Cell	Cell
8	Cell	Cell
9	Cell	Cell

Responsive

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

This tag styles 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 it is handled and to find out how it overflows;
}
You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Sample text

This text is meant to be treated as sample output from a computer program.

Horizontal Rule Tag

---

This sentence is following a <hr /> tag.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag is for preserving whitespace as typed, such as in poetry or ASCII art.

The Road Not Taken

Robert Frost


  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth;

  Then took the other, as just as fair,
  And having perhaps the better claim,          |\_/|
  Because it was grassy and wanted wear;       / @ @ \
  Though as for that the passing there        ( > º >x<<´
                                               /  O  \
  And both that morning equally lay
  In leaves no step had trodden black.
  Oh, I kept the first for another day!
  Yet knowing how way leads on to way,
  I doubted if I should ever come back.

  I shall be telling this with a sigh
  Somewhere ages and ages hence:
  Two roads diverged in a wood, and I—
  I took the one less traveled by,
  And that has made all the difference.


  and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;

Quote Tag for short, inline quotes

Developers, developers, developers… –Steve Ballmer

Subscript Tag

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

Superscript Tag

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

Teletype Tag (obsolete in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.