•  
  •  

HTML Elements

This is a test article for seeing how various HTML elements are styled by WordPress themes. It uses all elements available in the basic view of the WordPress edit screen, plus a few more that are useful for web content, especially headings of two levels: h2 and h3.

Let’s start!

After the introductory paragraph and an h2 heading comes an image. It’s a resized image that links to its full-size original, and that has a short sample caption:

Green layers

This is the caption of the image.

Inline elements

Now comes a simple list that demonstrates how various inline elements are styled:

  • This is an emphasized phrase (using em)
  • This is a phrase displayed in strong type (using strong)
  • This is a deleted phrase (using del)
  • This is a linked phrase

Quotes

Next are two lines from Hamlet enclosed in blockquote:

There are more things in heaven and earth, Horatio,
Than are dreamt of in your philosophy.

Lists

Time to see how lists are styled…

Ordered and unordered lists, mixed and nested

Lists (ordered or unordered) are easy to get right. Nested lists, however, often reveal problems in the styling, usually by uneven and illogical vertical spacing.

  • First item in an unordered list (ul)
  • Second item in an unordered list
    1. Here starts an orderd list (ol), nested in the unordered list
    2. Second item of ordered list
    3. Third item of orderd list
      • Going one level deep, to start an unordered list
      • Second item of nested ordered list
    4. Back to the the ordered list of the previous level
  • Back to the top-level
  • Last item of the top-level unordered list

Definition lists

Next is a definition list. Definition lists are a useful device for web content but are not available in the WordPress content editor. Maybe that’s why some themes ignore them or, even worse, reset the default browser styling and then leave definition lists completely unstyled. (Horror!)

Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
An american computer company.
Orange
The fruit of an evergreen tree of the genus Citrus.
Peach
Species of Prunus native to China that bears an edible juicy fruit also called a peach.
An especially pleasing person or thing.

Preformatted text

A piece of code wrapped in pre:

#include <iostream>

int main()
{
   std::cout << "Hello, world!n";
}

Tables

Header Another header A third header
A cell A second cell in the first row A third cell
A cell Another cell Yet another cell

And, after an horizontal rule (hr), our simple sample post reaches its end!

Cheers!

Credits