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.
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 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. Neutra meggings church-key, PBR cliche Helvetica Shoreditch food truck kitsch locavore you probably haven’t heard of them Intelligentsia ugh quinoa farm-to-table. Kogi cronut irony next level. Tousled cornhole ethical fixie. Etsy cray yr authentic, next level forage lumbersexual listicle banh mi iPhone swag freegan master cleanse. Portland gastropub gluten-free, chillwave Godard jean shorts Marfa you probably haven’t heard of them irony ethical craft beer cardigan McSweeney’s ugh. Twee stumptown Helvetica, tofu biodiesel synth heirloom banjo paleo trust fund church-key. Lomo vegan before they sold out beard, flexitarian typewriter distillery crucifix kale chips listicle Schlitz direct trade.
Messenger bag disrupt freegan bitters, Echo Park taxidermy chia flexitarian. Wolf selvage brunch, health goth cornhole Truffaut chillwave. Listicle jean shorts raw denim squid sriracha. Wes Anderson wolf tofu Schlitz flexitarian tousled, XOXO vegan mustache try-hard asymmetrical fanny pack. Stumptown food truck Shoreditch occupy High Life. Sriracha vegan fingerstache tofu, raw denim meh put a bird on it Echo Park fanny pack Odd Future Kickstarter. Polaroid 90’s whatever +1 artisan bitters. Stumptown single-origin coffee Godard, lo-fi mlkshk umami retro. Narwhal quinoa literally, freegan American Apparel direct trade four dollar toast flannel scenester swag forage art party you probably haven’t heard of them. Fixie authentic YOLO Truffaut fashion axe sartorial. Thundercats typewriter squid, flexitarian sustainable plaid banjo direct trade chambray bicycle rights mumblecore selvage ethical food truck YOLO. Craft beer chillwave viral church-key. Brunch PBR wayfarers, selfies try-hard swag lomo tofu. Banjo tattooed Kickstarter, four loko drinking vinegar synth taxidermy flannel kogi Brooklyn Blue Bottle salvia.
Banjo drinking vinegar hella, cliche blog craft beer pour-over XOXO Schlitz. Banksy meh Kickstarter polaroid church-key deep v. Keytar cliche pug beard. Hella cliche Vice letterpress. Lumbersexual Shoreditch sartorial whatever. Skateboard four loko banh mi, ugh wolf kale chips messenger bag flannel hella bicycle rights Wes Anderson. Kickstarter polaroid semiotics heirloom, American Apparel Tumblr fashion axe slow-carb narwhal.
| Table Head Column One | Table Head Column Two | Table Head Column Three |
|---|---|---|
| Table Footer Column One | Table Footer Column Two | Table Footer Column Three |
| 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 site layouts 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 |
- 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.
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 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.
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.
And last, and by no means least, users can also apply the Address tag to text like this:
Testville,
West Madeupsburg,
CSSland,
1234
…so there you have it, all our text elements
Headings
Header one
Header two
Header three
Header four
Header five
Header six
Blockquotes
Single line blockquote:
Stay hungry. Stay foolish.
Multi line blockquote with a cite reference:
People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997
Tables
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Definition Lists
- Definition List Title
- Definition list division.
- Startup
- A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
- #dowork
- Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
- Do It Live
- I’ll let Bill O’Reilly will explain this one.
Unordered Lists (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Ordered List (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
HTML Tags
These supported tags come from the WordPress.com code FAQ.
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Anchor Tag (aka. Link)
This is an example of a link.
Abbreviation Tag
The abbreviation srsly stands for “seriously”.
Acronym Tag
The acronym ftw stands for “for the win”.
Big Tag
These tests are a big deal, but this tag is no longer supported in HTML5.
Cite Tag
“Code is poetry.” –Automattic
Code Tag
You will learn later on in these tests that word-wrap: break-word; will be your best friend.
Delete Tag
This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).
Emphasize Tag
The emphasize tag should italicize text.
Insert Tag
This tag should denote inserted text.
Keyboard Tag
This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag.
Preformatted Tag
This tag styles large blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
}
Quote Tag
Developers, developers, developers…
–Steve Ballmer
Strong Tag
This tag shows bold text.
Subscript Tag
Getting our science styling on with H2O, which should push the “2″ down.
Superscript Tag
Still sticking with science and Albert Einstein’s E = MC2, which should lift the “2″ up.
Teletype Tag
This rarely used tag emulates teletype text, which is usually styled like the<code> tag.
Variable Tag
This allows you to denote variables.