The structure of your HTML is just as important as the visual structure. Properly implementing HTML structure will also make it easier to manage visual structure. Implementing HTML structure is easy to do whether you are hand coding or using WYSIWYG.
This is old, real old, a couple years old. I wrote it when I was instructing for my students.
Many people use WYSIWYG software to design web sites. Although there is nothing wrong with this, it does tend to cause messy HTML. This is not usually caused by the software, but mostly by the improper use of it. When a designer sits down and visually designs a web site, it is the visual markup, or style that provides structure to the document. However, HTML provides tools outside of visual design to add structure to a document, and they are often overlooked. Using these tools for structure provides more usable documents, and makes the management of visual style much easier.
The first step is to separate style from structure and the easiest way to do this is to add structure, then style. Take the page and use heading, paragraph, and list tags to structure it. Here is an example of a page using the most common structural elements (html_structure.html). Looking at the page in a browser you can see that the browser defines the style for each of these elements specified in the source. These elements could also be visually structured exactly the same, but you will notice that the HTML source is much harder to understand (visual_structure.html). The file is also twice the size as its properly structured counterpart.
Once a page is properly structured, it is much easier to select and apply style. Most sites will use a sans-serif font that is much smaller than the default browser size, so let’s start there. It’s important to remember that styles declared for a tag will be passed on to children of that tag. The following page uses this to simplify each style being declared (visual_structure_css.html). You’ll notice that by declaring the font-family for the BODY tag, all of the other tags contained within it will pick up these attributes. This file is still much smaller than the file without structure. You can also apply style to several tags at once by separating your selections with a comma.
P, LI, H3 {
property:value;
}
Most pages have more than just basic content in them; they may have two or more columns of content with navigation etc. These will complicate your CSS but not too much when done properly. The easiest way to do this is by assigning class names to the outermost element possible and contextual selectors in your CSS. For example, if a TD contains navigation links, rather than use classes for each link, assign the TD a class name, or ID, and use that to select it. Notice that when using contextual selecting the tags are separated by a space, and are not separated with commas.
TD.navigation A {
property:value;
}
Here is an example of a page using this type of selection (table_layout.html). Notice that the CSS is in a separate document. This can be re-used on all of your pages.
To further simplify the page, DIVs can be used for the layout instead of tables. This has less backwards compatibility, but is the preferred method (div_layout.html). The contextual selecting in this page works with the DIV ID attribute rather than a class name. Since ID’s must be unique for each element it is not necessary to specify the tag in the CSS selector, only the ID.
#navigation A {
property:value;
}
This resulting page has a good structure visually as well as in the source. Also notice that the order of the DIVs can be changed. In this instance, the content has been placed first, because it is the most important part of the page. This is important for search engine spiders and screen readers for people with visual disabilities. The page also includes a style sheet for print, which will hide the navigation elements and change the font from sans-serif to serif. It reformats the page without having to completely redesign it for print.
More information on CSS can be found at the following sites:
Effective use of style sheets (useit.com)
The structure of your HTML is just as important as the visual structure. Properly implementing HTML structure will also make it easier to manage visual structure. Implementing HTML structure is easy to do whether you are hand coding or using WYSIWYG.