When you’re writing for the Web, usually your material will end up as HTML. With modern online editors, you may never have to write it directly, but you still need to understand it. The formatting of your writing has a close relationship to the final HTML, however it’s dressed up.
Properly using HTML tags helps a page’s accessibility. Browsers may present the content as spoken text, with enhancements for readability, or otherwise modified. Mobile browsers will present it differently from full-sized ones. Good markup will let all representations of the page work better.
HTML markup should focus on the semantics of a document. The site will use CSS to make it look however the webmaster wants. Tags shouldn’t determine how an element looks, but what role it plays. There are several common mistakes, and they cause problems in the final page.
Headings
The headings of an article should form a hierarchical outline. If your article will be part of a page, you usually won’t start it with h1. The h2 tag is most common, but you should follow your client’s guidelines if they say otherwise. Use lower-level headings (h3, h4, etc.) to follow the logical hierarchy of the piece. Don’t skip levels to get the look that you like; it will look different on the final page. I’m writing this in WordPress, and using h3 as the highest header level appears to be right.
Text styling
Styling should be done in CSS. Don’t use styling tags like big, small, strike, b, and i, but use styles instead. Either a style attribute or a class referring to a CSS style is fine.
The difference between b and i on the one hand and strong and em on the other is a little hard to understand. They both have the same effect in an ordinary browser. There’s a nice explanation on Stack Overflow.
<b> is a style – we know what “bold” is supposed to look like.
<strong> however is an indication of how something should be understood.
I use cite rather than em or i when indicating a title should be italicized. I don’t know if text-to-voice software treats it differently, but it would make sense if it did. You don’t normally add dramatic emphasis to titles when saying them.
The sup and sub tags are OK, since they convey semantic content. 109 definitely isn’t the same as 109. You can do it in CSS, but that would just discard useful information.
The paragraph tag
Many writers think the paragraph or p tag indicates a paragraph break. It actually indicates that the following text is a paragraph. The paragraph runs until the tag is closed. Like many tags, it can be closed implicitly, so you can have a series of p tags without a /p.
The difference is important because a paragraph can have a style, which affects everything through the close of the paragraph. You can have line breaks, inside a paragraph or anywhere else, with the br tag. It’s a self-closing tag, so there’s generally no point in styling it.
Anchor tags
The anchor or a tag does a few different things, the most common being to supply a link. If you add the attribute target="_blank", it instructs the browser to open the link in a new window or tab. There’s an ongoing debate on whether this is a good idea. There’s a security issue, so using it with untrusted pages isn’t a great idea. But why would you link to an untrusted page at all? If you’re writing for a blog and linking to references, using target="_blank"makes complete sense. Readers who click on the link won’t close the original page, so they can continue reading.
Links to other pages on the same site are more of a question. Usually you don’t need a target attribute there, since you don’t want to fill up the browser with multiple windows for the same site.
Some people say you should never use the target attribute because the default way is the right way. By that reasoning, we shouldn’t use markup at all. It’s true that users can force a new window by holding down the command key on a Mac or the control key on other operating systems. However, people don’t always think to do it.
The balance of concerns is different on keyboardless mobile devices. There’s no control key, so users don’t have that option. At the same time, having lots of open tabs is more annoying and less useful on a phone than on a desktop machine. I’m still thinking about how to take those issues into account.
Desktop and online editing software usually has an option to set the target when adding a link. They may call it “frame” and the value “new window,” or other variations.
Funny characters
In this post I’ve cited HTML tags and put angle brackets around them. If you’ve ever tried to do that in HTML, you know it’s tricky. It’s even trickier to write about how to do it, since that’s two levels of meta.
What you have to do is enter < for < and > for >. So to write <cite> you have to write <cite>.
No, I’m not going to tell you how I wrote that. There are limits on meta-ness. Look at the source HTML of this page if you’re curious.
Closing thoughts
Every writer who puts material on the Web should have at least a basic understanding of HTML. I’d like to wrap this article up with a link to an “HTML for Writers” site, but I can’t find one that hits the right level. There are sites on introductory HTML and on highly technical issues, but I haven’t spotted anything that’s addressed to writers who know the basics but could use tips on the best use of HTML in writing. If you know of a good site, please leave a comment.