Testing display of HTML elements

This page contains a bunch of HTML Elements and text. You can copy the source code and use it test out various CSS Properties. For testing purposes, you may use internal styles. Recall that these CSS rules are placed in between the head tags using the following format:


<style type="text/css">
  selector {
    property: value
  }
</style>

 

 

 

This is 1st level heading

This is a test paragraph.

This is 2nd level heading

This is a test paragraph.

This is 3rd level heading

This is a test paragraph.

This is 4th level heading

This is a test paragraph.

This is 5th level heading

This is a test paragraph.

This is 6th level heading

This is a test paragraph.

Basic block level elements

This is a normal paragraph (p element). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opinion.

This is a div element. Authors may use such elements instead of paragraph markup for various reasons. (End of div.)

This is a block quotation containing a single paragraph. Well, not quite, since this is not really quoted text, but I hope you understand the point. After all, this page does not use HTML markup very normally anyway.

The following contains links to the Comm-244 home page

Comm-244 Website,
Week 3 page for class

Lists

This is a paragraph before an unordered list (ul). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can’t guess which paragraphs are logically related to a list, e.g. as a “list header”.

  • One.
  • Two.
  • Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
  • Four. This is the last item in this list Let us terminate the list now without making any more fuss about it.

This is a paragraph before a ordered list (ol). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can’t guess which paragraphs are logically related to a list, e.g. as a “list header”.

  1. One.
  2. Two.
  3. Three. Well, probably this list item should be longer. Note that if items are short, lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
  4. Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.

This is a paragraph before a definition list (dl). In principle, such a list should consist of terms and associated definitions. But many authors use dl elements for fancy “layout” things. Usually the effect is not too bad, if you design user style sheet rules for dl which are suitable for real definition lists.

recursion
see recursion
recursion, indirect
see indirect recursion
indirect recursion
see recursion, indirect
term
a word or other expression taken into specific use in a well-defined meaning, which is often defined rather rigorously, even formally, and may differ quite a lot from an everyday meaning

Heading One

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Two

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Three

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Four

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Five

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Six

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.


This is italic text, made with em. This is italic text as well, made with i.

This is bold text, made with strong. This is bold text as well, made with b.

This is underlined text, made with u. This is inserted text, made with ins.

This is deleted (strikethrough) text, made with strike. This is also strikethrough text, but made with s. This is deleted text, made with del.

This is computer code, made with code. This is teletype text, made with tt.

This is text the user is supposed to enter in, or keyboard, made with kbd. This is a variable, made with var. This is sample program output, made with samp.

This is small text, made with small. This is big text, made with big.

This is a citation, made with cite. This is a short quotation in the middle of a sentence, made with q.

This sentence ends with a superscript. This sentence ends with a subscript.

This is an abbreviation, made with abbr: WWW. This is an acronym, made with acronym: NATO. This is a term that needs a definition, made with dfn: Yog-Sothoth.

This is an unordered list:

  • Koyaanisqatsi
  • Powaqqatsi
  • Naqoyqatsi

This is an ordered list:

  1. Larry
  2. Moe
  3. Curly

This is a definition list:

Defintion Term
Definition data defining the previous term
Another Definition Term
Definition data defining the previous term

This is an address with breaks:

John Q. Public123 Main Street

Anywhere, ST 12345

This is a long quotation inside a blockquote:

“I love songs about horses, railroads, land, judgement day, family, hard times, whiskey, courtship, marriage, adultery, separation, murder, war, prison, rambling, damnation, home, salvation, death, pride, humor, piety, rebellion, patriotism, larceny, determination, tragedy, rowdiness, heartbreak, and love. And Mother. And God.” ~ Johnny Cash

This is pre-formatted:

Start in column one.
         Then indent to column ten.
    Then back five spaces.

Here’s a table with a border, a caption, colgroups, cols, thead, tfoot, & tbody:

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3