It is intended as a guide for content creators and Web developers who wish to  create webpages pleasing to people and search robots.

The book contains dozens of examples of HTML techniques to add style to any website. Plus, an entire chapter is devoted to using HTML on blog posts, eBay selling pages, Google Docs, Wikipedia articles and in email marketing.

This edition, published by Addison-Wesley, is the fourth edition of HTML Manual of Style originally published by Ziff-Davis Press in 1994.

Links to HTML Manual of Style pages on the Web.

• Pearson Higher Education / Addison-Wesley – My publisher

• InformIT – Look for my articles on HTML5

• Amazon.com – get the Kindle Edition: $9.99!

• Safari Books Online – Download selected chapters

• SoftPro Books – Yet another bookseller.

• Facebook page – a work in progress.

• Follow @HTML5pro on Twitter – My alter ego.

Well…, yes, that is right. Easy because services exists that create usable websites using templates and wizards friendly enough for the Internet illiterate.  And free – or at least it’s free in the sense of approaching zero initial software cost. But, in order for your website to grow, you’re going to need that technical knowledge, HTML, to keep your content publishing costs under control.

How amazing it is that we can create and globally distribute content, on zillions of Web pages, to inform and entertain ourselves without moving physical stuff anywhere! The Web page is irrevocably becoming the World’s most common form of communication. It’s the lowest cost replacement for articles, pamphlets, brochures, manuals, directories, flyers, commercials, letters, announcements—almost any kind of document you can think of. The Web does this instantly, adding interactivity, links and searching as a bonus!!

But here’s the problem: By doing so much for so many, the Web has become irreducibly complex. It’s also rapidly evolving. The learning curve never gets any less steep and climbing it is not easy. There just is so much to know about and we all know that even just knowing about what to know ain’t easy.

Content Is Kingdom

For many small website owners, creating and maintaining their own content is paramount. So Web editing tools are the keys to the content kingdom. There are two choices: using a wysiwyg editor on a local PC, downloading and uploading files; or using a Web-based editor to edit content directly on a webserver. The former approch allows you to create Web pages rich in structure and interactivity. The latter is easier by far and can be done anywhere you browse the Web. Unfortunately Web-based wysiwyg editors are rather puny and often frustrating to use when the content has any structure or is already marked up with HTML from another source like Microsoft Word. Knowing HTML helps you avoid many of problems and resolve others before they frustrate, no matter which editing method is used.

When Tim Berners-Lee invented the Web about twenty years ago, he thought that most HTML would be written by software programs. How did that work out? You might ask. Not very well, actually. One of the Web’s great strengths – a dictate that browsers must gracefully tolerate crappy code – is also a weakness. The early browsers; Mosaic, Netscape, AOL and Internet Explorer, went to war competing for market share by introducing new elements into the HTML language. The people writing wysiwyg editors couldn’t keep up with the rapid pace of HTML development, delivering mediocre products that generated bad code, while competition among Web designers to create unique and compelling pages encouraged  advanced HTML techniques beyond the capabilities of the wysiwyg editors.

The Rise Of The Robots

It’s 2009 and although they look much like their counterparts of a dozen years ago, Web pages are coded quite differently in this century. For one thing, good cross-browser support for Cascading Style Sheets (CSS) make it possible to code Web pages with far less HTML markup. Also, a large proportion of Web pages are dynamically generated using HTML templates. These templates are bits of code that may be reused millions of times a day so there’s high value in using the cleanest, leanest HTML markup possible.

By far the biggest change is the rise of search technologies and the role that today’s search platforms: Google, Yahoo, Bing and others, play in our experience of the Web. A modern Website seeks to increase its find-ability and raise its search engine ranking. These requirements has spawned a new business practice called Search Engine Optimization (SEO). Companies providing SEO services specialize in writing HTML that’s very easy for the search engines’ automated scripts (the robots) to understand.

This is Web 2.0, where websites continually exchange information with other websites and where what other websites “know” and “think” about your website can be as important as your site’s content. Knowing the basics of HTML, how it works to add semantic information to page elements and how that information is gathered and used by robots will give you an edge in meeting your online goals.

The BUTCH & harold website is a traditional HTML website. It’s nicely designed but unlike the blogs I’ve been working on recently, there are no templates or includes for global page elements. There are just a lot of HTML files. I didn’t build this site, but the Web designer/programmer who originally constructed it did a good job writing clean, modern code, making It easy to add content and make minor layout changes within the existing architecture. However, s/he did use some tricks with the navigation menu that gave me headaches trying to implement the drop-menu without rewriting the entire thing—and make it work in all browsers.

The remainder of this post is more technical. Skip it unless you’re really interested in how page navigation works. Or just visit the site and check out how I built the Stickr (frame) and Stickr (mini) pages. You’ll see (hopefully) some fun javascript in action.

Navigation menus have evolved since the early days of the Web. At first, websites were only able to feature a list of links; either vertically, as a list, or horizontally in a table. A link changed color when the mouse pointer hovered over it but all links on the page had the same color behavior. Designers wanting more choice than the common available fonts (e.g: Times, Helvetica and Courier) replaced the text with small images using designer fonts. However, unlike linked text, a linked image provides no visual feedback when you hover over it other than the mouse pointer changing from an arrow to a hand.

When Javascript came along in the mid-nineties, it provided a means to capture a limited number of page “events” and take action when they occured. These events have descriptive names, such as: onMouseOver, onMouseOut and onClick, and one of the actions availabe on the occurrence of such an event is changing the source of an image. Thus, instead on a single image used as a button, with Javascript, the button could have both “on” and “off” image that were swapped when you moved the mouse on and off of the link. This provided the interactivity designers wanted, but it came at a price. There was often a noticeable delay the first time a link switched between its off and on images as the browser waited for the alternate image to download from the server. Techniques were developed to “pre-load” the alternate images, which helped somewhat (as did faster Internet connections) but pre-loading images just moves the delay from the individual buttons to the initial page load.

Plus, there was the additional cost of complexity—If you had ten navigation links, that meant having 20 images to manage. Changing image-based navigation links involved expensive software tools, such as: Photoshop, Illustrator, DreamWeaver and ImageReady, and took much more time. This limited the ability of the client to explore and develop their online concepts from the bottom up as they learned the technology of Web publishing. It robbed them of the freedom to play with ideas.

But, Wait! It’s even worse than that. There are two other problems related to the 21st Century Web (aka: Web 2.0.) First, robots can’t read images. That is, the specialized automated tools that Google, Yahoo, and others use to visit, catalog and rank sites can’t interpret the content inside an image. From the robots perspective, a lot of information about the structure and flow of a Web site is invisible when you use graphic images for navigation links. Now let’s face it, Google has become indispensable to the way we use the Internet to market our products and services and you’re at a competitive disadvantage if your site isn’t robot-friendly.

The second problem with graphical navigational elements has to do with complexity again. You’ve heard it said that “Content is king.” What this means is that a static site, where the content hardly changes over time loses out to sites where fresh content is dynamically generated tailored to the customer’s needs. Publishing content on a regular schedule requires good content management systems. It’s also a lot easier if the overall structure of the site and its component HTML elements are as simple as possible.

Thus, there’s been a return to the use of text as navigation items and, indeed, a movement away from specifying layout constructs and style choices in the HTML, and toward using cascading style sheets (CSS) for these purposes. Google is a good example of this. Fortunately, the CSS recognized by today’s browsers is much more powerful and the designer has many more options to add interactivity than s/he did in the last century. For example, you are all familiar with simple, unordered lists, the kind with bullets. With CSS, you can eliminate the bullets and float the list items so that they appear in a horizontal line instead of using a table for the items. Also, nested lists are easier to manage than nested tables. And, instead of capturing a mouseOver event with Javascript, you can preset the hover state of any element and change text and background colors, even background images with the CSS without the pre-load problems.

This brings us back to BUTCH & harold where the original designer tried to have it both ways with the navigation menu—using text lables for the robots to read and pretty images with mouseOver effects for humans. It’s all done in the CSS. The navigation menu is an unordered list displayed horizontally with a unique on and off background images assigned to each list item. The images have a nice font (Bliss) for the labels and the “on” or hover states have the B&H logo above them. To keep the actual text out of sight for humans but still readable by robots, the designer set the text indentation in the CSS to -5000 pixels. The robots don’t care; they don’t bother reading a website’s CSS, but for humans, this moves the text off the left side of the monitor to somewhere in the next room.

Michelle and Ariane didn’t want the clutter or expense of new graphics for the drop-menu items; they’d be satisfied with text in the same color as the labels and a close match to the font. Making the drop-menu items appear in the right place meant setting the text-indent for the nested list to +5000 pixels to counteract the original setting that made the top level invisible. This worked well for Firefox and IE7 but not for Safari and, try as I might, I could not get the positioning right for all three.

I threw out the text-indentation hack and used the visibility property to hide the text labels from humans. This fixed the positioning problem with Safari, but made the entire “Shop” menu and the drop-menu invisible in IE6. IE6 is significantly different in that only recognizes a hover state for links whereas other browsers recognize a hover state for any HTML element. I did my research and found a solution using Javascript to capture a onMouseOver event on the top level list item (the Shop button) to dynamically change the CSS class of the nested drop-menu.

Wow, I make it sound simple but it was anything but. It took a lot of trial and error and I ended up rewriting almost all of the CSS to eliminate conflicts between the list styles used for the menus and the list styles used everywhere else.

In conclusion, I notice that about 1/5 of you are still using IE6 to browse the Web.* Please Stop! Make my life easier and your computing more secure and enjoyable. Upgrade to IE7 or download Firefox, Safari, Opera or one of the two new browsers: Flock or Chrome.