Greg's Blog

helping me remember what I figure out

Some Html Optimisation Hints

| Comments

Apart from making use of CSS and xHTML here a few handy hints that I was able to glean from this excellent article:

Meta tags

  1. Make them conditional to save on space, for example:
    <!–#if expr=”$HTTP_USER_AGENT = /^Mozilla/” –><!–#else –> <meta Name=”keywords” Content=”your set of meta tags” />

    <meta name=”description” Content=”Your web sites description goes here” /> <!–#endif –>
  2. Keep their length down to 200 or less characters. ON thing point worth noting is that you don’t need to use commas to delimit your keywords (search engines ignore them), simply use a space to delimit.

xHTML
One handy tip here is to keep your lines down to less than 255 characters

Forms
A really handy tip is to use the following style attribute for forms:

<style type=”text/css”>
<!–
form {display:inline;}
–>
</style>

This removes the return carriage that causes ugly spacing at the end of forms and thus negates the need to hack form displays by improperly nesting the form tag in tables. The hack for that is: <tr><form><td></td>/form></tr>, but thanks to that style sheet entry you no longer need to use this hack and your markup validates properly as well.

Tables
I covered this previously, but I this is such a useful tip that I thought there is no harm in repeating it, especially when you consider how widespread the use of tables are in web design. To speed up the display of tables use this style sheet:

<style type=”text/css”>
<–
table {table-layout:fixed; width: 100%}
–>
</style>
<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 3</td></tr>
</table>

You can furthermore optimise the speed and size of your tables, by assigning further styles to say your tds for font sizes and background colours. Reduce the table overhead even further by using a style to define the border, cellpadding and cellspacing attributes. Like such:

<style type=”text/css”>
<–
table {border-collapse: collapse;}
td {padding: 0px;}
–>
</style>
<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 3</td></tr>
</table>

There you go all the tips I have for this week.