Good Principles of HTML Design

Tips

1. View HTML source code.
2. Have a plan in mind (and probably also on paper).
3. Use images correctly.
4. Use lists correctly.
5. Create whitespace for style and alignment.

The first tip

is to make use of the View Source command on your web browser, if you have a graphical browser like Netscape or Internet Explorer. It should be on your topmost command menu, under View, as something like Document Source or Page Source. (I'm sorry, I don't know that much about text browsers like Lynx.) To learn HTML, you probably want to see what it looks like, and using View Source will allow you to promptly see the actual HTML code behind any webpage on the internet. If for the moment this View Source command is grayed out (unavailable), it probably means that the webpage you are currently looking at has not fully loaded yet. Try the View Source command again when the red Stop button turns blank again. Use the View Source command often, and print out interesting examples to use as reference if you wish. You don't want to just copy code straight from every page you see, because you may not understand everything that's going on in the code, but looking at other's source code can give an idea of general techniques to try adapting for your own website.

The second tip is to plan ahead.

Or I could get fancy and call it developing your information architecture. Don't make a homepage just to look cool, or because everyone else you know is on the internet. Have some clear idea in mind of what you want this webpage for, what it will say, and what you want it to look, read, and/or sound like. This is where a pencil and paper come in handy. Just write down your thoughts and general ideas about what you envision for your webpage. Will it be a page all about you/your family? Will it contain simply your résumé, or all your interests from stamp collecting to bad puns and limericks? Will it even be about you at all, or will you make it a shrine to your favorite television show or celebrity or literary character? Will it be dedicated to publicizing some little known but worthy cause, writer, or interest group? Speculate on these various issues, and decide. If you've been using that View Source command a lot, you may have a general idea of the basic elements of a webpage by now, and you might even be jotting down necessary HTML tags along with your ideas of the webpage content. Get everything as organized in your mind as possible because even if you make radical changes later, you'll be less confused about the full scope and requirements of your alterations if you've had a general scheme laid out from the start.

When you have your content generally laid out, you ought to have a better idea of how much space you'll need for your homepage when you publish. [Different webspace providers allow you different amounts of disk space to contain your webpage(s), and they can offer this space for free or for a price.] If you plan on putting up a lot of images, they may quickly eat up your disk space. If possible, find an webspace provider that allows you a few Megabytes. Most people who aren't big on graphics (or hugely rambling text) can do fine with a few Megabytes. I'm still amazed by people who manage to have so many images and gizmos that they can actually use up 15 or so Megabytes! (Typical, individual webpages within your site should be no more than 50 Kilobytes each, and one Megabyte equals approximately 1000 Kilobytes. Think of all the pages you could have in this one website!) I do link to a directory of free webspace providers, if you're interested.

Also take into account the size of any backgrounds or textures which you may use to decorate your pages, like wallpaper on your computer desktop. It's best to keep these background images around 10K each, although occasionally a special background may be worth up to 20K. (Make sure that you have proper coordinating colors for the text, links, and even the screen background, just in case the image does not load successfully.) As for mere text, it will take up about the same amount of disk space as it would when saved as plain text in a wordprocessing program.

Now that you've got an estimate on size, and have found a suitable webspace provider (or you could wait until later to find one), you can seriously start writing the page. You need to write your code! Rely on all the HTML you've learned, and maybe a few example pages too, or a comprehensive HTML guide. You may make mistakes, but nobody's perfect, and you ought to be able to test your page several times to see if it functions correctly and looks relatively the same on most browsers, or at least is readable/viewable. Make sure to look for any wrong filenames that result in broken links and images. When you save your webpage as a file on your computer, name it "index.html" or "index.htm". Why? Chances are that you may make more than one page within your whole "website"--the set of individual webpages belonging to you. To distinguish your main page, or root page, or front page--whatever you want to call it--from secondary pages, name it "index.html". When web browsers are given an incomplete URL (http://wherever.it.is/etc/directory/ instead of http://wherever.it.is/etc/directory/etc.html), they will automatically assume that it is the index page within the directory that you want; "index.html" is the default page. (That's why companies often shorten their web addresses by giving you an incomplete URL to remember--http://www.ibm.com/ rather than http://www.ibm.com/index.html--although some company's websites might have a default.html instead, which is set in the server options.) So, when you eventually upload your webpage(s) to an internet server and obtain a URL, it would be simpler if one of your pages (usually your first or most important one) were named "index.html". Boy, how I wish someone had explained this to me from the beginning, when I first learned HTML.

tips on images

(There's also a section down below on image file formats.) Try not to overload a single page with too many images. Images can take a lot of time to load, and too many large ones on your page will make visitors to your site wait forever to see anything appear. They will most likely be annoyed and leave. Also, if you have, say, a photo album page where you show small images and let people click on each one to get to a bigger image, make sure you use thumbnails. Thumbnails are smaller versions of the full-size images, to take up less room on the page, and less memory. You may have heard that you can change the onscreen size of an image by messing with the HEIGHT and WIDTH attributes (see next paragraphs). However, that only reduces the appearance of the image on the browser, and does nothing to shrink the file size. Unless you use real thumbnails (separately saved, smaller files), you still make the viewer wait the whole time for the big images to load. So, do what I did with my artwork, not what I did with my still uncorrected campus and city photos.

For the sake of people browsing on Lynx, and other non-graphical web browsers, make sure that you use ALT in your image tags. What I mean is, the HTML code for inserting an image into the page comes with several options or attributes: <IMG SRC="" ALT="" HEIGHT="" WIDTH="" ALIGN="" BORDER="">

All of these options or attributes are quite useful. The source attribute, SRC, is of course for you to specify (between the quotes) the name and location of the image file. The ALT attribute is for alternative text that will REPLACE the image if for some reason the image can't be found, or the browser cannot display images. Try to be fairly descriptive in the ALT attribute, so that people can understand what's meant to be there, even without images. One of the most annoying things in the world is coming to someone's website where they have graphical menus to navigate the site, but some or all of the images don't load, so you don't have any idea what the choices are. Also, HTML 4.0 specifications allow for even longer textual descriptions of images to make things easier. Check out Day 2 of a Webmonkey article by mattmarg to learn more about how images and tables are being improved by this.

The HEIGHT and WIDTH attributes take digits to specify the onscreen size of the image (in pixels). You should explicitly define these numbers on an image, because if they aren't given, a browser will stop loading text just to load the large image file instead. Giving these numbers lets the browser know how much space to set aside in the layout for the image, so that the browser can continue loading text instead of stopping for every image. If a page is slow in loading, you can at least put some text there for people to read, instead of just watching an annoying blank screen.

CORRECTION: The ALIGN attribute is NOT for the simple horizontal positioning of the image on the left, right, or center of the page. ALIGN is actually used to position the image both vertically and horizontally with respect to the flow of the surrounding text. (This assumes that the image is touching, or "in-line" with, text.) Your options for ALIGN are left and right for horizontal placement, and bottom, middle, or top for vertical placement. Notice that there is no "center" option. Here's an example of correct usage:

 <p><IMG SRC="whatever.gif" ALIGN="left" ALT="" HEIGHT="50" WIDTH="50">Gobs
 of text, text, text, etc. More gobs. More. Text that never ends. Text. Text.
 Text. Text. Text.</p>

This results in the image sitting on the left, and taking up a 50 by 50 pixel square of space, while related text runs down the right-hand side of it.

If, however, you wish to display the image all by itself, with no text touching it, your best option is to surround the image with a paragraph tag, and then use that p tag to align your image. This is the only way to horizontally center the image.

 <p align="center"><IMG SRC="whatever.gif" ALT="" HEIGHT="50" WIDTH="50"></p>

You can also do this alignment with style sheets, by creating a class of p tags that only handles images, or only handles the centering of any object. Then anytime you want an image centered, you can enclose the image with a p class="centered" tag. Or whatever you named that class in your stylesheet.

The BORDER attribute comes in handy if you are making the image link to another page or image. Setting the BORDER to zero will make the image show up without a colored rectangular border around it.

tip: do not abuse lists

I have noticed recently that some handwritten webpages are incorrectly using ul and ol lists, so I want to make sure people are aware of this error and know how to correct it.

There are basically three HTML lists that you'll likely see or use: the ordered list (OL), the unordered list (UL), and the definition list (DL). There are also HTML lists called DIR and MENU, but these have never been popular enough among users to justify their existence. The W3C organization has even deprecated DIR and MENU in the HTML 4.0 specification. So, the OL is basically a numbered list, the UL is a bulleted list, and the DL is useful if you need to define a few unfamiliar terms in your webpage, and need to separate each term from its definition.

Here is the proper use of a UL. You can leave off the comments in your own code.

 <ul>
   <li>red <!--a list item-->
   <li>blue <!--another list item-->
 </ul>

This HTML code results in:

• red
• blue

The OL list is done in a very similar way, and also provides an optional attribute so that you may specify the starting number of the list.

 <ol start="5"> <!-- the default start number is 1 -->
   <li>red <!--a list item-->
   <li>blue <!--another list item-->
 </ol>

This code renders as:

5. red
6. blue

I have seen some webpages abuse these lists by completely omitting the <li> list item tag. This creates incorrect formatting by the browser, and may even result in extraneous bold formatting, because the bullet is expected to be bold, but instead there is text sitting in the bullet's place. You may certainly include <p> and other tags between the <li> and (optional) </li> tags, if you wish. But at the very least, you must use <ul> or <ol> tags with the list item tag, if you expect an actual list, with bullets or numbers, to be generated.

Now I'll demonstrate the use of a definition list, which is slightly more complex:

 <p>Now some definitions for people unfamiliar with literary
 criticism:</p>

 <dl>
   <dt>allegory <!--a term to be defined--> </dt>
   <dd>a story or artwork in which the characters or events are
     symbols expressing truths about human life <!--the definition of
     the first term--> </dd>
   <dt>personification <!--another term to be defined--> </dt>
   <dd>the act of thinking of or representing an inanimate object
     or abstract idea as a person with human characteristics. <!--the
     definition of the second term--> </dd>
 </dl>

This DL example code is rendered thus:

Now some definitions for people unfamiliar with literary criticism:

allegory

a story or artwork in which the characters or events are symbols expressing truths about human life

personification

the act of thinking of or representing an inanimate object or abstract idea as a person with human characteristics.

tips on intelligent whitespace

"Whitespace" is a term for the blank part of the screen (or page, or other medium) where no writing or images appear. Whitespace includes any space characters, indents, blank lines, and other areas of visual emptiness. (It's still called whitespace even if you have a general background color or texture all over your webpage.) Whitespace can be used to break up information on your webpage, so that not too much information clutters up the area and makes things look boring. If used well, whitespace can make your webpage look as appealing and professional as a good advertising layout in a magazine.

To assist you, let me go over the varied ways to create whitespace on an HTML document: HTML tags and special characters, "invisible" images and tables, and stylesheets. I'll cover pros and cons with each method and show you examples that I use on my own website.

basic HTML tags and special characters: You probably already know that an HTML document mostly ignores whitespace that you put in the code, except in special cases. That is, if you type in and save this code into your HTML document--

this is a line.
I want another line, and I want this     big space too.

--The browser will still display your text all run together:

this is a line. I want another line, and I want this big space too.

The browser mostly looks for <p> tags, line break <br> tags, heading tags such as <h1>, and padding attributes in <img> and <table> tags to tell it when to insert blank space. (In an image tag, the "padding attributes" are actually called HSPACE and VSPACE; in tables, there are the attributes CELLPADDING and CELLSPACING. Refer to an HTML guide for details.) If you have whitespace that is absolutely necessary for alignment or style (such as with ASCII art or lines of programming code), the most basic solution is to enclose the text in preformatted tags (<pre>) and then just type in every single space or line break that you want.

<pre>
this is a line.
I want another line, and I want this     big space too.
</pre>

renders as:

this is a line.
I want another line, and I want this     big space too.

Or you can also do this with the break <br> tag, plus a special character called a non-breaking space, which you type in as &nbsp;

this is a line<br>
I want another line, and I want this &nbsp; &nbsp; big space too.

You get the same visual result, so I won't repeat it. I personally like to mingle normal spaces with non-breaking spaces just so I can easily see each separate character that shall display on the screen.

Thus a non-breaking space character can be used in a series to create a tab on the screen. However, it is best not to overuse this, especially when there are more efficient ways to create real tabs and padding using stylesheets. To create every single piece of indenting or padding on a site this way would be crazy and tedious.

tables and images for layout [not recommended] Webdesigners figured out a while back that using <pre> tags, or <br> tags, or non-breaking spaces was tedious, ugly, limited, and a nightmare to re-align if they wanted to make even one change in the width or height of the space. Webdesigners wanted more control over creating huge blocks of whitespace where necessary and wanted them fairly easy to maintain. When browsers became capable of displaying tables and images, the webdesigners took advantage of these tools so they could make webpages look more like the graphic designs that the designers were used to, from the print and TV media. One trick was to make the whole body of a webpage into a table. Then they could make various columns, rows, or individual cells contain nothing (or something invisible), while other cells contained words and images. If widths and heights needed modification, you just changed some attributes in the table, and had it apply throughout.

Also, webdesigners went into their graphics programs and created clear, invisible images which were often as tiny as a 1x1 pixel dot. Then, all the designers had to do was insert an image tag using that dot as the SRC file, and finally set the HEIGHT and WIDTH attributes to stretch the image as big or small as they wanted on the screen.

These are certainly nice HTML tricks, but unfortunately they are only tricks, not full solutions. In reality, tables and clear image spacers are not nearly so easy to work with as I just made it sound. I worked dutifully on such a table-and-spacer scheme at my college's website. We continually wanted to put up calendars, brochures, and catalogs on the website, and we wanted these documents to stay close in appearance to the hardcopy, print versions. We certainly did have an "Export to HTML" feature in our desktop publishing program, but often this feature would mangle the design into a nonsensical and wrong-sized table. Every time, I had to go into the code myself and clean up the layout to the best possible approximation of the intended design. I had to test and make sure that the table and its columns had the correct sizes in different browsers, and on Mac and Windows machines. I had to create and document standard procedures so that we could get such tasks accomplished in a timely manner and not repeat dumb errors. Far from perfect, this complex method is like fighting the HTML code for a piecemeal solution to the layout problem. You'll hear similar complaints from other webdesigners who work this way; so many implementation headaches make you feel like you're less of a designer anymore and more of a code-hacker.

In any case, using tables and images this way is actually a misuse of these HTML features. Tables were created to let people display data or statistics in columns and rows. Tables are not intended to layout brochures and webpages; besides, text-only browsers do not display a table the way a visual browser does, leaving you with out-of-order gobbedly-gook whose meaning is hard to decipher. Images, similarly, ought to be used to actually show viewers something eye-catching or display alternative text. One can of course argue that showing whitespace is showing something significant, which is true. However, there are ways of putting in whitespace that do not require you to riddle your pages with image tags and bury your real text content within the complexity of a table.

Certainly, some webdesigners continue to use the table-and-spacer method of layout today. It's hard to do an overhaul of an old site that you've been doing with one certain method for years, and just change to a new method. Plus, you must get approval from corporate people or committees if you want to invest that much time and energy into creating new procedures of doing things and re-doing all the old versions of your documents, even though they still "sort of" display right. New designers who are starting fresh, though, would be better off moving to what I think is a much better method of adding whitespace and applying other styles to webpages.

stylesheets are the new design tools for now and the future. Initially, stylesheets caused webdesigners headaches that were similar to those of the table-and-spacer method, but that was because of browser implementation. You see, a stylesheet as a pure idea in itself is supposed to work on all kinds of computers, in various browsers. However, the competing browser vendors, Netscape and Microsoft, created browsers that did not follow all the stylesheet rules consistently, and they even added in all sorts of extra rules. So webdesigners were still stuck having to deal with with browser incompatibilities. Thankfully, Netscape's version 5.0 browser shall be much more consistent in its implementation of the standards; we can only hope that Microsoft will follow suit, and that the browsers will actually allow designers to get some truly creative work done.

Of course, you can use stylesheets even without assuming that your audience all have 5.0 browsers. Browsers since IE 3.0 and Navigator 4.0 have had at least partial support of stylesheets. As long as you stick to the basic stylesheet properties that work on most browsers, your page designs should work very well for most people. (If, however, you use too many stylesheet tricks, you will be doomed to fail on a browser that doesn't understand them. See the Web Design Group's example of too much Stylesheet Dependence.) To help you out, Webreview.com maintains grids (safe, danger, master grids) of information on how the browsers implement CSS properties. (CSS properties are design elements such as font, margin, color, etc. which can be affected by the stylesheet instructions that you give.)

How do stylesheets work? You write a bunch of stylesheet instructions about how the spacing, fonts, and more will look on your website, then save the file. Next you attach this stylesheet file to all your web documents using a <LINK> tag. Afterward, you simply update the stylesheet file whenever your site needs a style change; you don't have to change the code on every single HTML document each time a major style changes! I'll refer you to the thorough Webmonkey stylesheets tutorial so that you can learn all the details of how to use stylesheets.

Since I am specifically talking about whitespace in this tip, I'll show you some style examples that add indents and padding to a webpage. Stylesheets can be written either in CSS language or in JavaScript. I usually work with CSS, though, so that's what my examples will be written in. To make every paragraph start with an indent, write this in your stylesheet:

p {text-indent: 6%}

This means that every block of text which begins with a <p> tag will have its first line indented by 6%. You could also have specified the indent in terms of pixels or inches or ems--any length measurement supported by the CSS specification.

If you want a hanging indent, you need to both specify the indent and change the margin, so that the text remains on the screen.

p.hanging {text-indent: -6%; margin-left: 6%}

Then in your webpage you write a <p> tag whose class (or category) is named "hanging". That is, the HTML code will say <p class="hanging">words</p>. This makes the browser display:

words that hang, hang, hang... using stylesheets. stylesheets, stylesheets, stylesheets, stylesheets, stylesheets, stylesheets!

If that example didn't work on your IE3 browser, look at this one.

words that hang, using stylesheets. stylesheets, stylesheets, stylesheets, stylesheets, stylesheets, stylesheets, stylesheets, stylesheets!

You might also want padding around certain paragraphs. So define this rule in your stylesheet:

p.fatpad {margin: 4%} /* this is a margin on all sides*/

And then write a <p> tag whose class is "fatpad".

WHOA! Look at all the space this takes up.

If that example didn't work on your IE3 browser, look at this one.

WHOA! Look at all the space this takes up.

You can always correct that margin-bottom by adding some <br> tags outside the closing </p> tag.

It is also possible to use the CSS property "padding" instead of "margin", but "padding", like "line-height" and other properties, might be riskier since it is not supported by all browsers.

In any case, do not worry that I had to make redundant examples here for IE3 browsers. I personally use that hanging indent extensively on my fiction site, and the indent always works on my IE3 browser. The reason it did not work here in my first example may have to do with my having nested the <p> inside a <div> block, which Netscape can deal with, but IE3 cannot, apparently. Just test your webpages thoroughly on different versions of Netscape, IE, and even other browsers whenever possible, to make sure the stylesheet works.