Quick HTML reference for commenting

I’ve been asked to put up a short primer on how to properly format your comments so that you can take advantage of what HTML I’ve allowed. And I’m of course happy to oblige!

There’s a quick reference by clicking on the “allowed HTML” link right above the comment box. It gives you the following possible code:

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

To use a tag, enter it as shown. That starts the tag. Type whatever text you want, then close it with the slashed close tag as shown below. The parameters are optional, but some are necessary for the tag to be functional. They go only in the opening tag, not in the closing one. The quick reference shows what parameters are available for each tag, but doesn’t say whether they’re important or not. See below for what each tag does.

<a> — the A stands for “anchor”, which is the old-timey HTML term for a link. Enclose text in one of these to create a clickable hyperlink. The href=”http://someurl.com” parameter says where the link goes. title=”” says what shows up in screen readers for the visually impaired, and might show up in a tooltip if you hover your mouse over the link. <a href=”http://google.com”>Link to Google</a> would render as Link to Google

<abbr title=””> — an abbreviation. The title is the expanded form of the abbreviation. <abbr title=”refridgerator”>fridge</abbr> would render as fridge. Acronyms function identically: <acronym title=”Hypertext Markup Language”>HTML</acronym> would render as HTML .

<b> — Bold. <b>LOUD NOISES</b> renders as LOUD NOISES

<i> — Italics <i>stage whisper</i> renders as stage whisper

<strong> — Strong text. Most stylesheets render this the same as Bold, but it’s entirely site- and stylesheet-dependent.

<em> — Emphasis. Most stylesheets render it the same as Italics.

<blockquote cite=””> — Blockquotes. Put pulled-quotes into these to give them the pretty, page-specific rendering. The cite parameter is for referring to a specific webpage, though most times you’ll be using it to pull quotes from the same page, so feel free to omit it. <blockquote>Ken Ham is a poopoo head</blockquote> would render as

Ken Ham is a poopoo head

<cite> — use this to format citations to specific works. It renders on the screen as emphasis in most places, but can be used to index a greater work and custom-format the “works cited”. Use this if you have an expansive body of work and want to make sure it’s accessible to scholarly readers.

<code> — Pre-formatted code. Use this if you want to use monospace, to indicate code that should be typed exactly as seen into a command line, etc. <code>10 PRINT “Hello!”</code> would render as 10 PRINT "Hello!"

<del datetime=””> — this is for “deleting” a chunk of text, and marking the date/time when it was done. You can omit the datetime parameter. Use this for marking up someone else’s work, or if you need to revise your own and annotate when each revision happened. It usually renders the text as struck-out. <del>oopsie</del> renders as oopsie

<strike> — Strikethrough. Usually renders the same as “del”, but it doesn’t have the connotation of actually having deleted the text, much like how “bold” doesn’t mean “strong”. Semantics, semantics.

There’s also one site-specific trick I can share — I enabled a plugin for my comments called SmartYoutube that allows you to very easily post Youtube videos in the comment field. All you have to do is take the full URL to a video from Youtube, and add a “v” as follows:

Normal text: http://www.youtube.com/watch?v=K7Ky5R-vxns
This however will embed the video: httpv://www.youtube.com/watch?v=K7Ky5R-vxns

So paste the URL, then add a v between the “http” and the “:”. Once you post it, it will embed.

Like so.

Most of the skills you practice here are transferrable to other sites. Probably not the Youtube trick though. That’s SmartYoutube-specific. Enjoy your commenting!

{advertisement}
Quick HTML reference for commenting
{advertisement}

9 thoughts on “Quick HTML reference for commenting

  1. 1

    Jason,

    I’ve been asked to put up a short primer on how to properly format your comments so that you can take advantage of what HTML I’ve allowed. And I’m of course happy to oblige!

    You’re Yore Your tutorial is GREATLY appreciated!
    Education is an admirable thing, but it is well to remember from time to time that nothing that is worth knowing can be taught. -Oscar Wilde
    I am not entirely sure what the abbreviation stuff is used for-maybe you could expand…..
    Kind of like this….

  2. 3

    Yup. You opened a blockquote instead of closing it at the end of my pulled quote. I make that same mistake myself all too often. S’okay though, you got everything else right!

    As for abbreviations, I dunno why you’d want to do it, unless you had a LOT of acronyms in your comment and didn’t want to expand them inline. I left it in because it was harmless, but I could easily disable that function in the comments if I wanted to. I mostly just left all the benign formatting stuff and pulled out the junk that could make my page’s rendering very, very wrong.

  3. 4

    I’ve been asked to put up a short primer on how to properly format your comments so that you can take advantage of what HTML I’ve allowed. And I’m of course happy to oblige!

    I would like to apologize for questioning your nerd-cred!
    two To Too often I have felt the tinge of jealousy reading pretty comments that even though completely ignorant, seem more informed by their attractive formatting.
    At least now If I can’t “convince them with content“, I can “obfuscatethem with optics
    As you have said before…

    George is a fucking genius

    Well, OK, you never actually said that,but now I’m sure you’ll be thinking it more often!

  4. 5

    Of course, too much about HTML shouldn’t be revealed here in the open. If͉̠͓̭͉̱ͅ ̟̬̠̳̦̩w̫͈̫ͅe̩̭̖̫̼ͅͅ ̠̜̲d͍͍͇͉͙is̤c̲̱̬ͅus͔͎̝͈̠s̳̱ ̻̟̩͖iṱ̖̱̘ ̥̼̯͉͉t͕oͅo͔͙̤ ͚m̯̗̝͓̺̼̲u̱̣͇̖̜̫c̞h̯̩̺,̟͉̱̻͙ ̻̟̲̗̲̙t̜̭̗͉͍̭h͉̜͇̤͈̙e̜̜̟̣͈͇̤y̫ ͉͍̯͍̦̩m̗̲̟͈̬i̜̮gh͈͕͖̳͙̜̩t͔̮̺̪͓͚ f̝̰i̝͕n̞d̟͉̘̫͚̖ ̜͇̫ͅu̮ș͉ ̤̪h̜̻̖̘͕̩̮e̤̰͔r̥͎̣̼̭͖e͙͎̯̪.͍̠̗ H̢̀T̸̕M͏͢L̨̕ c͜͏a̷̸͏n̵ ̧b̨̛e s̛͢om̸̕e̵͜th̨̛in҉g̵̕͞ ̢͝o̧͢f̧͢ ̵̧á͏̛n̛ ͘ar̕t͟͝,́ ̶b̶ut͏͡ ̸t͡her͢҉è͏ ̧̕a͘re̶͝ ̷̶t̨h̶os͠e͟͠ ̸͏w̢h͘ò͟ ͡c͝҉on͢͟s̶id̨͝͠e͘̕͜r̴ ̵̡it̛̀̕ ҉a͟ ͟͠d̶a̷rk ̵̀a͝rt͡.T̷̛h̢̧͘͠͝e̶̵͜͞͞ŕ͠e͜͏ ̸̨̕á̕͡ŕ̢̧͘͠é͢ ̢͝t̴̸̡̀h́҉̵ơ̷̧͜͝s͏̷͘͜͝e̴̸͞ ̴̡̛́w̸̸͘h̴̵̸̴̛o͏̀̕ ́҉w̕a̶͠t͟͟͏̷̴ç̷̷̨h҉͞ ̷͘u̧̕s̷̀͢͠͠.̷ ̧҉T̸̴̢̛h̢̢ȩ̨̀͘y̢̢͠ ̶̧͢t͟h̀̕͘i҉͏́̀n͏͜k̨̡̧̛͞ ̸͠t҉̧͞͡h̡e̵̶͢ ̸͟s҉͏̢͞ȩ̷͟͡c̷̀́͟r̛͟͜e̸̕͏̶̢ţ̸͏̕s͡ ̵͢͜͟s̸͡h̸̵̀͢ǫ̷̵͜͞u͏͟l͝͡ḑ̵́ ̢̛҉̸̵n̨͘͡o̴͘t̨́͘͞ ̶̵̡b̶̡͞e̛͢҉ ̡͢r̛͡e̴̕͠v҉͡e̵̷̢̡a̴̢̧ļ̢̨̨͟e̢͠d̵͟͠͝͏.̶͢

    I̢̲̮̲͚̼͔̫ţ̧̞͙͖̬͎̱̕’̙̪̳̖͉́͝s̩͈̪͎̕ ̙̬̭̠̤͔̮̩t͡͏͍̹̻̞̩̼o̴̝̖͘͟o̢̻̼̣̳̘͉̱͓͘͡ ͏̸͓͇l̵̝̜͕͔̝̘̗a̢҉͙̜t͉̳͈̱̲e͉̬̱̦͚͠͠ͅ.̢͍̲̳̬̮̞ ̸ͅT͍̮̺̩̕͡h̞͔͟e͙̙̼̝̫y͇͖͈̤’̻̬̬v̷̨̹̱͖̤̥̗͕̜̕e̮̱͈̙̠͓͘͡ ͚̦͢f̶̵͙̗͍̹͍͍͕͞ǫ̙͚́u̻ǹ̨̰͇͍̟̟͍͈d̵̷͍̩̺̱̥̟̮̠̘͢ ͍͉̲̟̹̟̟̙͘m̱̗̪̺͇̞̦e̛̮͎̯.̖̼̟̭͡ ͔̠̪̟͈̮̤̲̗͘͟Ş̴̶̭̮͎̠̗͔̻̬a̡̦̰͍̼̘̺v̭̘͈̜̭̞͠ḛ̭̦̦̱̞̱͠ ̶͇͎̲̜̪ͅy̼͍̘̜͔̮̕o҉̢͉̮̝͝u̴̢͔͙͈͘r̨̼̗͡s̳͞e̡͈͓͕͔̹͠l̢̛̠͔v́͞͏̳͔̺̬̯̦̳ͅé̹͔̮̭͙̝͎̜͡s̢̼̰!̢̭̣̹̞͠ ̢̦͍̝̰͈̰͜͠S̙t̶̲̳͖̩̭̟a҉͏͇͇̭̣̘̻r҉҉̟͔͇̰̥͇̘̼t͏̟̤̥̦̗͚̞ ̷̥̖̣̖̜̝̳t̨̻̠͎̺͚̳a̶̩̲͓͢l̷̹̦̺ḱ̛͉̥̞i̼͍̺̤n͇͔̟̟͎g̨̢͔͉͍ ̘̦̗͍̹̫̜̕͠áͅb̟̲͔͖̬̙̞͞o͉̬̮̦̠̥͎u̝̣̱͓̭̣͓ͅt͏̪̙ ̵͙̯̭͎̱̕p̶̢̛͇̲͓̯̲̘͔͓r̮̬̻̙͘͘͝a̶̷̢̙̺̖̤̘̖̼͔y̗͉̗̜e̘̠͎r͏̨̝͠ ͏̴̝̱͟a̳͡g̵̠̝̩̘̥̕ͅa͏̮̙͓ḭ̷͎̼n͔̣̖̜̳̙̣͈͚!̀҉͙͔̙̖ ̶̙̘̗̯̦̩͚̞T͈̥̼̞͕͈͈͈͢á҉̢̜̼̩̥͙̣ư̱̟̘̫̰͚̹̫̕ṉ̶̶͙͚͓̱t̖̬̣̘̘͍̯̟ ̶̸̘͉͕̻t̬͉͚͖͍͘h̛̦̥͚͎̞̜̣͓̀͢e̛̥͓͖̮͢͠ ̷̵̩̖̳̼̹̘ͅC͏̷̻͈͕̲̝ͅḥ̶̢̙͕̼̺̰r̢̠̫í͈̜s̮͕̼̪̞͙͉͍͝ț̞̮͚͇̞̮̩i͎̤͞a̧̪̺ṋ̣s͇͍̺̲͞!̹̩̣͈̪̻̯̙͟͝ ̥͘ͅD̶̡̬͍͙̰̺̘̦͢o͓̕ ̵̧͚͇̙͇͢ͅą̲̲͞͠n̥̳̱͞y̴̬̘̞̤͙͓͕͠ț̹͖̫̣͢ͅh̨̭͓͈͈̻͔͔̀i̸̴̳̟̤̜̗̗̕ͅń̕͏̠̬̦̯g̬̱͕̳͘͢͠,̗̯̟̘̼͞ͅ ͔͚̯̀b̡̬̝͟u̲̥͎t̝̱̼ ̶̸̼̻p̹͕̱ͅl͓̹̗e̷̡̱̙̺̝̮̖a̷̢̩̳̱̟͖͢s̖̳͓̲͘e̢̯̳̘̭̤͍͞,͎̟͈͚͉͉͎̻͔͝ ̙͙͙̹p̦͝l̡̪͓̘͚͔̗͘e̵̮͕̙͈͉͖̤̗͢͠a͟҉̵̳͕̘̝͖͉s̮̩͍̺̰̬͔̹è̛͍̰̟̭̼̗̣̞,̦̘̩̘̗͚̖̪͢ ̶͙̞̭͙͔̬̘͟ḑ̷͕̤o͏̞͔̱̥̩n̸̶҉̥̯̘͇̹̯̞͓’̶̙̙͙̻̻͠t̳͙͎͈̯̙́ ̝̳͖͝͠l̝͈̳͘ͅe͔͖͚̤̥͝t̗̳̭͎ ̶͖̳̯͔͓̳͡t̻͔͚̬̜̗͉̫͟͝h͎̦e̸͍̞̺͉͜m̹̲̳͢ ̠̗̖͎̫͙͖f̶̡̪̜͈͍į̙̫̩͙̩̬͉n̻̫̲͇d̳̻̳̥̭̲̭̞̣ ̮͟͜y̬͉̥͠o̪͉u̧̩̫̱̳̹̗̗͇̥͢ ̦̼͈͘͞d̸͕̹͖͖̘͇̥̘̺̀i͇͚̱͜͞s̛̱͔̘̩c͎̲̝͎̹͕͠ͅu̪͓̣̘̬̱͓̳͘͞s̤̮̻͉͟s̴͜҉̪͎̥̘i̡̘̜̰̪̰͘n̝͖g̴̺̺̫̗̪̗̲̺ ̗͉͞͡H̩̦ͅT̨͍M̙̮̪̩̗̪͖͔͕͘L̠͕ ̡̥̱̰͎̬̖͡5̶̨̬̺͚̯̟̦̗!̨̜̙̗͓͠͞!̷̸̴̳͍̪̘̫͚̭̝͚!͏̴̵̠̹̙ ̷͎̹͕Ì̸̖͎͖̙a͉̰̰̫̜̻̮͓͠!̳̙̕͝ ̧̻̼̥̟̮̯̭͜͠I̶͓̻̭͓͞a̞̞͞!̨̧ͅ ͏̢͓̖͚̼̳̠̭̠Ć͎̖̪̤̦̯̗ͅͅt̡͕̼͓̝̲̺̕h̸̫͈̻u͉͟͞l̠̟͔̭̪͖̀ͅh҉̵̲̝͞u̩̤̠̟̲̳̳̙͝ ̸̲̙̝̰̯f̨̟͇̠̤̞̖̫̹͉h̨҉͇͝t̸̷̺̩͇̫͍̲a̴̪͇͙͓̝̬ͅg͎̤̟h͈̟̮̬͢n͏̮͉͍̝!͏̹̩̗͇̀ͅ

  5. 6

    Well, I don’t generally volunteer for tech support on that scale, but I’ll tell you what — give me more info about where you’re hosting your blog, and what blog engine you’re using on it, and I can try to point you to some resources for beginners tailored to what you’re using. Fair?

  6. 7

    So in the spirit of your Pac-man Tech support post today, I thought I would pick your brain on a tech support question of my own. So I started my blog yesterday, and I don’t know how to do anything. How do I get the “scarlet A” to show up on my sidebar? Can I put a picture up on my blog? Why do blogs have to be so friggin difficult?
    To not clog up your threads, maybe you could just send me an e-mail telling me how to do this?

  7. 8

    O.K.
    It’s a basic blog hosted by wordpress, just a starter one. Maybe that’s why I can’t do this stuff? I kind of wanted to see if I could maintain one for a while before I spent money on it. It’s linked to my comments so you can see it if you want.
    I don’t think I need “large scale” tech support, I just find it hard to make it look “professional”.

  8. 9

    You actually should be able to add HTML “sidebar widgets”, so displaying your Out Campaign A shouldn’t be a problem. They also advertise three gigs of storage space for uploaded images, as well. You ought to be able to do it, in theory, but I’m actually having a surprising amount of difficulty finding information on how to do stuff with the free WordPress offering. This site explains how to upload images, but I can’t verify it at all. Looks like a much older version of WordPress than the one that’s installed on my self-hosting package.

Comments are closed.