5 HTML Tips Every Blogger Should Know
You probably didn’t get into blogging for the technical side of it. Amirite?
Nevertheless, being at least somewhat tech literate is a must. You might be scared by the mere thought of touching HTML, but knowing a few little tricks can save you a lot of frustration.
If you’ve been blogging for any length at all, you probably know something basic like starting a tag with < > and closing with </>. For example, to bold something you’d do <strong>this is bolded</strong>.
But do you know how to proportionally resize an image with HTML or link an email address? The following tips are a mix of formatting and troubleshooting tips for the most common issues bloggers have with basic HTML. All of these will come in handy at some point!
1. Curly quotation marks mess up your code.
If you’ve ever pasted some code into your website somewhere and wondered why it didn’t work, first check how your quotation marks look.
Within your HTML, you might have quotation marks around things like the width of an image, a URL, etc.
Sometimes when copying and paste code from elsewhere (like to embed a video or paste a widget into your sidebar), you might end up with curly quotation marks like these:
<a href=”https://www.blogclarity.net/resources” target=”_blank”><img src=”https://www.blogclarity.net/wp-content/uploads/2014/07/25-tips-insanely-productive-FB.png” width=”250″ ></a>
If you’re looking at the code on your website or the WordPress Text editor of your blog post, all your quotation marks should be straight like this.
<a href="https://www.blogclarity.net/resources" target="_blank"><img src="https://www.blogclarity.net/wp-content/uploads/2014/06/Ultimatelistofresources.jpg" width="250"></a>
Next time you have a bit of code that isn’t working, check first to make sure none of your quotation marks are curly, then edit in HTML too change them to straight ones! Sometimes it’s just that simple!
2. Proportionally resize your images with ease
Before I tell you this hack, you should know that this doesn’t mean you should upload large full-sized, hi-res images to your blog and then resize them. No, no, no. That slows down your site and hurts the user experience.
When this DOES come in handy? When you upload a 700px image let’s say and you really needed it to be like 600px. Instead of deleting it, resizing it in a photo app, then re-uploading it, simply use this hack.
Let me show you the hack by using another example: resizing an image into your sidebar. With the code below, notice there’s no length listed. This image is actually 700px for displaying on the resources page, but I wanted it sized down that same image to 250px for the sidebar. To do that proportionally, just use the desired width OR length. It’ll resize the other dimension so the image keeps its proportions.
<a href="https://www.blogclarity.net/resources" target="_blank"><img src="https://www.blogclarity.net/wp-content/uploads/2014/06/Ultimatelistofresources.jpg" width="250"></a>
3. Make a clickable image in your sidebar.
I often see new bloggers struggle with this one, but have no fear! It’s just a wee bit of HTML code.
What image might you want to link on your sidebar, you ask? Things like:
- A headshot of yourself that goes to your About page
- Social media icons that take you to profiles or pages
- Image that links to a popular blog post or recipe page
To add a clickable image to your sidebar in WordPress, first upload the photo you want to use into your media library. Copy the link from the URL field (that’s the URL of your IMAGE):
Then head to Appearance > Widgets. Once you’re there, scroll down to the Text widget. To add the Text widget to your sidebar, just click and drag the widget to wherever in your sidebar you’d like to add the image. Add a title if you want to display one (optional). Code will go into the Content section:
You’re gonna use code like this:
<a href="https://www.blogclarity.net/resources" target="_blank"><img src="https://www.blogclarity.net/wp-content/uploads/2014/06/Ultimatelistofresources.jpg" width="250"></a>
a href is the URL you’re directing someone to. In the example above, it’s my Resource page.
The target attribute “_blank” means to open the link in a new browser window.
img src is the image that displays in the sidebar.
width is the number of pixels wide for the image.
Once you get that into your sidebar widget, click Save. That’s it!
4. Check for <div> tags if your post formatting is wonky
Div tags separate (aka divide) the HTML on your page into sections. In WordPress, unnecessary div tags can make for some wonky formatting when you go to preview a blog post or page.
These unwanted tags (and other unwanted nonsense) usually pop up when copying text from an app like Evernote or Word and pasting it into the Visual Editor of WordPress (or similar area of other blog platforms).
You can prevent this from happening in a couple of ways.
First, after you copy the text you want to put into WordPress, click the “Paste as Text” button and it’ll paste without all the formatting!
If you’re a keyboard shortcut lover like me, Cmd + Shift + V on a Mac and Ctrl + Shift + V on a PC will paste text without any formatting too. Sweet!
5. Make a hyperlink to an email address
Sure you can hyperlink text, but have you ever wondered how to hyperlink an email address like this? When you click that link, it opens my email address in the To: section of your default email app. It’s a much better option that just writing out your email address because it can’t get picked up by spam bots scraping sites for email addresses.
How do you do it? Instead of adding a URL, just add mailto: and your email address (no space). Like so:
The HTML code looks like this:
<a href="mailto:[email protected]">an email address like this</a>
That’s it!
Any of these new to you?
Did you learn anything new? Have you ever used any of these tips before?
