Ah, HTML. HyperText Markup Language. Basically, the stuff of which websites are made. The cloth from which our internet is cut. And utilizable in our comment section in particular, but also in many comment sections all around this interconnected cyberspace we’ve built ourselves.

We all know why commenting is important — it fosters our happy community and allows a discussion on topics on which, if we’d printed them in a newspaper or magazine, would be a one-way information download instead of a two-way (or million-way) conversation. Commenting is the ultimate in symbiotic relationship. Commenting rules.

It just so happens that Autostraddle readers are smarter, more empathetic and more curious than average. It’s really just my own personal opinion, but I find it to be true. Autostraddle commenters are fascinating. That’s why we had an entire column dedicated to interviewing them. So it follows that commenters with a lot of know-how, questions, heart and voice almost write miniature articles on occasion. The kinds of things that would generally need to be formatted. And hey, even if you don’t, sometimes a gif open thread comes along or really any open thread in which you want to share a picture of your fur-baby. In almost any situation, a tiny bit of HTML knowledge can make a comment clearer or more fun.

HTML is just a series of sentences with their own unique syntax that a computer can read. The syntax of basic HTML is as follows:

<tag>Some visible text that says a thing!</tag>

or

<tag attribute=”value”>Some more visible text that other internet peeps can see!</tag>

Overwhelmingly, that’s how it’s gonna look. Easy, yeah? If you’re still not sure, keep reading. It gets easier when you see it in action.

Here’s everything you can use in our comment section, and many other comment sections around the internet, and when you might want to use it.

via Shutterstock

Emphasizing Your Points

There are two ways in general to provide emphasis and they are also two of the very easiest HTML goodies to pull off. Those two ways are bold and italics, of course! We’re going to be using the most basic syntax here:

<tag>word</tag>

For bold (or “strong“) words or phrases, you’d do this:

My cat <strong>Puck</strong> knocked my succulent, whose name is <strong>Edgar</strong>, over and spilled dirt everywhere.

The first tag is the opening tag and it tells the browser that it should apply that strong look to the following words or phrases. The second tag, the one with the forwardslash (on the same key as the ? on the American keyboard) in front of it tells the browser to stop applying that look. For almost every opening tag, you have to have a closing one. Kind of like doors. My mother always used to say that we don’t live in a barn when we’d leave the doors open growing up. Same’s true here, we don’t live in a barn so close your tags. The above sentence comes out looking like this:

My cat Puck knocked my succulent, whose name is Edgar, over and spilled dirt everywhere.

To add italics (or “emphasis,” get it?), we’d just add the following:

My cat <strong>Puck</strong> knocked my succulent, whose name is <strong>Edgar</strong>, over and spilled dirt <em>everywhere</em>.

That reads out like:

My cat Puck knocked my succulent, whose name is Edgar, over and spilled dirt everywhere.

The most common mistake when using these two tags is forgetting to close them, like so —

<strong> bold words! and here’s all sorts of other words that aren’t supposed to be bold and here’s one that should be <em>italics</em>.

Here’s how that looks:

bold words! and here’s all sorts of other words that aren’t supposed to be bold and here’s one that should be italics.

Womp womp, not what you wanted. The best way to explain this is back to that closing doors metaphor — my mother used to say the thing about the barn, but my father used to say “we don’t want to air condition the world.” This is like letting all that air conditioning leak out of your house because you forgot to close the door, but in this case we’re bolding the world and you forgot to close your tag.

via Shutterstock

Making a Humorous Correction

Okay, so most likely if you decide you don’t want to say something, you’ll probably just delete it before you hit “submit your comment.” But sometimes it’s funnier to say it and then unsay it. That’s when you need <strike>. And the cool part is, there is absolutely nothing different about this syntax! Here’s what it’ll look like:

Today I spent hours <strike>re-reading old Glee recaps on Autostraddle</strike> reading War and Peace and pondering the poetics of Russian Literature.

That looks like:

Today I spent hours re-reading old Glee recaps on Autostraddle reading War and Peace and pondering the poetics of Russian Literature.

Once again, always close your tags or you’ll strike out your entire comment, which will be no fun.

via Shutterstock

Linking

Ever want to provide a resource in a comment? Link to a shop, a website or a deck of tarot cards? You need a handy dandy <a> tag! <a> lets your browser know that it should be looking to link the word or group of words following that tag and </a> lets it know to stop.

But that only tells the browser there should be a link. If you don’t specify what it should link to, you’ll get something like this:

<a>The link to nowhere</a> reads out like

The link to nowhere.

So you have to tell it where to go. For that, you’ll need  an attribute. An attribute is simply another piece of the “sentence” that goes inside the tag and gives the browser just a bit more information about said tag. In this specific case, you’ll need the attribute href. It means hyperlink reference, and is also the sound a sighing elephant makes. href tells your computer that what follows it is the URL where the link should go. href=”URL.” The URL is, therefore, the value.

Remember from the intro that the syntax for HTML is generally <tag attribute=”value”>word<tag>? Well that means the way you employ the href attribute is as follows:

<a href=”http://www.codecademy.com/”>The link to somewhere.</a>

That reads out like:

The link to somewhere.

Take note of a few things — first, that the attribute comes right after the tag, but still inside the opening tag. The second is how you tell the browser what the URL actually is — by using an equal sign. The third is how you tell it where the URL begins and ends — surrounding the URL with quotation marks so the computer doesn’t get confused about boundaries. Kind of like a consent talk except way easier and with fewer consequences if not done.

Now you could do a complete link with that, but indulge me. Let’s get a little fancy. You can actually have a bunch of attributes assigned to one tag. Just like we contain multitudes, so does a tag.

Ever wonder how people get tooltips to pop up? Tooltips are the little tan boxes that automatically appear if you hover your cursor over something for a few seconds without clicking. Not everything has a tooltip, so don’t go trying to hover over everything on this page to test it. This has a tooltip, though:

Hover over this link to solve its mystery destination!

Just like that, the tooltip can be used for humor (some of our writers are absolute geniuses with the tooltip). Let’s take a look at the attribute we need to make one of these, called title.

To make the above hyperlink, this is what I did:
<a title=”I think it’s a case for Sherlock Holmes.” href=”http://www.theguardian.com/film/2014/may/08/ian-mckellen-laura-linney-sherlock-a-slight-trick-of-the-mind”>Hover over this link to solve its mystery destination!</a>

The same syntax applies to this attribute as the href one — must be inside the opening tag, must be denoted with an equals sign and surrounded by quotation marks. The nice part about HTML is that this very same syntax is going to apply to everything. Congrats! You’ve basically learned the basics already.

Next time we’ll be covering how to insert images and quote from sources! In the meantime, go forth and comment with cool formatting.

This has been the seventy-eighth installment of  Queer Your Tech with Fun, Autostraddle’s nerdy tech column. Not everything we cover is queer per se, but we talk about customizing this awesome technology you’ve got. Having it our way, expressing our appy selves just like we do with our identities. Here we can talk about anything from app recommendations to choosing a wireless printer to web sites you have to favorite to any other fun shit we can do with technology.

Feature image via Shutterstock

Header by Rory Midhani

Before you go! Autostraddle runs on the reader support of our AF+ Members. If this article meant something to you today — if it informed you or made you smile or feel seen, will you consider joining AF and supporting the people who make this queer media site possible?

Join AF+!