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](https://www.autostraddle.com/wp-content/uploads/2014/03/shutterstock_150139940.jpg?resize=640%2C426)
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](https://www.autostraddle.com/wp-content/uploads/2014/03/shutterstock_159681041.jpg?resize=640%2C426)
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](https://www.autostraddle.com/wp-content/uploads/2014/03/shutterstock_126828215.jpg?resize=640%2C426)
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
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:
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
Yay!
Yay!
Oh God, THANK YOU
I really needed this. Now I’d better go back to
watching tvstaring at the wallstudying.I have been using HTML regularly since the late ’90s (aka a hundred years ago in internet time), so I have a lot of the basic stuff memorized but I somehow made it through life having NO IDEA that href stood for hyperlink reference and now EVERYTHING MAKES SENSE.
I also have basic HTML knowledge, but I also have some big exams coming up so don’t mind me
procrastinatingexpanding my mind.This was a really great educational article.
I did it!Thank you, Autostraddle, for
teaching me this valuable skilldistracting me during finals!Ah!!! It worked!!
Yes it did! Congrats!
“we don’t live in a barn so close your tags”
this is both hilarious AND educational
I
can’t wait to actually buildshould have already built the website I told my club I’d createNeopets taught me everything I needed to know about HTML. I needed to customize my user lookup and pet homepages, guys. Priorities.
HIGHFIVE. I later moved onto spending forever customising my various Diaryland/Blogspot pages.
I feel this feel re: Neopets.
WORD. ME TOO. There were some really great kid friendly HTML tutorials out there solely for Neopets if I remember correctly.
I really want use all these new skills in this comment like all of the clever people above me did, but I’m paralyzed by the fear that I’ll be incapable. My shorts already fell down in front of all of my students when I got hit by a wave at work today, I think I’ve passed my embarrassment quota for a while.
This post is elephant to my interests.
Jumping ahead, are we? :0) <3 <3 <3
Sigh, that’s what I get for trying to be a keener. (Thank you!)
asdfghjkjhgfdOMG YAS THANK YOU AUTOSTRADDLEI’ve always wanted to know how to do tooltips…
Since I learned basic HTML during my LiveJournal phase (I’m not the only one, right??), I learned to use “b” for bolding and “i” for italics. I love seeing the different tagging methods to accomplish this stuff.
thank you thank you thank you THANK YOU
That was supposed to link to this http://gratitudehabitat.com/wp-content/uploads/2012/10/Thank-you.jpg
I really appreciate that you encourage best practices using <em> and <strong> instead of <i> and <b>. I’m one of those people that gets really bothered by people using non-semantic markup.
(It’s also nice that only <em> and <strong> are allowed in comments.)
It would be rad if there was a preview button for posts, so there was an easy way I could check if I got all of these < > escapes properly lined up.
I feel this is one of the most important information for me.
And i’m glad reading your article. However wanna statement on some basic issues, The site style is perfect, the articles is in point
of fact great : D. Good job, cheers
This is strangely poetic
A very word
but if I learn all this HTML there will never be opportunity to yell about stuff in all caps anymoreI mean this is snazzy, thank you!Sometimes you just need italics
Who are these new women writing for AfterEllen??
Pinky the cat
Pinky the cat
I was wondering if you ever thought of changing the structure
of your site? Its very well written; I love
what youve got to say. But maybe you could a little more in the
way of content so people could connect with it better. Youve got an awful lot of
text for only having one or two pictures. Maybe you
could space it out better?