1. Headers

This is a h1 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

This is a h2 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

This is a h3 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

This is a h4 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

This is a h5 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

This is a h6 title

Lorem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum.

2. Paragraphs

L (use p class=”capital”) orem ipsum dolor sit amet, gravida aliquam sit eget dolor eleifend. Eu arcu, feugiat tortor fames, facilisis sed et, ligula vitae ac in habitasse tempus. Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat, porta proin cras fermentum sit, sed dolor. Morbi ullamcorper, nulla nulla quisque vitae etiam aliquet est.

Nec id, feugiat convallis mi justo vel, facilisis tellus et pede praesent fermentum, orci magnis molestie magna vivamus faucibus curabitur, lobortis magnis libero. Eros non sapien congue, lorem sed tellus suspendisse suscipit, platea mauris suspendisse tristique, non cras vehicula metus, sapien augue quis eros.

Et wisi augue sit hymenaeos, non at arcu nulla, ut vitae metus sem risus elementum, neque cursus leo ac consequat. Vel magna nascetur in donec luctus integer, mattis posuere vitae nulla. Dapibus lobortis, nisl amet est scelerisque, vel pede sollicitudin dictum. Tincidunt porttitor libero vulputate massa, nullam adipiscing donec donec, ullamcorper nostra nec cum. Sodales suspendisse a nec eu, suspendisse blandit enim, in habitasse non erat a, erat vel vitae arcu in aptent.

3. Ordered and non-ordered lists

  1. Lorem ipsum
  2. Diam pede
  3. Ullamcorper
  4. Sed fermentum
  5. Dapibus lobortis
  6. Nostra nec
  7. Sit hymenaeos
  8. Sapien congue
  9. Lectus ullamcorper
  10. Non sapien
  11. Felis mauris
  12. Vitae metus
  • Lorem ipsum
  • Diam pede
  • Ullamcorper
  • Sed fermentum
  • Dapibus lobortis
  • Nostra nec
  • Sit hymenaeos
  • Sapien congue
  • Lectus ullamcorper
  • Non sapien
  • Felis mauris
  • Vitae metus
  • ul class=”check”
  • ul class=”arrow”
  • ul class=”cross”
  • ul class=”light”
  • ul class=”star”

4. Div & Span extra styles

<div> or <span> tag with class=”note” Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat.
<div> or <span> tag with class=”info” Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat.
<div> or <span> tag with class=”alert” Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat.
<div> or <span> tag with class=”download” Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat.
<div> or <span> tag with class=”tip” Diam pede sollicitudin in sed fermentum mattis, felis mauris wisi lectus ullamcorper. Ex sit conubia ac ut accumsan, dolorem hendrerit odio lorem et volutpat.

5. Code & pre tags

Hello world! I'm a <code> tag

Hello world! I'm a <pre> tag
Hello world! I'm a <pre class="script"> tag

6. Modifying styles

class=”small”

class=”large”

class=”highlight”

class=”underlined”

Here is the address for Automattic, using the <address> tag:

355 1st Street Suite 202
San Francisco, CA 94105
United States

This is an example of an <anchor> (otherwise known as a link). This abbr. is an example of an <abbr> tag in the middle of a sentence. Here is a TLA showing off the <acronym> tag. What, you want to see some over-sized text using the <big> tag? Can you cite a reference for that, using the <cite> tag? Have you noticed that all of the tag names are displayed in code-form, using the <code> tag? Similarly, I could emulate keyboard text, using the <kbd> text tag, or emulate teletype text using the <tt> 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.

Want to quote the WordPress tagline Code is Poetry? Use the <q> tag to add quotes around it. This is strong text (otherwise known as bold), using the <strong> tag.

Need to write H2O or E = MC2? You may find great use for subscripting text using the <sub> tag, or for superscripting text using the <sup> tag. Need to call out a variable? Use the <var> tag.

7. Form styles

Form legend