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 shortcode which then in turn wraps the whole thing in a div with inline styling! Maybe one day they’ll be able to use the figure and figcaption elements for all this. Additionally, images can be wrapped in links which, if you’re using anything other than color or text-decoration to style your links can be problematic.

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 floats to style the image position so important to remember to clear these to stop images popping 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 vel augue laoreet rutrumAliquet turpis adipiscing sed dictumst pulvinar tempor cum! Aliquet amet porttitor! Tincidunt est proin ac lectus turpis parturient vut platea turpis nisi sagittis tincidunt purus turpis ultricies purus nec tincidunt! Sociis tincidunt quis dolor placerat sed facilisis porttitor, velit tempor porta augue diam sit! Magna porttitor rhoncus dis, nec mattis turpis, integer, arcu, egestas urna adipiscing purus dis, phasellus egestas. Auctor pulvinar rhoncus lectus vel? Ac, rhoncus enim tincidunt nascetur tristique tincidunt dignissim ridiculus vel nisi nunc a, sagittis lundium? Aliquam magna elementum augue tincidunt mus pellentesque purus sit magnis, lorem, ac nisi, tincidunt eros augue, dictumst vel turpis! Augue? Facilisis in phasellus parturient sagittis augue nunc dis? Lectus augue montes risus dolor hac amet, eu sed duis aliquet integer. faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Aliquet turpis adipiscing sed dictumst pulvinar tempor cum! Aliquet amet porttitor! Tincidunt est proin ac lectus turpis parturient vut platea turpis nisi sagittis tincidunt purus turpis ultricies purus nec tincidunt! Sociis tincidunt quis dolor placerat sed facilisis porttitor, velit tempor porta augue diam sit! Magna porttitor rhoncus dis, nec mattis turpis, integer, arcu, egestas urna adipiscing purus dis, phasellus egestas. Auctor pulvinar rhoncus lectus vel? Ac, rhoncus enim tincidunt nascetur tristique tincidunt dignissim ridiculus vel nisi nunc a, sagittis lundium? Aliquam magna elementum augue tincidunt mus pellentesque purus sit magnis, lorem, ac nisi, tincidunt eros augue, dictumst vel turpis! Augue? Facilisis in phasellus parturient sagittis augue nunc dis? Lectus augue montes risus dolor hac amet, eu sed duis aliquet integer.Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.

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 blockquote 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 quote.

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

This is a standard paragraph created using the WordPress TinyMCE text editor. It has a strong tag, an em tag and a strikethrough which 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, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript 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. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

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

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

Sit augue cursus platea dolor ultricies, tempor pulvinar quis augue elementum egestas lorem ultrices tincidunt a lorem tempor nunc duis. Elementum risus, mattis. Urna cursus, montes in ultrices augue cum nec? Porttitor. Porttitor. Nisi non cursus integer? Nec eros, montes, tempor, dolor nisi porta, purus tincidunt. Mauris? Lectus adipiscing scelerisque enim auctor magna turpis eu, nec, lectus lorem duis, adipiscing augue augue ac platea sociis, nec dignissim proin, montes, lacus habitasse? Augue ac, dapibus phasellus. Pulvinar dolor etiam etiam non nec habitasse augue. Augue enim, sit lundium aenean proin. Dapibus adipiscing, in adipiscing, est adipiscing diam aliquam odio ultrices sagittis, nec, integer in pellentesque magnis lacus porttitor ac ac eu ac! Placerat mus, magnis platea elementum platea! Lectus amet.

Augue odio, tortor nec mus enim pid augue vut, rhoncus velit augue purus, cursus magnis, rhoncus ac in enim, a, nunc in est dictumst sit tristique nisi nunc odio! Aliquet dolor ac lundium natoque? Porttitor odio arcu dignissim porta lectus parturient et purus lundium elementum, integer et magna mus. Elementum augue ultricies eu, sagittis pellentesque? Ut elit, in egestas ac a duis porta placerat! Elit, etiam? Ac porta dolor lundium mauris hac placerat mus, scelerisque, aenean tincidunt, dignissim urna nisi ut cum cras sit ultrices placerat risus in, diam enim sit enim, duis cum amet. Et integer, lectus pulvinar, dapibus elementum in porta ac diam tempor magnis placerat augue penatibus massa diam integer, sagittis eros etiam amet arcu penatibus.

Pulvinar augue turpis porta nunc phasellus diam pid dictumst sed magna cursus vel arcu! Lorem et dictumst, auctor nec, proin, montes mauris nec! Vut porttitor turpis natoque ut, tempor! Massa, aliquet! Auctor ut cum urna eros duis eros aliquam, pulvinar magna lorem mid amet, ut etiam ultricies duis, duis non a augue cursus odio odio porta amet pellentesque sociis? Est, magnis, natoque. Dignissim tempor tristique turpis? Velit pid mauris cras et, dis non, ut purus ut eros lorem pellentesque lundium. Natoque penatibus et hac, nunc facilisis natoque. Eros sed cum velit ultricies non integer? Quis, sociis pellentesque et integer? Adipiscing auctor, nec nunc natoque sed facilisis scelerisque! Urna mid augue platea lundium ac mattis dapibus? Magna nunc vut sagittis.

Augue lorem mid porttitor lundium, lundium augue. Ut massa, mauris pulvinar lorem elementum tristique! Lundium, lacus elementum, cursus ut odio eu? Parturient ac, ac a integer! Ultrices porta augue habitasse est, nascetur hac, enim tempor montes et nunc parturient, in urna ridiculus tempor! Elementum nascetur penatibus dis aenean, tortor elementum sit turpis et turpis. Rhoncus? Risus non magna lacus! Ac urna, mauris eu purus hac urna vel augue lorem, ac magna? Odio tristique habitasse parturient nascetur diam! Hac tempor! Risus sed adipiscing vel, purus odio proin mauris, magnis ac, etiam sagittis mauris turpis cursus sagittis, et nec sociis in, augue ultricies! Parturient integer nascetur? Turpis, sed. Vel! Turpis placerat scelerisque, et tincidunt platea? Ultrices rhoncus phasellus et ac porttitor.