Hullo queermos! I have seen some really well-formatted comments this week! Congratulations to all! Today, we’re going to dive just a little bit further down the rabbit hole re: complexity. If you haven’t seen part one of this mini-two-part-series, head on over and check it out. I think knowing the very basics will be helpful. Don’t worry, we’ll wait for you to get back.

Quoting Your Sources

Or quoting something from the post you just read. Or, really, just quoting things in general. If you’re only quoting a short thing, that’s easy peasy, just throw quotes around it. But if you’re quoting a long thing, then you need <blockquote>.

Let’s say I want to revisit the genius and relive the experience that was “Reclaiming Abuelita Knowledge As A Brown Ecofeminista,” as you do now and again. And let’s say in that I’d like to include a quote. Here’s what I’d do—

<blockquote>The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people.</blockquote>

That looks like:

The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people.

And you could stop there, but what about citing your sources? Remember plagarism? There’s a way to very easily cite a source in the code. All you have to do is add an attribute, called cite. Check it:

<blockquote cite=”https://develop.autostraddle.com/reclaiming-abuelita-knowledge-as-a-brown-ecofeminista-213880/”>The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people.</blockquote>

That reads out like this:

The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people.

Oh hey, didn’t see a difference? That’s because the attribute cite has no visible tell in a browser. What it is good for is screen readers. A screen reader is a software or piece of equipment that interprets websites (and other things that appear on a computer) for the visually impaired. Screen readers can read your citation — so this attribute, my friends, is about access. I say this from a place of privilege only having taught someone computer skills using a screen reader a couple times, but comment sections can be a real bitch if you’re using one. The more metadata we can offer up, the easier the interpretation gets.

Now if you wanted to actually link back visually, it’s a good time to talk about nested tags. Tags that can go inside of other tags. Oh what a world we live in. All we’re gonna do is use the link (<a>) tag we practiced last week:

<blockquote cite=”https://develop.autostraddle.com/reclaiming-abuelita-knowledge-as-a-brown-ecofeminista-213880/”>The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people. — <a href=”https://develop.autostraddle.com/reclaiming-abuelita-knowledge-as-a-brown-ecofeminista-213880/”>lalobaloca, Autostraddle.com</a></blockquote>

See how you can have one entire link tag nested inside the blockquote? It’s like this:

via Viola.bz

I know you just stared at that, waiting for him to get to the end. I know you did. Don’t even play like you didn’t.

Anyways, the above HTML will read out like so:

The thing is, I DO care about the environment but I cannot stand it when white people pretend they are all connected to the earth and refuse to understand that many of us — Migrant Brown People — come from backgrounds where “environmentalism” is not talked about because we grow up doing unintentional “green” things. For some reason mainstream culture has done a great job of erasing people of color’s legacy on anything “green” or “environmental.” Mainstream media falsely frames sustainable practices as practices spearheaded by white people. — lalobaloca, Autostraddle.com

Blammo. You rock. Try nesting tags in the comments.

Images Of All Sorts

We’re getting CRAAAYYYZZZYYY y’all, because we’re about to break the established syntax of <tag>thing</tag>. Because an image (or in this case <img>) is all contained all by its lonesome, it doesn’t really need a whole separate closing tag. But much like the <a> tag, the <img> tag needs an attribute to function properly. So it looks like this:

<img src=”https://develop.autostraddle.com/wp-content/uploads/2011/02/whiskey.jpg” />

The attribute is easy to remember because it’s short for source. All we’re doing here is telling the browser where to source the image from.

And whoa. Did you see that? That forward slash at the end? That’s just us closing the tag without having a closing tag. We still don’t live in a barn, close your tags. Computers are not smart and they can only do exactly what you tell them to — meaning the browser functions better when you say, “okay browser, we’re done rendering the image now.” That’s what that slash is for. One space, then a slash. That’s all there is to it.

Except, of course if you want to get fancy. But we’ll get to that later.

So the above HTML reads out like this:

First, I want to go over what you need to actually get an image to show up.  Step absolutely zero, your image already has to be on the internet. It needs to be hosted somewhere on some server that is always and forever connected to the internet. Everyone’s favorite image hosting service is, of course, imgur. So if you’d like to post a picture of your pet in the comments (highly encouraged), you’d first grab yourself an imgur account and upload that sucker. Another popular choice for photographs, specifically, is Flickr. Hell, you can even host your images on Tumblr. Follow your heart. And post other rad image-hosting suggestions in the comments, please! Much appreciated!

The second thing you need is to get the actual URL for the image itself. Not the page the image is on. Remember, computers are not interpretive beings like you and I. It’s all black and white, no shades of grey, and it’s exactly what you tell them. So if you list your source as anything other than a .jpg or .gif, it will not work. Example — this is a photo from Kate or Die’s Instagram/Tumblr. The URL where I found the photo is “http://instagram.com/p/n_YuCgHcR2/#” but if I put that as my source, here’s what I get:

Broken. I get broken. Blerrrp. But! If I right click (or control-click or two-fingers-click) on the image in her Tumblr post and select “view image” or “open image in new tab” from the menu, I get “https://24.media.tumblr.com/bd98d102f29649303661af5b5e619928/tumblr_n5kz4mJOHn1qa10uwo1_500.jpg”

That is the correct URL. And I can tell because it ends in an image file extension — in this case, .jpg. Always check that before you hit Submit. This is the number one reason images don’t work in the comments on this here website or any website. So let’s see what the picture was:

Oh, look! Kate likes Lumberjanes! So do we, Kate. So do we.

That’s sufficient! But remember, we just talked about folks with screen readers. Reading out that long, confusing URL doesn’t really tell someone using a screen reader what’s up, so let’s add the attribute title, the same one we use for tooltips. We can also add alt, meaning if there’s an ultra mega-fail and your connection is terrible and images aren’t loading, the browser will load the text instead.

Here’s what the HTML looks like:

<img src=”https://24.media.tumblr.com/bd98d102f29649303661af5b5e619928/tumblr_n5kz4mJOHn1qa10uwo1_500.jpg” alt=”Picture of Kate Or Die’s comic picks for this week.” title=”PROOF THAT KATE LIKES LUMBERJANES AS MUCH AS WE DO” />

And here’s how that reads out:

We can also use attributes to futz with the size of images in our comments. This is great when you want to share something that’s really friggin’ large. Of course, it’s always better to resize it and then upload it if you have control of such things. But if you don’t and you want to make something big into something wee, use the attributes width and height. Here’s a whiskey kitten example:

<img src=”https://develop.autostraddle.com/wp-content/uploads/2011/02/whiskey.jpg” alt=”Kitten drinking theoretical whiskey out of a real faucet, captioned ‘is this where the whiskey comes from'” title=”The Famous Whiskey Kitten” width=”150px” height =”150px” />

Here’s what that looks like:

What a bonny wee kitteh.

 Embedding Videos

It might look like magic, but it’s actually really easy. Step one, find the video you’re thinking of using on YouTube or Vimeo or another sharing site. Step two, look for the option to “embed.” Sometimes it will be hidden under a tab called “share.” Click that. Step three, copy that HTML. Here’s an example of what it will look like:

<iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/UxxajLWwzqY” frameborder=”0″ allowfullscreen></iframe>

Holy f*ck, that’s crazy complicated. I mean, we can spot some stuff we talked about. But you know what? I don’t care. No one cares, because this is something you don’t have to do, know or memorize for this video to make it into your comment, at least on our website. You just have to paste the youtube URL (www[dot]youtube[dot]com/embed/UxxajLWwzqY). And what happens in this case is a perfect summary of exactly how I feel about all that HTML we don’t know up there:

Learning HTML For Realsies

So I’ve just gone over the tags and attributes that function specifically in our comments section. But if you’d like to learn HTML (or even CSS) for real for real (as in, more extensively), there are a bunch of resources all over the internet that can help you. For the free variety, I highly recommend Code Academy. If you’re good to spend a little money, Treehouse gets a little more in-depth. And please, share your HTML resources in the comments!

This has been the seventy-ninth 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+!