Do you ever look at the HTML code for your images and feel like it’s some sort of alien language? I’m with you– all of that code can be super intimidating at first. But learning to demystify that code can allow you to be the master of your own images and will open the door for learning all sorts of neat tricks!
When I started blogging, I knew zero HTML. Being on a team with a husband that is a master code slinger gave me a big advantage on that front, but at first he had to do everything for me. And it took a lot of hand holding and coaxing to get me to try. And now I’m proficient. I understand it. And I type it with flying fingers and little thought. HTML is now in my muscle memory.
Now that I’m here, I want to spread the love. I’ll hold your hand so you can get a handle on HTML that you need to know as a blogger. Because, trust me, you don’t want to pay someone like Jake $50-250 an hour to do it for you. You may not be able to design your own fancy high-tech blog tomorrow, but we’ll get you swapped from your visual editor to the HTML or text side lickety split!
And we’re starting with images, because chances are you see and paste in this HTML already! Think of this post as the anatomy of picture HTML.
Here’s the Code for the above image:
<a href="http://thenerdnest.com/ wp-content/uploads/2013/03/Nerds.jpg"> <img src="http://thenerdnest.com/ wp-content/uploads/2013/03/Nerds.jpg" alt="The Nerd Nest | A family blog about a couple of crafty nerds." width="525" height="525" /></a>
Ah! I’ll bet that looks like Greek to a lot of you. Let’s break down each part of the code:
Image Link:
<a href="http://thenerdnest.com/ wp-content/uploads/2013/03/Nerds.jpg"></a>
Often, when you click on an image, the image is a web link. It may take you to another web page, the original source of the photo, the place the photo is being hosted (such as Flickr), or to the image on a page all on its own. This part of the code determines where the image will take users when they click it! If you’d like to change this portion of the code, just copy the link of your desired photo destination and paste it in!
You might also notice that I’ve included </a>, which isn’t found until the end of the image code. This part of the code is the end, or anchor, of the link. When you start things in HTML, you have to end them, too. It’s like you’re wrapping the content you’d like to be linked up. Sort of like a an open parenthesis and close parenthesis. Without </a>, not just the image would be a link; everything in the whole post would be linked. Yikes!
If you’d like to learn how to have your image links open up in a new tab or window, read our post How to write links that open up in a new tab.
Image:
<img src="http://thenerdnest.com/ wp-content/uploads/2013/03/Nerds.jpg" />
This part of the code gives the source of the image. This is the location the image is stored on the Internet. If you paste the link into your browser, you’ll come upon a page that is only your photo! This code creates a holding space for the referenced image.
Alternate Text:
alt="The Nerd Nest | A family blog about a couple of crafty nerds."
This is a required attribute of an image tag, which means that it goes inside the image tag (in between the carrots that start and end the image code). This conveys essential information about the image. Have you ever wondered why some images, when you Pin them on Pinterest, automatically have great descriptions and others have something like IMAGE9879708.jpg? This is why! Having descriptive alternate text increases the chance that your photos will be shared, clicked on, and will help insure that credit is given to you if you include your name.
Image Size:
width="525px" height="525px"
This part of the code defines the size of your image.
It is important to note that the image will be resized to the size that you define, but the image will LOAD to the original size of the image. So if I upload a photo that is has a defined width of 3000px and then change the width and height of the photo to fit my blog, the photo will appear to be smaller but will load as the original large photo. This is important because posts with very large images take much longer to load, and your readers with slower Internet may abandon your blog. It’s best to upload a photo that’s the same size as or only slightly larger than your desired image width.
If you’d like to learn how to have your photos automatically resize to a pre-set width, check out our post How to Resize Blog Photos Uniformly Using CSS.
These are only the basic building blocks of image code. There are many many more things you can do with images, and those things all have code! Now that you know the basics, we can teach you some more fun stuff later!
You might also like:
- HTML Cheats for Beginning Bloggers
- How to write links that open up in a new tab.
- How to | Resize Blog Photos Uniformly Using CSS
- How to Create Picture Packages in Photoshop
- 7 Sites to Get You Started in Web Development
- Faux Polaroid Frame Download and Tutorial
What blogging code tricks would you love to learn?