Tests for common HTML elements

on

NOTE: This post is very old but is still use­ful for let­ting me know how dif­fer­ent ele­ments are being rep­re­sent­ed on this web­site as it moves between both plat­forms and tem­plates. Clear­ly some of the dis­crip­tions are no longer rel­e­vant. 

This is some­thing I have played with on and off when build­ing web­sites for clients. The idea is to pro­vide a sin­gle unpub­lished post that can be used as style ref­er­ence when writ­ing their own posts. For the most part it is ignored and mere­ly serves as a way for me to make sure I have cov­ered all the bases with­in the CSS.

I am pret­ty sure much of this exam­ple was pinched from some­one else but I have no idea where or when, so apolo­gies and thanks. Please feel free to steel from here and let me know if there are ele­ments which would can be added.

Paragraphs & boxes

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum.

Full Width Images 670px

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por sub text ut labore et sup text magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum.

Large thumbnails in flow 320px

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum.

Medium thumbnails in flow 150px

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Avatar or small thumbnails in flow 65px

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat.

Two column text

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Three column text (does not work in Internet Explorer yet)

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Aliquip ex ea com­mo­do con­se­quat. Duis aute irure dolor in rep­re­hen­der­it in volup­tate velit esse cil­lum dolore eu fugiat nul­la pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in cul­pa qui offi­cia deserunt mol­lit anim id est labo­rum.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad min­im veni­am, quis nos­trud exerci­ta­tion ullam­co laboris nisi ut aliquip ex ea com­mo­do con­se­quat.

Lists

  • Unordered list test
  • Anoth­er list ele­ment. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit.
  • Yet anoth­er ele­ment in the list
  • Some long text. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit. Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit.
  1. Ordered list test
  2. Anoth­er list ele­ment
  3. Yet anoth­er ele­ment in the list
  1. Ordered list
  2. Here’s a nest­ed unordered list
    • Nest­ed Unordered list
    • Nest­ed ordered list
      1. The first
      2. And the sec­ond
  3. Ordered List item
  4. Nest­ed Ordered list
    1. Some point
    2. Nest­ed Unordered list
      • The first
      • And the sec­ond

def­i­n­i­tion list dt

def­i­n­i­tion list dd

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit adip­isic­ing elit adip­isic­ing elit

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit adip­isic­ing elit adip­isic­ing elit

Headings

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet,

H3: Lorem ipsum dolor sit amet,

H4: Lorem ipsum dolor sit amet,

H5: Lorem ipsum dolor sit amet,
H6: Lorem ipsum dolor sit amet,

Misc Elements

<strong>

<del> delet­ed

<dfn> dfn

<em> empha­sis

links

<a> anchor

<a> a + href

Links as headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

<abbr> abbr — extend­ed text when mouseover.

<acronym> acronym — extend­ed text when mouseover.

<address>

Don­ald Duck

Box 555

Dis­ney­land

Tables

Table Head­er One

A stan­dard test table with a cap­tion, tr, td ele­ments

TD One

TD Two

TD colspan 2

Table Head­er Two

A test table with a thead, tfoot, and tbody ele­ments

TD One

TD Two

TD One

TD Two

TD One

TD Two

TD One

TD Two

tfoot foot­er

<pre>
pre space1
pre space2
pre tab

<code>
Not indent­ed
indent1
indent1
indent2
indent3

Label text

Label text

Label text

Label text

Label tex­top­tion text

Label text

Label text

But­ton ele­ment

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  1. First option
  2. Sec­ond option
  3. Third option

This is a feed­back mes­sage for the user.

This is an error feed­back mes­sage.

hEntry

By

First­name Last­name

This is an exam­ple of the hAtom micro­for­mat

Date and year

Firstname Lastname

This is an exam­ple of the hCard micro­for­mat.