5 Habits for Writing for the Web

These are the steps I follow for painless web publishing. I’ve been writing on the Internet since 1994, and these habits have become second nature to me. I recently introduced a friend to writing on the web, and it was interesting watching him hit problems I never would have because of the habits I’ve formed.

This is a guide for the technical issues of avoiding formatting problems, not the specifics of writing good articles. The goal is to generate human readable HTML code. If a person can read your HTML code and understand it, then every web browsing software will be able to.

A Primer

Content is the stuff you are writing and want to publish on the Internet . Publishing is the act of putting your content online. Content is accessed using an address or URL (uniform resource locator). The URL for my blog is https://engtech.wordpress.com. Dead links are URLs that go to web resources that no longer exist.

The World Wide Web displays content using web pages. Web pages use normal text along with formatting information. The formatting is done using a simple mark-up language called HTML (hyper text markup language).

HTML embeds formatting information (mark-up) into the text using HTML tags.

To bold text use <b>text</b>.

text

Web pages have another mechanism for formatting called CSS (cascading style sheets). CSS gives very fine control over the display of HTML tags. With CSS you can specify that Bold tags have a font size of 11pt, use the Verdana typeface, have a specific weight, and a specific colour. All Bold tags on any page that include that style sheet will look that way. It makes it easier to modify content than hand tweaking every instance of the Bold tag.

A web browser is software that displays text formatted with HTML tags.

Your readers use different platforms than you. They will use different operating systems (Windows 98, Windows XP, Windows Vista , Linux, OS X ), different web browsers (Internet Explorer, Firefox, Opera) and different versions of those web browsers (IE 5, IE 6, IE 7). They’ll even try to read your page on mobile phones, news feed aggregators, and through email. All of these platforms will display content with slight differences. Understanding all of the intricacies is a full time job.

RSS (really simple syndication) is a way to view web content as a syndicated feed. It’s like having a spam-free inbox that web pages are delivered to. Instead of visiting the web site in your web browser, the RSS reader checks pages for you and notifies you only if it is updated.

With that basis of terminology, these are my recommended habits for formating content for the web.

#1: Split writing and formatting into two distinct steps

Write and edit your text first. Add formatting as a final step. It is easier and less error prone to add formatting once you have completed and corrected the content. The second step of adding formatting also catches additional content errors.

This is the process I use Content >> Structure >> Style

• Write plain text with paragraph breaks.
• Edit text for spelling, grammar and clarity.
• Insert links and images.
• Insert additional formatting (bold, headers, horizontal lines).
• HTML preview and additional editing.

#2: Limit yourself to consistently supported HTML tags

Keep It Simple Stupid. Using a small subset of HTML mark-up in your posts increases the chance that it will look the same across all web browsers, guarantees that it will be readable by all feed / RSS readers, as well as email programs. It also guarantees that you’ll be able to globally and consistently change the look of your site at any time using CSS.

• I use Bold, Heading2, Heading4, Block-quote, Paragraph, Page break, Horizontal Line, and Unordered List. That’s it.
• Sometimes I like to get a little crazy and throw in Italics or Tables for special cases.
• In Writely you can find these HTML tags under the Insert and Style drop-down menus.

These are how the tags look on my blog:

strong or bold <b> or <strong>

italics or emphasis <i> or <em>

heading2 <h2>

heading4 <h4>

blockquote <blockquote>

horitzontal line <hr>

---

unordered list <ul>

• one <li>
  • one.five <li><ul><li>
• two <li>

ordered list <ol>

1. one <li>
   1. one.five <li><ol><li>
2. two <li>

#3: Stay away from Microsoft Word

Microsoft Word is poison for HTML. It does horrible things to HTML code. Using Microsoft Word is the *single* worst habit you can have for developing web pages, unless you are careful.

• Auto-completion will convert normal text to characters that won’t display properly in all web browsers (IE: –, ‘)
• Special characters inserted into Word won’t display properly in HTML (IE: ©, ®, °)
  • Both of these options can be turned off under
    Tools >> AutoCorrect Options >> delete symbols from the lower box
• Cut-and-pasting from Word into your blog editing program will add additional formatting that you never intended.
  • Click on the HTML raw source and look at how ugly it is.
  • Every one of those unnecessary HTML tags is a potential reason why your web content won’t look like you intended it to.
• As a final resort it is possible to remove formating from Word documents by cut-and-pasting into Notepad (not Wordpad !!) and then cut-and-pasting the text from Notepad into your blog editing software.

Word, Ctrl-A, Ctrl-C, Notepad, Ctrl-V, Ctrl-A, Ctrl-C, blog software, Ctrl-V.

Which code do you think works cross-platform, displays correctly in any HTML reading application, is more maintainable and less prone to errors?

<p class=”MsoNormal” style=”MARGIN: 0in 0in 0pt”> <b style=”mso-bidi-FONT-WEIGHT: normal”><span style=”FONT-SIZE: 16pt; FONT-STYLE: normal; FONT-FAMILY: ‘Times New Roman'”>Title Goes Here<?xml:namespace prefix = o ns =”urn:schemas-microsoft-com:office:office” /><o:p></o:p></span></b></p>

OR

<h2>Title Goes Here</h2>

UPDATE: I’ve since changed my stance on Microsoft Word and now I do all of my blogging in Word first. WordPress.com *CAN* convert Microsoft Word documents to proper HTML. Use ALT-V in the Editor and then select the “Paste from Word” option.

My process is now:

• use Word to write a very barebones document (page breaks, bolding, italtics and links only)
• use the Paste from Word option to copy the document into WordPress
• apply additional formating like headers, lists, blockquotes and add images.

#4: Don’t change the font typeface, the font size, or the font colour

Web documents use Cascading Style Sheets (CSS) to add consistent formatting to an entire site. You run the risk of creating conflicts by modifying font typefaces and font styles directly in your post. How fonts are handled depends on the operating system and web browser of the reader — things that are out of your control. Add emphasis to your text using standard HTML mark-up like Bold, Italics, Underline, Strike-through or one of the six Header sizes.

• Changing the font to distinctly denote blocks of text is OK if used sparingly, but you’re better off using the Block-quote tag.
• Imagine changing all the text on your website to use <font color=”white”>. The entire site becomes unaccessable to people who are trying to read it with a white background.
• There are many, many ways that someone could get the HTML tag font colour but not the web page background colour.

#5: Host images yourself

It’s very easy to copy the address of an image hosted elsewhere on the Internet (called hot linking). But this does not mean that the image will still be at that location in the future. Web sites go down, and links to external images will become broken. Either directly upload the image to your blog, or use an intermediate site for image hosting like Photobucket or Flickr.

>> Image hotlinking from the perspective of someone whose images are being stolen.

>> If you hot link images they may get changed behind your back.

Bonus #6: Be Careful with MORE (WordPress only)

WordPress lets you insert a MORE tag to break the post so that the part AFTER the MORE tag shows up only when you look at the post as a single web page (not part of the main page or in categories/search results).

This is a great feature but it has two problems:

• If you put the MORE between HTML tags then the tag will never complete. This means you could apply bold, italics, font sizes, typefaces and colours to EVERYTHING that displays after that post. Avoid this by always using the MORE tag on a blank line with all the tags before it closed.
  • It is a nightmare if you combine the ugly Microsoft Word formatting with a misplaced MORE tag.
• The MORE tag may not display in RSS feeds — the post may just be cut-off.
  • This seems to be theme dependent (or they’ve fixed the bug, I’m not sure)
  • Customizing the MORE tag will make it definitely show up in RSS feeds.

Bonus #7: Don’t change post dates (WordPress only)

It can be tempting to change the timestamp on an old post to bring it the front of your blog, but you are shooting yourself in the foot. The date makes the first part of the URL for your post. If you change it you break all links to that post. Sure, you can go through the effort of trying to find every place you linked to it, but you can’t change people who have already linked to it.

Leave those dates alone. Instead write a summary post to highlight old content that is still good.

---

Related Posts

• Other posts tagged Articles, Blogging
• 20 Tips for Bloggers
• Building an Audience or “How I Learned to Stop Posting Inane Crap and Love the Blog”
• Blogging as Unofficial Corporate Representation
• Understanding Tagging Folksonomy – How it Relates to Improving PageRank
• >> The best site for information on creating web pages that are viewable by everyone
• >> 5 Tips to a Successful Blog Post

---

Bookmark this Digg | Del.icio.us | BlinkList | Furl
Spurl | Reddit | Simpy | RawSugar