A few months ago I wrote about how to train content contributors, this article is a little different. It’s meant to be a resource you can point anyone publishing content to the web. The goal is to explain why the web acts different than Word, a general outline of creating semantic documents and how to be a good web content citizen. I get asked this all the time while training new content contributors and thought it would be a good time to actually document it.

The structure of a web page matters

It’s not just about making the page look pretty but the actual HTML behind the page has meaning. The initial thought when charged with updating or maintaining a web page is to initially write up the content in Word, get everything finalized, approved and then copy and paste it into the content management system (CMS). This is a great process but a lot may get lost in the translation from Word to HTML.

It’s all about context

The web is comprised of a collection of individual pages, these pages are linked together and the way visitors get from page to page makes up the users experience. The user experience of your site is not interacting with just a single web page but when they visit dozens if not hundreds each time they set out to accomplish a task. Moving from page to page on your site the visitor is presented with not only the primary content for that page but also the supplemental information surrounding the content. This gives the visitor motivation as they click on links and confidence they are going to eventually end up at the right spot. Writing content without this context is like writing in a white box. You don’t know what else the visitor has seen or is seeing while they are reading your page and can miss some great opportunities to motivate them. With that context though you can make some smart decisions about how long, short, prominent or urgent your copy is. Drafting your page in the CMS and previewing as you go is the more appropriate way to author web content.

Quality of HTML structure matter

While drafting your page in a CMS you will notice hitting Enter will probably create some space between the current sentence and the next, this defines where one paragraph ends and starts. Already the HTML behind your writing will start to describe the structure of your page. The paragraph

tag shows there is a separation in ideas from one block of sentences from the next. It is not merely just a way to add spacing in your document.

The next think you would probably do is group these paragraphs under specific topics, just like the larger text in this post. These are called headings. In HTML there are six levels of headings

–

The central idea of your page should be at the top and marked up with an

(the most important heading)

tag then each idea below that should be marked up with the next level heading. Titles within the same idea can have the same level designation so you are not limited to only using it once on your page. This creates a hiarchy of nested topics on a single page. It relates paragraphs to titles and titles to their larger ideas. Think of it like a table of contents in a book, chapters then topics then sub topics then paragraphs.

Underlining isn’t emphasis

Beyond the base structure of your page you may want to call attention to certain sentences or words. Underlining is not an appropriate way to do this on the web. Generally underlines mean the text is a link to another page. Often visitors will try to click on underlined text thinking they are links, especially if they can’t find what they are looking for. If it doesn’t click through they might end up even more frustrated. The preferred way to add emphasis is to make something italic or bold. In HTML it will be denoted as for “emphasis” or to stand out. This describes your desire to make this text stand out. Where a (underline) tag would not, it just describes the style of the text.

Click here

Eye tracking studies have shown when a visitor is scanning a page they are initially looking for heading, bold items and underlined links. Imagine you land on a page with good heading and structure but every link just says “Click here”. You would have to actually read the sentence before to figure out what you will actually get when you click here. The better option is to link the most descriptive words in the sentence to to the document or page behind it. That way when a visitor scans a page the links are called out and they have appropriate context around them without additional reading.

Images

Without images the web would be boring, it would look like never ending encyclopedia pages. Adding images to the content of your page not only breaks it up but is often necessary to display certain information. On the web each image is actually a separate document and your page just references the location of that image and is pulled in separately.  Making sure the image is resized before uploading it is important. I’m not going to go into a deep discussion about image optimization on the web except to say images that are resized before had to fit the needs of the page not only load faster but are also crisper.

Tables

CMS’s get a bad name because they restrict the content creator to just a small portion of the page and basically sandbox the style of that section from all available style sheet definitions for the site. I bring this up because all too often if you want to have publish an image on the right side of the page with a caption it is easy to revert to a table to position and format the image. It works but this is not the point of an HTML table. Tables are meant for tabular data with rows, columns and headers. This is a sticky issue because it takes coordination between the web team and the content contributors to get the appropriate styles in place for the images and captions.

When it doubt, keep it simple

As you add content to a page and it starts to get complicated try breaking the page into multiple. You website visitors don’t care how complicated your page is, they care about finding the information they need. Most importantly of all your pages must be scannable, it doesn’t matter if they have to scroll,visitors scroll. Using the basic elements above is the simplest way to make clear, concise and usable web pages. Your visitors will thank you.

This post was written by Nick DeNardis