Would you sketch a drawing without having an eraser handy? Would you paint a room, without first taping the edges of the walls? Well then, don’t even think about blogging without an understanding of the following 7 HTML tags, which any online writer really should know.
There are a lot of situations when you may need to tweak the formatting of a blog entry or online article. If you’re a freelance author, having the ability to deliver a well formatted article utilizing nothing but a text editor and HTML code is an excellent skill to have.
To be marketable and flexible online, you just have to know how to format a full HTML article, or how to tweak things when even a web-based editing tool doesn’t get things quite right. The following are 7 critical HTML tags that you should always keep in your back pocket, as well as when and why you should use them.
HTML Ain’t Just For Geeks
There are plenty of basic HTML tags out there, but this article isn’t meant to be yet another drab introduction to HTML for you poor writers who have absolutely no interest in learning to code web pages. No, what we’re talking about here is formatting on the web. For an article to really look good, there are some general rules to follow and some valuable, hard-learned tips that I really wish I had known about when I first started writing for clients on the web.
I don’t say that lightly. I’m a programmer at heart, and when I first started writing on the web, I could have coded a web page from scratch without really breaking a sweat. Still, I had plenty to learn when it came to using HTML for article formatting. Today, I’d like to pass along some of the lessons I’ve learned over the last decade over to aspiring new online writers and bloggers. Here are the seven formatting tips we’re going to look at tags for: quote formatting, placing images, list formatting, structuring headers, creating emphasis in sentences, placing non-obtrusive ads, and crediting sources.
Headers – Who Needs Them?
Throughout the years, the etiquette for things like header tags (<h1>, <h2>, etc…) has changed. While the age-old SEO tip to flow headers from large to small throughout the article holds true, there’s a constant debate amongst publishers as to whether it’s better to just use the same header size throughout, whether things like bolded text constitute a valid subheader, and all sorts of other nit-picky details. Forget all of that.
All you have to remember is that studies clearly show that the eye pattern of readers on the web show a clear F shaped pattern that you need to take advantage of when you’re writing.
In an eye tracking study conducted by the Nielsen Norman Group, researchers found that on the Internet, readers first read horizontally across the top of the page a couple of times, and then they scan down the left side of the page. What this study reveals is that readers will use headers as a tool to identify the content that’s important to them. So, if you care about providing what your readers want, then whether you order headers from large to small doesn’t matter as much as filling headers with informative words that actually tell readers what the section is about, and placing them evenly throughout the article to organize it well.
You may think you’re being witty and creative with those headlines, but if you aren’t describing the section, you really aren’t doing anyone any favors.
To Quote or Not To Quote
Hands down greatest tag invented, in my opinion, is the <blockquote> tag. The reason I love it is because of the cool styling it offers blog owners. Whatever WordPress or Blogger theme you use, the odds are pretty good that it treats the <blockquote> tag differently. Each theme designer has his or her idea of what should go into the CSS styling of quotes in articles. The point is that this offers you the ability to break up the content of your article in a way that pleases the eye and draws people to read the quote.
If you’re writing for a client, ask them if it’s okay for you to make use of the tag, and if they allow it, by all means use it.
A tip for using <blockquote> in your articles: don’t overdo it. One or two short quotes in an article that’s about 800 to 1000 words is more than enough. It gives not only the ability to give the eye a break from paragraphs, but it lets you bring in quotes from outside experts, which further bolsters the credibility of your article. You can’t lose.
How to Use Images
Another thing that the Nielsen online reader heatmaps revealed: people tend to linger at images when reading an article online. Furthermore, the eyes are drawn to the next image. This gives you a very powerful psychological way to keep people reading along in your article. Plus, much like a <blockquote>, images break up the content and give the reader’s eye a break.
Obviously, MakeUseOf employs the use of nice, big images – ideal for the sort of tech-help articles that are found on a site like this.
You’ll notice that the images are spaced just far enough apart so that by the time you’ve scrolled a little bit, the eye is aware of another image coming up below. It’s not something that’s done only for the psychological impact of drawing the eye down the article – it just makes for a much more enjoyable read and a better looking article.
With that said, if the blog or website you’re writing for doesn’t have the real-estate on the page for big, full-width pictures like this, then at the very least you should make use of smaller images that are aligned to the left or the right throughout the article. When I do this on my own blog, I actually like to alternate from left to right just to change things up as the article flows down the page.
Aligning images with the text wrapping around like this is usually just a simple matter of setting the align class to “right” or “left” in the <img> tag, but always check with the blog or website owner you’re writing for to find out if there’s any CSS styling that makes use of something like what’s known as the “float” property to do alignments. There may be specific syntax you need to use to align images like this depending on the CSS styling, so take the time to ask the designer. It’s well worth the effort, and will make for a much more attractive article.
Make a List and Check It Twice
As Tina detailed in her article on HTML tags, there are two types of lists you’ll format in HTML, the ordered list tag <ol> and the unordered list tag <ul>. The first puts numbers in front of the list items, the second puts dots. You can see the syntax in Tina’s article, but when exactly is it appropriate to use one or the other – or even use a list at all?
First and foremost, lists are yet another great way to break up the monotany of straight paragraphs, keeping the reader interested, and once again drawing the eye to a quick list of items that can be scanned pretty easily. The rule of thumb that I use is whether or not the items need to be counted in any way. If they do, use a numbered list. Otherwise, use unnumbered.
It sounds simple, but sometimes there’s a grey line. For example, listing reasons why using a wireless network can be unsecure would require a list without numbers, because really it doesn’t matter how many there are – they’re just reasons. On the other hand, when you’re giving steps in a process or some procedure where the order of the list matters, the numbers make sense. Don’t use numbers if you don’t have to, because they can make your list awkward. Bulleted lists can go a really long way toward improving the layout of your article – so having at least one, if it’s appropriate for the topic, is a very good idea.
Bolding and Italics Have Evolved
It used to be that bolding text was the way to go when you wanted to emphasize a phrase or some point in a sentence. This proliferated with the horrendous website designs of the 90′s, where sites trying to sell things would bold and change the font size of various words to somehow subconsciously get you to focus on those money words or something…I don’ t know. But I do know that once blogging became so popular, and headers started to form the structure of that content, bold font no longer made sense to emphasize anything. At best, it’s better used as a way to turn text into the smallest-sized header possible – which lots of blogs out there do.
In the old days, the bold tag was <b>, and lots of people continue using it unaware that the web has moved on to the more modern tag of <strong>, or the CSS syntax of <span style=”font-weight:bold”>text</span>.
Likewise, everyone used to use <i> for everything italics, while today the method to emphasize text in italics is to use the <em> tag. This is really the ideal way to put emphasis on a word or phrase. It works well, and looks clean and professional when done in moderation.
How you place an ad into your article can really make the difference when it comes to not losing your readers because of it. Really, many readers are accustomed to the idea of ads and why they are necessary to pay for content, but what annoys readers and drives them away (or forces them to use those horrible ad-blockers) is ads that pop-up, block text, or are camouflaged to look like part of an article. Don’t do that.
Instead, use ads with clear borders, and utilize the CSS “float” method to make text wrap around it (unless you’re placing it in the sidebar). This is what that looks like:
<div style=”float: right;”>
google_ad_client = “ca-pub-xxxxxxxxxxxxx”;
google_ad_slot = “xxxxxxxx”;
google_ad_width = 300;
google_ad_height = 250;
The float:right; will place it in the text where you need, and you can automate this in WordPress by using templates like I’ve described in past articles. This removes the need to place the ad into every single article. As you can see, the ad is large enough to attract attention, but it isn’t camouflaged or blocking any text, so if readers want they can just ignore it and read on. No problem.
The worst thing you can do with your articles is overdo it with ads and drive off readers (and in many cases you may not even have to worry about ads, like if you’re writing for a client). However, as your own blog owner, these are the kinds of things that you need to consider when you’re writing articles on your site, and these basic ad formatting tips can make a big difference with how your ad is perceived.
The worst thing about the Internet right now is really the content thievery that takes place – and I’m not only talking about the lowlife’s that scrape the net for content and copy it onto their own low-quality spam sites, set up only for Google traffic. No, even the largest and most popular websites – both major blogs and news media outlets – have a very bad habit of stealing news stories and “scoops” from smaller bloggers and websites, adding a few extra quotes, and claiming the idea as their own. It’s horrible and pretty unethical, but it happens. That doesn’t mean you should follow suit. In fact, it makes sense that citing high-quality sources to back up article claims would get your website identified as a high-quality source of reliable information. That’s SEO gold right there.
However, you also don’t want that text to stand out as important content at the footer of your article. A common approach to citing story sources or image sources at the footer of an article is to use the <small> tag, which forces the font down one size. It’s a great way to format copyright info, legal comments, and credits. It provides the information needed, but doesn’t distract from the actual conclusion of the article itself.
Of course, the tips above are the bare basics that any online writer should learn, but if you’re interested in digging deeper there are lots of resources. Check out my article listing some great websites where you can learn HTML code. Tina has also detailed some additional, useful HTML effects you could add to your site. If you want to really go crazy, there are also resources out there to learn CSS as well.
The simple truth of the matter is that writing online takes more than just the creativity required to write something for a print publication. Internet publication means you need to understand not only the basic codes behind websites, but also when and why you should make use of them.