Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

eyetracking   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

blockquotes   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

big images   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

small images   Not Just For Developers: 7 HTML Tags Any Writer Should Know

 

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.

lists   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

Non-Obtrusive Ads

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:

<span id=”more-xxxxx”>
<div style=”float: right;”>
<script type=”text/javascript”><!–
google_ad_client = “ca-pub-xxxxxxxxxxxxx”;
google_ad_slot = “xxxxxxxx”;
google_ad_width = 300;
google_ad_height = 250;
//–>
</script><br />
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script></div>

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.

side ad   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

Crediting Sources

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.

footer info   Not Just For Developers: 7 HTML Tags Any Writer Should Know

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.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

10 Comments -

0 votes

Henk van Setten

Is there any good practical reason why I should start using and tags instead of the good old (and shorter) and tags?
As far as I can see, there is no advantage in this at all. The resulting layout effect is exactly the same, and browsers will probably keep supporting those classic HTML tags for the next 50 years or so.
So why on earth should we switch to tags that (in terms of what one needs to type in) are in fact more typo-prone and less efficient?
Could you please explain this to us, Ryan?

0 votes

Henk van Setten

— here is my previous comment again, but now without the unintended bold/italics caused by my quoting the tags — sorry for the mess-up, but my question still stands:

Is there any good practical reason why I should start using “strong” and “em” tags instead of the good old (and shorter) “b” and “i” tags?
As far as I can see, there is no advantage in this at all. The resulting layout effect is exactly the same, and browsers will probably keep supporting those classic HTML tags for the next 50 years or so.
So why on earth should we switch to tags that (in terms of what one needs to type in) are in fact more typo-prone and less efficient?
Could you please explain this to us, Ryan?

0 votes

Angela A

I would argue that i and b have specific formatting you want to achieve, i.e. the italics and bolding. Whereas em and strong are not linked to any particular formatting, so the designer could conceivably change all em tags to be emphasised in another way, such as grey text, while strong could be shown as a slightly bigger font. Or something – those are horrible ideas. :) Anyway, it gives the designer leeway to emphasis and strengthen those bits of text in more creative ways. Used site-wide, that can be very effective.

1 votes

Paolo Gonzalez

Hi, Henk! I’m not Ryan, but I’d like to contribute my own opinion.

I think that it’s good that semantic tags allow us to separate the content from the styling. What if I decided that, instead of italics, I’d like to use normal font-style and bold font-weight to show emphasis? And what if, to show strong emphasis, I’d like the text to be two times bigger but with normal font-weight? If I used em and strong tags, I would have no problems applying those styles to them. I would, however, feel weird about doing that if I had used b and i tags. Maybe that’s just me.

In terms of practical applications, I think this article from the W3C is quite an informative read. The section titled Japanese example explains specific issues with simply using bold and italic tags.

0 votes

Julian A

There’s another good reason to use and instead of and and that’s accessibility standards. Some people who use the web are blind or visually impaired and rely on voice reading software and similar tools. Bold and italics often don’t render well – but these tools will be able to process the newer and tags, which will help make your formatting more accessible to everyone.

0 votes

Julian A

There’s another good reason to use strong and em instead of b and i and that’s accessibility standards. Some people who use the web are blind or visually impaired and rely on voice reading software and similar tools. Bold and italics often don’t render well – but these tools will be able to process the newer strong and em tags, which will help make your formatting more accessible to everyone. (PS Sorry, I enclosed the tags in angled brackets before and it messed up the formatting of my reply… hopefully this time it’ll be clear!)

0 votes

Ken E

Henk van Setten,
“strong” and “em” were used to better emphasize how people were using them on their with websites. Since every property with a can be styled using CSS, I’m sure it was preferred to use a couple of tags that best expressed the styling that designers/developers wanted.

It regards to outdated tags, it should be the web designers/developers, browser developers, and W3C’s goal to push the web forward. Just like how Windows 3.1 programs aren’t optimized for Window 7 (or 8), so are websites developed in outdated code. Usually, web crawlers (search engines) will do their job and filter websites optimized with the best coding practices.

0 votes

Tyler C.

Can anybody tell me what kind of paper that is in the header photo?

0 votes

Felipe

Tyler it is a graph paper, you can find it at any store who sells scholar materials (I don’t know the name of this type of stores, because i don’t speak english very well).

=)

0 votes

Tyler C.

Thank You Felipe!