Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et hyperlink example malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue.

Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et hyperlink example malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue.

Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; hyperlink example Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante hyperlink example ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.


Table Example

I am a table caption
Col Heading One Col Heading Two Col Heading Three
Row 1 Cell One Row 1 Cell Two Row 1 Cell Three
Row 2 Cell One Row 2 Cell Two Row 2 Cell Three
Row 3 Cell One Row 3 Cell Two Row 3 Cell Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.


Unordered Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.


Ordered Lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
    1. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      1. Sed non diam nisl, a congue augue
      2. Sed non diam nisl, a congue augue
    2. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      1. Sed non diam nisl, a congue augue
    3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis
    1. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis.
    1. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.


Definition Lists

Single Term and Description

Frog
Wet green thing
Rabbit
Warm fluffy thing

Multiple Terms

Punt
Kick a ball
Take a bet
Back-Pedalling
Change opinion
Go into reverse

Multiple Descriptions

Color
Colour
Any hue except white or black
Potato
Powtayyttooww
A starchy plant tuber that is one of the most important food crops, cooked and eaten as a vegetable.

Images

Image inside para example image

Text and image with no container example image

Blockquote vs. Q vs. Cite

According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely <blockquote>, <q> and <cite>. Although all intended to markup quotes, they should be used in different contexts. So when should you use what?

<blockquote>

blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div's.

The cite attribute of the blockquote tag can be used to specify the location (in the form of a URI) where the quote has come from.

<q>

q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example:

Bob said sexy pyjamas but Chris said a kimono

<cite>

cite defines an in-line citation or reference to another source. Example:

And Bob said No, I think it's a banana.

Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used.


Miscellaneous Tags

The <abbr> tag describes an abbreviated phrase.

By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. Example:

The WHO was founded in 1948.

The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O.

The <sup> tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW[1].

The <acronym> tag defines an acronym.

An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. Example:

Can I get this ASAP?

The <address> tag defines the contact information for the author or owner of a document. This way, the reader is able to contact the document's owner.

The <address> element is usually added to the header or footer of a webpage. Example

Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

Embedded Media

Youtube

Youtube now provides their videos as an IFRAME snippet, interesting. Example:

Lets try their old OBJECT snippet. Example:

Lets try an iframe with no source and no attributes. Example:

Lets try an object with no source and no attributes. Example:


Code Tag

// The HTML code tag lets you provide coding example but does not maintain formatting. var codeExample = {}; var codeExampleTwo = {}; // A really long comment on the one line to test out what happens if this line exceeds container width A really long comment on the one line to test out what happens if this line exceeds container width A really long comment on the one line to test out what happens if this line exceeds container width

Pre Tag

    // The HTML pre tag lets you provide coding example and maintains formatting.
    var codeExample = {};
    var codeExampleTwo = {};
    // A really long comment on the one line to test out what happens if this line exceeds container width A really long comment on the one line to test out what happens if this line exceeds container width A really long comment on the one line to test out what happens if this line exceeds container width

Basic Form Elements

Text Inputs
Text Areas
Selects
Radio Buttons
Checkbox

Lorem ipsum dolor sit amet

I am a div between paras
I am a div within a div!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam aliquam dictum posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a lectus massa. Sed non diam nisl, a congue augue. Nunc in iaculis sem. Nulla ut turpis odio. Duis risus nisl, suscipit nec mollis eu, rutrum ac sem. Ut pretium sodales placerat. Duis id purus dui.