HTML Layouts

Here, we look at the "right" and "wrong" way to do HTML layouts.

Most modern websites and blogs are built with a layout that consists of multiple sections. For example, a website might contain a header, footer, navbar, etc.

There are different ways to achieve these layouts in HTML.

HTML Layout using Tables Wrong!

You might be tempted to put your website's layout inside a big table. This should be avoided.

In the early days of the web, tables were a popular method for achieving advanced layouts in HTML. This involved putting the whole web page inside a big table, then nesting other tables inside that one. The outer table had a different column or row for each main section, and the nested tables contained specific items (such as a navbar, footer, etc).

Here's an example:

However, HTML tables weren't designed as a layout tool. Tables were designed for presenting tabular data. In fact, the W3C heavily discourages using tables for layout.

CSS should be used for determining the layout of a website or blog.

The reason this technique became so widespread is because of the limitations of CSS at the time.

More importantly, it was the limitations of browser support for various CSS properties. Not all CSS properties were supported by all browsers. But even when a property was supported by multiple browsers, the actual implementation was different. The result? What looked good in one browser often looked terrible in another.

This led web developers to throw their arms up and say "Hey, tables might not be designed for this, but at least it works in all browsers!".

HTML Layout using CSS

CSS (and browser support) has come a long way since the early days of the web. These days, browsers have much more consistent support for CSS properties for dealing with website layouts.

Also, HTML now has a number of elements that can be used for the common sections of a website. In particular, the <main>, <header>, <footer>, <nav>, and <article> tags were introduced in HTML5, specifically for providing better semantics for a website's layout.

Also, the <div> element is a generic block level element that can be used for grouping HTML elements. Once grouped, formatting can be applied to the element and everything contained within it.

Using our previous HTML layout, we can use various HTML5 elements (along with CSS) to achieve a similar effect.

One change to this that I'd recommend is that you place the CSS into an external style sheet.

One major benefit of using CSS is that, if you place your CSS in a separate location (i.e. an external style sheet), your site becomes much easier to maintain.

Responsive Layouts

Another progression in modern-day web design is the practice of building responsive layouts.

Responsive layouts adjust according to the screen size being used to view the website. This means that your website will probably look different on a mobile phone vs a tablet vs a desktop computer. The website adjusts itself to provide the best layout for the screen size.

Because designing the visual layout is the job of CSS, we won't go into any more detail here. But the main thing to remember is, HTML provides the above elements (and more) to communicate the purpose of the element (eg, "article", "header", "nav" etc). We can then apply CSS to those elements to determine how they are presented to the user.

Because advanced layouts take time to create, a quicker option is to use a template. Web templates are basically a pre-built website that enables you to customize as required. To see what I mean, check out these HTML templates.