Heading 1
Here is how a heading 2 displays.
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.
Heading 3
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 rutrum 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.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.
Heading 4
And then… Finally, users can insert a WordPress [gallery
], which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn’t 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.
- Ordered list item one.
- Ordered list item two.
- Ordered list item three.
- Ordered list item four.
- 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.
Oli Studholme, HTML5doctor.com
Anchor Nav Test
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 C02, here is our 2nd 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.
Heading 5
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.
Heading 6
And last, and by no means least, users can also apply the Address
tag to text like this:
Testville, MS 88123
…so there you have it, all our text elements.
// ]]>
Lorem ipsum dolor sit
Fusce ullamcorper varius nisi, aliquam vestibulum mnisl. Quisque libero ligula, laoreet eu bibendum sit amet, hendrerit et erat. Integer at nisl neque. Nunc quis mollis augue. Curabitur ac est id orci bibendum faeuismod justo, id gra.l vida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa, commodo id nunc tristique, luctus lacinia metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie.
euismod justo, id gravida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa, commodo id nunc tristique, luctus lacinia metus.ucibus non nec magna. Morbi et vestibulum felis, sit amet pellentesque augue. Vivamus tempus sapien semper diam convallis, sit amet congue lacus convallis.
amet, consectetur adipiscing elit.
Aliquam et condimentum libero. Sed pellentesque turpis augue, in pretium dui tristique non. Sed varius molestie lorem eget placerat. Quisque sem felis, euismod eleifend sem at, consequat faucibus neque. Morbi ut euismod justo, id gravida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa, commodo id nunc tristique, luctus lacinia metus.
- uat faucibus neque. Morbi ut euism
- sed sapien varius molestie.
- ociosqu ad litora torqu
ipiscing elit.
Aliquam et condimentum libero. Sed pellentesque turpis augue, in pretium dui tristique non. Sed varius molestie lorem eget placerat. Quisque sem felis, euismod eleifend sem at, consequat faucibus neque. Morbi ut euismod justo, id gravida erat. Class aptent taciti sociosue libero ligula, laoreet eu bibendum sit amet, hendrerit et erat. Integer at nisl neque. Nunc quis mollis augue. Curabitur ac est id orci bibendum faeuismod justo, id gravida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa
h1 hendrerit et er at nisl neq
h2 bia nenaeos. In
h3 dum fid gravida e
h4 ut euismod just
h5 Quisque euim sed sapie
Lorem ipsum dolor sit
Fusce ullamcorper varius nisi, aliquam vestibulum nisl. Quisque libero ligula, laoreet eu bibendum sit amet, hendrerit et erat. Integer at nisl neque. Nunc quis mollis augue. Curabitur ac est id orci bibendum faeuismod justo, id gravida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa, commodo id nunc tristique, luctus lacinia metus.
- uat faucibus neque. Morbi ut euism
- sed sapien varius molestie.
- ociosqu ad litora torqu
euismod justo, id gravida erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sem nunc, dignissim eu eros eu, porttitor luctus ipsum. Quisque euismod diam sed sapien varius molestie. Donec vulputate sit amet sem ut iaculis. Morbi nec ex in sapien porta feugiat. In erat massa, commodo id nunc tristique, luctus lacinia metus.ucibus non nec magna. Morbi et vestibulum felis, sit amet pellentesque augue. Vivamus tempus sapien semper diam convallis, sit amet congue lacus convallis.