Gimme Everything

OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a [caption] shortcode which then in turn wraps the whole thing in divwith inline styling! Maybe one day they'll be able to use the figureand figcaptionelements for all this. Additionally, images can be wrapped in links which, if you're using anything other than color, or text-decorationto style your links can be problematic.

This is the optional caption.

The next issue we face is image alignment, users get the option of None , Left , Right & Center . On top of this, they also get the options of Thumbnail , Medium , Large & Fullsize . You'll probably want to add style floats to position the image so important to remember to clear these to stop popping images below the bottom of your articles.

Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here. Vivamus sagittis lacus augue vel dolor auctor faucibus laoreet rutrum. Maecenas eget risus sed diam varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus augue vel dolor auctor faucibus laoreet rutrum. Maecenas eget risus sed diam varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Sem ornare pellentesque lacinia quam vestibulum venenatis. Donec ullamcorper nulla non auctor fringilla metus. Aenean lacinia bibendum nulla sed consectetur.
And then ... Finally, users can insert a WordPress [gallery], which is kinda ugly and comes with some CSS stuck into the page style to it (which does not actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we'll work with that for our example with an added fouth image to test verticle spacing.

Head Table Column One	Head Table Column Two	Head Table Three Column
Table Footer Column One	Table Footer Column Two	Table Three Column Footer
Table Row Column One	short Text	Testing a table cell with a longer amount of text to see what happens, you're not using tables for layout sites are you?
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three

1. Ordered list item one.
2. Ordered list item two.
3. Ordered list item three.
4. Ordered list item four.
5. By the way, Wordpress does not let you create nested lists through the visual editor.

• Unordered list item one.
• Unordered list item two.
• Unordered list item three.
• Unordered list item four.
• By the way, Wordpress does not let you create nested lists through the visual editor.

Currently WordPress blockquotes are just wrapped in p tags and have no clear way for the user to define a source. Maybe one day they'll be more semantic (and easier to style) like the version below.

HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quotes.

Oli Studholme, HTML5doctor.com

Level One Heading

Heading Level Two

Level Three Heading

Heading Level Four

Heading Level Five

Heading Level Six

This is a standard paragraph created using the WordPress TinyMCE text editor. It has a strong summer , the em tag and astrikethroughwhich is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include citations , abbr , of bits codeand variables , inline quotations ,inserted text, Text that is no longer accurate or somethingso importantyou might want to mark it. We can subscript and superscript style characters like C0 ₂ , here is our 2 ^nd example. If they are feeling non-semantic they might even use bold , italic , big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link. It is also worth noting in the "kitchen sink" view you can also add underline  styling and set text color with pesky inline CSS.

Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo ​​quam. Sem ornare pellentesque lacinia quam vestibulum venenatis. Cras mattis consectetur purus sit amet fermentum.

This is a right-aligned paragraph. Aenean eu leo ​​quam. Sem ornare pellentesque lacinia quam vestibulum venenatis. Cras mattis consectetur purus sit amet fermentum.

This is a justified paragraph. Aenean eu leo ​​quam. Sem ornare pellentesque lacinia quam vestibulum venenatis. Cras mattis consectetur purus sit amet fermentum.

Finally, you also have the option of an indented paragraph. Aenean eu leo ​​quam. Sem ornare pellentesque lacinia quam vestibulum venenatis. Cras mattis consectetur purus sit amet fermentum.

And last, and by no means least, users can also apply the Addresstag to text like this:

Example 123 Street, Testville, West Madeupsburg, CSSland, 1234

... So there you have it, all our text elements