printer friendly version

Common misuse of HTML elements

Have you ever thought about the exact purpose of a tag or attribute you are using? Every element in HTML should be used for it's exact purpose only, to make sure your website is cross-browser compatible and accessible.
Even if you have a lot of experience in coding, maybe you're doing something wrong. This is more an article than a tutorial — I'm just sharing with you what I have learned in my attempt to make pretty, compatible, accessible layouts.


Misuse: Positioning (layout) of elements on the webpage. This is the most often issue, and everyone today recommends using divs instead. People say "Yes, but I want my layout to look the same in all browsers!" Oh, offcourse, your layout will look the same in Internet Explorer 3, Opera 2, Netscape 3... Oh, come on. Nobody uses those browsers anymore, and if they do - they won't be able to see all your wonderful CSS anyway, so why bother.
Note that coding a table takes writing a lot of tags --> your source is code larger --> it takes more time for webpage to load.

Correct use: Storing tabular data. If you have some amount of data that can be set in a table, do it. This is an example of the correct use of tables:

PerformerAlbumNumber of songs
Pink FloydThe Division Bell11
The OffspringSmash14
The Beat FleetMaxon Universal12

Table headers are inside <th> tags to make visual formatting easier, but also to let people who don't see the visual formatting know that it is a table header, not tabular data.

Alt attribute

Misuse: Alt attribute is often used as an additional description of the image shown. This is not correct - alt should be used only for short descriptions for those who, for some reason, cannot see the image. Any additional information about the image should be stored in title attribute. Note that people who use browsers other than IE won't see the alt text when they hover the pointer over the image, but only if the image is not loaded. However, if you put a description in the title attribute, they will be able to see it.

Correct use: Alt stands for alternative - write short description of what is on the image, so that people whose browser can't display images, or they are blind so they are using screen readers, know what is on the image. Keep is as short as possible. Note that if the image is only part of your layout, such as header images, spacers, bullets etc. should have an empty alt tag, alt="".
An example of correctly displayed image of a black cat would be this:

<img src="mycat.jpg" alt="black cat" title="this is my cat Fluffy, 6 months old"/>


Misuse: Some people provide codes to be copied from the textboxes. This can be ok, if only people used entities instead of real tags.
What are entities, you ask? In HTML, they are special characters, and in order to show them, you must use a special code. Every entity code starts with sign & so if you want that sign to be shown in a browser, you must write &amp; . Sounds complicated, eh? Well it doesn't take long to catch up with it. So, writing a part of the HTML code that will be displayed, not processed must include codes &lt; &gt; and &quot; . Here is an exaple of code that displayes a link:

&lt;a href=&quot;;&gt;in obscuro&lt;/a&gt;

It will be displayed in a browser like this:

<a href="">in obscuro</a>

So, when you display source code in textareas use this method, otherwise your HTML code will not be valid. But, I suggest avoiding usage of textarea. In my tutorials, I am using the code tag to display source code, and a little bit of CSS to make it look nicer.

Correct use: Any kind of interactive forms. I will not get into details here, because you all know what forms are and what they are used for. If you've never seen one, take a look at my contact form.

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business