How to Allow HTML Images and Videos in Your comment Section

➢ Comments: allowed HTML

The html you can use when commenting on someone else’s blog is very limited. Strangely, the Support docs are silent on this. So is the comment area in most themes – with some exceptions.
In Vigilance you get this (almost useless) notice below the comment box:
“Note: You can use basic XHTML in your comments. Your email address will never be published.”
Basic XHTML? What is “basic” XHTML?
Well, in some themes you get this list:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i>
<q cite=""> <strike> <strong>

The list shows up above or below the comment box in the following themes:
Benevolence (after “Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed:”)
Beach, Choco, Coraline, Elegant Grunge, Enterprise, Fusion, Inuit Types, Liquorice, MLB Fan, MLB Modern, MLB Retro, Mystique, Notepad, Oulipo, Paperpunch, Pilcrow, Sandbox 1.6.2, Spectrum, Structure, The Morning After, Toolbox, Twenty Ten, Under the Influence, Vertigo, Vostok, zBench (after “You may use these HTML tags and attributes:”)
Andreas 09, Hemingway (after “XHTML: You can use these tags:”)
Blix, Flower Power, Sweet Blossoms (after “Some HTML allowed:”)
Fjords 04 (after “HTML-Tags:”)
Pool (after “XHTML:”)
This list looks so out of place on a blog page, and so strange to users not familiar with html, that some think it’s a bug.
The only elegant case is Fauna. Above the comment box you get a tab saying “Formatting your comment”; clicking the tab reveals this:

Formatting Your Comment The following XHTML tags are available for use:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i>
<q cite=""> <strike> <strong>
URLs are automatically converted to hyperlinks.

How exactly are they used?

As shown in this article, some themes display this as the html you are confined to when commenting:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i>
<q cite=""> <strike> <strong>

Explanation (for those not familiar with html)

All the above are opening tags: each one says “mark up the text from this point on”. Each one must always be paired with a corresponding closing tag (same tag but with a slash after the first bracket) that says “up to this point”.
<i>TEXT HERE</i>
<em>TEXT HERE</em>
Enclosed text will turn to italics.
<b>TEXT HERE</b>
<strong>TEXT HERE</strong>
Enclosed text will turn bold.
(Strictly speaking, “em” and “strong” mean emphasis and stronger emphasis, and can result in some other differentiation; in practice they almost invariably translate to italics and bold.)
<a href="">TEXT HERE</a>
Enclosed text will turn into a link to the address you put inside the quotes.
(The address must be the exact complete URL as copied from the address bar of your browser.)
<blockquote>TEXT HERE</blockquote>
<cite>TEXT HERE</cite>
<q>TEXT HERE</q>
Enclosed text is a quotation. The visual result varies, depending on the theme. Forget “q”, as it doesn’t work in Explorer.
<del>TEXT HERE</del>
<strike>TEXT HERE</strike>
Enclosed text will show up with a strikethrough line.
<pre>TEXT HERE</pre>
If you copy-paste some text from a text editor, enclosing it this way will preserve multiple spaces and line breaks.
<code>CODE HERE</code>
Displays computer code. Can’t be used to display html tags.
<abbr>WORD HERE</abbr>
<acronym>WORD HERE</acronym>
Enclosed word is an abbreviation or an acronym. No difference visually. Practically useless unless in conjunction with the title attribute.
title=""
Adding this to the opening tag of a link, an abbreviation or an acronym will make the text you put inside the quotes pop up upon hover over. For example, if you write this:
<a href="http://wpbtips.wordpress.com/2010/05/10/html-allowed-in-comments-1/" title="Html allowed in comments (1)">Click here for part 1 of this article</a>
(And I would feel sorry for whomever uses this in a comment…)
cite=""
datetime=""
Adding these to an opening “del” tag is meant for recording why and when the text was struck through, i.e revised. Absolutely pointless in a comment, plus no major browser supports them.

Additional remarks

• These tags can have a combined effect; for example:
<b><i>This will be bold and italics</i></b>
This will be regular text, <b>this will be bold, <i>this will be bold and italics, </i>this will be bold only, </b>this regular again.
• All other html tags and attributes are stripped out. So, among other things, you cannot make any other changes to the style or the formatting of the text (e.g. size, color, or indenting), you cannot make a link open in a new window, and you cannot insert images.
On the other hand:
• Html entities (see Links 1 in my sidebar) can be used.
• You can use the source-code shortcode to display code (including html tags).
• If you paste a valid URL, it will automatically turn into a live link.
• If you paste the URL of a Youtube video in particular, the video itself will show up.
(To disable a Youtube video posted that way in your blog: Comments > Edit > highlight video URL > click code button > click Update.)
• Some video shortcodes work. (I haven’t tried them all; of those I have tried, flickr, ted, wpvideo, and youtube work, blip.tv, livevideo, and vimeo don’t.)
• The soundcloud and gigya shortcodes also work.

Endnote

Comments are basically dialogue; it’s not likely that you’ll ever need anything fancy or far-fetched in a comment. But anyway it should be clarified that all those html restrictions apply to commenting as a visitor: when commenting on your own blog, you can use all the html allowed in posts. Demo comment below.