Introduction to separating Structure from Styling

This page will discuss and explain the reasons for separating HTML structure from CSS styling.

As you may already know, HTML Elements have sub-sections called Attributes^[1] which were previously used to apply various settings for that individual element. In older versions of HTML this was common, especially in Table elements^[2], with attributes like border, width and align. The new specifications in HTML 5 say you must not use these attributes^[3], and instead use CSS to correctly format and add style to a page^[4].

For us to do this, we need to understand the benefits of using CSS over hard coding the HTML attributes, and also how we can correctly use our style across multiple, or nested elements.

Old vs. New

In previous versions of HTML, the ideal way of making Elements look how you wanted was to use Attributes to give your objects some standing out^[5]. This was particularly true with <table> elements. They would often become very long and bloated with various attributes to set the border, cell spacing, cell padding, alignment, background colour, the list goes on.

Here's an example table element from an old web page:

To explain why this is bad practice and bad form, we need to break it down into easier chunks. We'll start with the table element on line 1. This line only uses 5 of an available 10 attributes, and all but one of which are not supported in HTML5. To start with, we'll look at the border attribute. The value for this says whether the table should have a border or not, by using 1 for yes, apply a border, and 0 for no, no borders. There's no control over the colour, thickness or style of the border. There are no other attributes that do this either. Already, this is quite limiting.

Additionally, cellspacing and cellpadding determine the space between cells, and the space between cell walls and content. These are attributes applied to every cell. This may not be required depending on the design and purpose of the cell.

The align attribute is a global attribute which is also not allowed to be used. This covers other elements too. There are better ways to do this depending on the design, from using CSS margin properties to move the box itself, or text-align to put alignment on the text within the element. The latter allows for more control, supporting fully justified, left, right, and centre text alignment.

The bgcolor, width and valign attributes are used too. The first and second are easily replaced with the background-color and width CSS properties, while the last can be replaced with vertical-align, which allows you to align content to all sorts of positions, including sub/super-script heights (without changing font size), and allowing to have it in-line with the parent element.

As the link between HTML and CSS grows stronger, the W3C has decided against using a majority of attributes in elements in HTML 5, because they are better handled by CSS^[6]. A large amount of styling using attributes are not supported in HTML 5, and will fail verification if you use them.

The below code is much better to use and implement with separated HTML and CSS:

Another advantage that CSS has over attributes is the ability to apply the same style to multiple parts of HTML code without bloating the element, by either giving the HTML elements the class or ID attributes, or by structuring the CSS in a hierarchical format. We will discuss both of these methods in the next two chapters.

Continue to Chapter 2 - Using CSS Selectors