Over Complicating HTML

Semantic markup is the way forward and has been for some time. Using CSS to style semantic markup separates the presentational code from the content making things simpler for the designer whilst also making the site much more accessible, and search engine friendly.

However, even people that embrace this method come unstuck when deciding which tag or array of tags to use for certain scenarios whilst the easiest and correct solution doesn’t always stand out.

The Line Break

The simplest example of this is developers trying to force an element onto a new line by using something to the effect of:


<span style="clear: both"></span>


What’s wrong with the <br> tag? This is a case where a tag, that was misused to great lengths before CSS was introduced, has suddenly been forgotten about by many people and is deemed wrong to use.

We’ve all seen poorly coded sites that use multiple <br>’s to create large amounts of space which is undoubtedly the incorrect use of the tag but to create a simple line break there’s nothing wrong with using it.

Using Tables

I’ve also been asked on many occasions, “how do I replicate a table using CSS?”. The fact is, if it’s a table that contains data then you don’t need to.

This is often a great misconception that tables are bad. Tables are bad if they’re used for creating layouts but tables were created for displaying tabular data so it would be just as bad to use div’s to create a table as it would be to use tables for your layout.

Unordered and Ordered Lists

Lists should be simple to use but for some reason people don’t use them nearly as often as they should. I’ve often heard people say that they don’t want bullets next to their list items so they opt for using paragraphs instead.

This is the wrong use of semantic markup as presentation shouldn’t enter into the reasoning for use of code. Using CSS you can style the HTML however you want, remove the bullets by using the following and style your lists accordingly:


list-style-type: none;


Heading Tags

Heading tags are a topic of much debate whilst are often used incorrectly. Heading tags should appear in sequence on a page whilst the style of the heading should not be considered when coding HTML as the presentation of this element can be changed using CSS.

The <h1> tag should always be your first heading on the page and should contain the page title. Whilst this is up for debate, I personally believe that only one <h1> tag should be present per page and if a need ever occurs that you think you need two, then the page should probably be split up into two pages.

Next in your code should be <h2>’s which should be sections within the page, followed by <h3> subsections and so on.

If you imagine headings like a contents page for your web page then this should help decide which heading you should be using, for example:

• h1 – page title
  • h2 – section title
    • h3 – subsection title
    • h3 – subsection title
  • h2 – section title
    • h3 – subsection title
    • h3 – subsection title

Summary

I’m sure there are numerous other examples of where HTML is being used wrongly and over-complication of elements is occurring. I hope you find these few tips useful but please feel free to post any other tips or other mis-uses of HTML you may be aware of.