Beginnings

Let's start with a confession… During my time as Web Master I wrote CSS like a caveman. I just started with the HTML and BODY elements and worked my way down. I also worked my way up style sheets a lot. And then down again. It sometimes made me dizzy.

Somewhere in the back of my mind was always a voice telling me that I should start with a page with dummy content and common HTML elements. I'd be able to first create a layout and then worry about styling headers, links, lists and whatnots. It would be a systematic approach that would surely prevent dizziness and headaches. Alas, I always ignored that voice. Until now, that is. As part of my getting to terms with having been a Web Master I've created a simple page with most common HTML elements.

The page is not exhaustive. I've left out elements I never used, such as dl. I'm sure there will be quite a few fancy HTML5 elements that are missing as well. It does include all the usual suspects though….

H1 header

Paragraph text. Paragraph text. Bold paragraph text. Paragraph text. Paragraph text. Strong paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Paragraph text. Paragraph text. Italic paragraph text. Paragraph text. Paragraph text. Emphasised paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Paragraph text. Paragraph text. Bold and italic paragraph text. Paragraph text. Paragraph text. Strong and emphasised paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

H2 header

Paragraph text. Paragraph text. Bold paragraph hyperlink.
Paragraph text after line break.

Blockquote paragraph text. Blockquote paragraph text. Blockquote paragraph text. Blockquote paragraph text. Blockquote paragraph text.

Paragraph text. Paragraph text. Quoted paragraph text. Paragraph text with sup text. Paragraph text.

H3 header

Paragraph text. Paragraph text with abbr element. Paragraph text.


Paragraph text. Paragraph text with $var variable. Paragraph text with code element.

// Preformatted text, everywhere!
sed -i 's/<p>/<pre>/g' index.html
sed -i 's/<\/p>/<\/pre>/g' index.html
          

Paragraph text. Paragraph text with small text. Paragraph text. Paragraph text. Paragraph text with deleted text and inserted text. Paragraph text. Paragraph text with strikethrough text.

H4 header

Paragraph text above unordered list.

  • List item 1. List item 1. List item 1. List item 1. List item 1.
  • List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2.
    • Nested list item 1 (or, if you prefer, 2a).
  • List item 3.

Paragraph text above ordered list.

  • List item 1. List item 1. List item 1. List item 1. List item 1.
  • List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2. List item 2.
    • Nested list item 1 (or, if you prefer, 2a).
  • List item 3.
H5 header

Paragraph text above table.

Table header
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Totals 2 rows, 2 columns
Sub text in footer text. Footer text with cite link (must include title of work).
H6 header

Paragraph text above figure.

An image of Tux. The drawn penguin is the logo of the Linux kernel. It is very cute.
Long image caption for the pretty penguin picture. Image from Wikimedia.

Paragraph text above video.

Paragraph text above audio (files courtesey of file-examples.com.