div<\/code> with inline styling! Maybe one day they’ll be able to use the figure<\/code> and figcaption<\/code> elements for all this. Additionally, images can be wrapped in links which, if you’re using anything other than color<\/code> or text-decoration<\/code> to style your links can be problematic.<\/p>\n\n![\"Your](\"https:\/\/3.bp.blogspot.com\/-7jpzqMUB_KY\/W-oaGVmqy_I\/AAAAAAAAUs0\/UqaXuX2Sxe8t8JNTDvA_0EZV5fmeCehZQCLcBGAs\/s1600\/img_large.png\" "\\"bmxisbest\\"")
<\/a><\/p>\nThis is the optional caption.<\/p>\n<\/div>\n
The next issue we face is image alignment, users get the option of None<\/em>, Left<\/em>, Right<\/em> & Center<\/em>. On top of this, they also get the options of Thumbnail<\/em>, Medium<\/em>, Large<\/em> & Fullsize<\/em>. 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.<\/p>\n![\"Your](\"https:\/\/3.bp.blogspot.com\/-3PITK2Wsjdc\/W-oaGAQPM4I\/AAAAAAAAUsw\/oAKp3ble3LouT4ndPMJgJvglX1VPj0U8ACLcBGAs\/s1600\/img_medium.png\" "\\"Your")
\n![\"Your](\"https:\/\/2.bp.blogspot.com\/-rIFLsysyVCY\/W-oaHeFaKMI\/AAAAAAAAUs4\/ao7AdLzFGR454vEQFw_M8DoJ_PbP-4CxwCLcBGAs\/s1600\/img_thumb.png\" "\\"Your")
\n
\n![\"Your](\"https:\/\/1.bp.blogspot.com\/-vKjQEgFBq80\/W-oaGC8i_6I\/AAAAAAAAUss\/XoRxZ-6isdgru_ji11s93NtQ_xUEc0O7ACLcBGAs\/s1600\/img_full.png\" "\\"Your")
<\/p>\n
Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
\nVivamus 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.<\/p>\n
And then… Finally, users can insert a WordPress<\/p>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/demo.themesdna.com\/gridmode-pro\/wp-content\/uploads\/sites\/72\/2013\/03\/3HTAE1GVDV-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/demo.themesdna.com\/gridmode-pro\/wp-content\/uploads\/sites\/72\/2013\/03\/HCJ2DGBE0H-150x150.jpg\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n, 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.<\/p>\n
\n\n\nTable Head Column One<\/th>\n Table Head Column Two<\/th>\n Table Head Column Three<\/th>\n<\/tr>\n<\/thead>\n \n\nTable Footer Column One<\/td>\n Table Footer Column Two<\/td>\n Table Footer Column Three<\/td>\n<\/tr>\n<\/tfoot>\n \n\nTable Row Column One<\/td>\n Short Text<\/td>\n Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?<\/td>\n<\/tr>\n \nTable Row Column One<\/td>\n Table Row Column Two<\/td>\n Table Row Column Three<\/td>\n<\/tr>\n \nTable Row Column One<\/td>\n Table Row Column Two<\/td>\n Table Row Column Three<\/td>\n<\/tr>\n \nTable Row Column One<\/td>\n Table Row Column Two<\/td>\n Table Row Column Three<\/td>\n<\/tr>\n \nTable Row Column One<\/td>\n Table Row Column Two<\/td>\n Table Row Column Three<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n- Ordered list item one.<\/li>\n
- Ordered list item two.<\/li>\n
- Ordered list item three.<\/li>\n
- Ordered list item four.<\/li>\n
- By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ol>\n
\n- Unordered list item one.<\/li>\n
- Unordered list item two.<\/li>\n
- Unordered list item three.<\/li>\n
- Unordered list item four.<\/li>\n
- By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ul>\n
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.<\/p><\/blockquote>\n
HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.<\/p>\n