Skip to main content


Body Copy

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. this is strongly emphasized. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That's a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename and press return. Dinner's at 5:00. Let's make that 7. This text has been struck. This text has been marked.

This footnote is made with the small element.


H1: The arsonist has oddly shaped feet

H2: The human torch was denied a bank loan

H3: 60% of the time, it works every time

H4: Jackdaws love my big sphinx of quartz

H5: The five boxing wizards jump quickly
H6: The quick brown fox jumps over the lazy dog

List Types

Definition List

Definition List Title
This is a definition.
This is an alternate definition.
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested List Item A
    2. Nested List Item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested List Item A
    • Nested List Item B
  • List Item 3


  Enterprise Enterprise D Galactica
Captain James Kirk Jean-Luc Picard William Adama
XO Spock William Riker Saul Tigh
Doctor Leonard McCoy Beverly Crusher Doc Cottle
Engineer Montgomery Scott Geordi LaForge Galen Tyrol


Preformatted Text

Including, but not limited to code. Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For example:

“Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!”
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~


Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a pre block.

.container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;

You can also get syntax highlighting by adding class="language-XXXX" to your code element, like so:

  <code class="language-css">
    p {
      color: red
HTML formatting
code[class*='language-']::selection {
  text-shadow: none;
  background: #b3d4fc;

@media print {
  pre[class*='language-'] {
    text-shadow: none;
CSS formatting
for (let i = 1; i <= 100; i++) {
  if (i % (3 * 5) === 0) {
  } else if (i % 3 === 0) {
  } else if (i % 5 === 0) {
  } else {
JavaScript formatting

And many more!


Figures are usually used to refer to images:

Figure Heading

This is a placeholder image, with supporting caption.

Here, a part of a poem is marked up using figure:

‘Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

Jabberwocky (first verse). Lewis Carroll, 1832-98


Let's keep it simple. Be sure to style the citation.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs, Apple Worldwide Developers’ Conference, 1997

And here's a bit of trailing text.