Extras / HTML Mistakes < you are here.

< share

HTML Mistakes

Here is a list of mistakes made in HTML code.
Common Mistakes: Spelling | Speech Marks | Tags
Specific Tag Mistakes: Tables | Pictures | Headings
Other Code Mistakes: HTML Character Codes

You can see a list of the most common mistakes here, or you can check your HTML code with our code checker here.

Common Mistakes

Spelling

precise spelling ( WARNING! If you do not do this, your code will not work)

Always check you have spelled everything precisely
Here is a list of words that are commonly spelled incorrectly in HTML, and their correct spellings (in addition to the US spellings listed below):

correct spelling	incorrect spelling
align	aline
valign	valine

US spelling ( WARNING! If you do not do this, your code will not work)

HTML uses American spelling, like "center" and "color", not "centre" and "colour".
Here is a table of US spellings in HTML, and their UK equivalents.

US spelling	UK spelling
bgcolor	bgcolour
center	centre
color	colour
meter	metre

Speech Marks

speech marks around parameter values

Always put speech marks round the values of a parameter. For example in bgcolor="red", "red" is the value and needs speech marks round it.
Please also make sure:
- you use straight speech marks
- you use double speech marks

straight speech marks only ( WARNING! If you do not do this, your code will not work)

HTML only likes straight speech marks (_") not curly ones(_“).
To get sraight speech marks, always type them into TextEdit or Notepad.
Don't copy them from elsewhere.

preferably double not single speech marks

You can use double speech marks(_") or single ones(_') - HTML doesn't mind.
However, it's better to use double speech marks all the way through.

Tags

matching pair tags ( WARNING! If you do not do this, your code will not work)

Always make sure every pair tag (which needs a partner) has a partner (eg <h1>..</h1>).

correct lone tag endings ( WARNING! If you do not do this, your code will not work)

Make sure every lone tag (which does not need a partner) has no pair tag, and ends in />
For example:
</br> should be <br />
<br> should be <br />
<br>Put my line break here></br> should be just Put my line break here><br />

use parameter values

Most parameters are in the format attribute="value". For example, <button bgcolor="red" > makes a red button.
For some parameters, though, you can just use the attribute. For example <button disabled > makes a button that is not enabled (doesn't work).
However, it is better to use the standard format (attribute="value") with these attributes too.

So, <button disabled > should be <button disabled="disabled" >
(the value is always the attribute name repeated)

Here is a list of attributes which can be used alone, but should not be:

attribute	used in tags	incorrect example	correct example	description
disabled	button, input, option, optgroup, select, textarea	<button disabled >	<button disabled="disabled" >	disables controls
checked	input	<input type="checkbox" checked >	<input type="checkbox" checked="checked" >	puts a check in a checkbox
noshade	hr	<hr noshade />	<hr noshade="noshade" />	prevents shading in a line
nowrap	td, th	<td nowrap >	<td nowrap="nowrap">	stops text being wrapped round onto a new line in a table cell or header
readonly	input, textarea	<textarea readonly >	<textarea readonly="readonly" >	prevents people writing in boxes
selected	input	<input type="checkbox" selected >	<input type="checkbox" selected="selected" >	selects a value in a list

forward slashes ( WARNING! If you do not do this, your code will not work)

Make sure the slashes go the right way. In tags and file and web addresses, slashes are "forward slashes" and go /.

no spaces before tag names ( WARNING! If you do not do this, your code will not work)

Make sure there are no spaces, new lines, or any other characters between the opening bracket and the tag name
For example:
< h1> should be <h1> (without the space after the <)

<
h1> should be <h1> (with no line break after the <)

tags in lower case

HTML can be written in UPPERCASE or lowercase.
However, you should write it in lowercase to make sure it can be read by all browsers.
So, <H1> should be <h1>.

HTML ignores spaces and lines

Tags can be written all on one line or on separate lines, or with spaces - HTML doesn't mind.

Specific Tag Mistakes

Tables

correct table order ( WARNING! If you do not do this, your code will not work)

Make sure you put <table> tags first.
Then <tr> tags inside the <table> tags
Then <td> (or <th>) tags inside the <tr> tags

Don't have <td> outside <tr> or <tr> outside <table>

Your table should look like this:
<table>
  <tr>
    <td>
    </td>
  </tr>
</table>

correct numbers of rows and columns ( WARNING! If you do not do this, your code will not work)

Make sure you have the correct number of rows and columns in your table if you are using rowspan or colspan.
If you make colspan span more columns than you have in your table, the table will look strange.
Similarly, if you make rowspan span more rows than you have in your table, the table will look strange.

As an example, here is a table with 3 rows.
We want to make the second column (coloured red) cover all 3 rows. However, only 2 rows are mentioned in rowspan.

A1	A2
B1	A2
C1

You can see that there is a missing cell in the bottom left. This is where the rowspan should have stretched the A2 cell, but it didn't reach far enough down.
The rowspan should have been written like this:
<td rowspan="3">A2</td>

format tags (like <i>) inside cells (<td>) only ( WARNING! If you do not do this, your code will not work)

Make sure you put any tags that format text (like <i> or <font>) inside cell tags (like <td>).
If you put tags that format text between a <tr> tag and a <td> tag, they won't work.

As an example, here is a table with one row and one cell.
The italic tag (<i>) has been applied outside the cell, between a <tr> tag and a <td> tag:

<table>
  <tr>
    <i><td>Hello</td></i>
  </tr>
</table>

Hello

You can see the text "Hello" is not italic like this: Hello

Inside cells, use pixels with height and width ( WARNING! If you do not do this, your code will not work)

For things inside cells (like pictures), use pixels(px) with height and width, (not percentages).
Unfortunately, percentages don't work in Internet Explorer or Firefox browsers.

As an example, here is a picture of our dog (normal sized, abour 180 pixels tall):
dog

The table on the left has a cell with picture which uses a height in percentages (<img... height="50%" />),
but the table on the right has a cell with a picture that has a height in pixels (<img... height="90px" />).

The dogs in both tables should be half as big as the dog above.
- if you view this page in Internet Explorer and Firefox, you'll see the dog in the left table is not half as big as the one above, because the percentage doesn't work
- if you view this page in other browsers (like Chrome or Safari), percentages will work properly.

Pictures

<img> tag needs an alt text

You should include the alt parameter in an <img> tag.
alt tells the computer text to display if it can't find your picture.

Headings

put headings in order <h1>, <h2>, <h3>...

You should put the heading tags in order on the page, with h1 then h2 then h3 like this:

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

Heading 1

Heading 2

Heading 3

Don't put heading tags out of order (it will look strange and may not work in some browsers).
For example, this is bad:

  <h1>Heading 1</h1>
  <h3>Heading 3</h3>
  <h2>Heading 2</h2>

Heading 1

Heading 3

Heading 2

Other Code Mistakes

HTML Character Codes

character codes ( WARNING! If you do not do this, your code will not work)

If you want to put spaces, or some common symbols on the page you have to use HTML codes:

Sign	HTML Code	Description
		blank space
&	&	Ampersand
“	“	Opening Double Quotes
”	”	Closing Double Quotes
‘	‘	Opening Single Quote Mark
’	’	Closing Single Quote Mark
–	–	en-dash
—	—	em-dash
>	>	greater than
<	<	less than

A full list is here.

to buy for
£11.99 US$17.99 €13.99 (not incl. P&P) for 1 or 2 books
Buy more and save! Email sales@go-berserk.com for 3 books or more.

to buy for a special price of
£11.99 US$17.99 €13.99 (not incl. P&P) for 1 or 2 books
Buy more and save! Email sales@go-berserk.com for 3 books or more.

Go Berserk News

HTML Mistakes

Common Mistakes

Spelling

precise spelling ( WARNING! If you do not do this, your code will not work)

US spelling ( WARNING! If you do not do this, your code will not work)

Speech Marks

speech marks around parameter values

straight speech marks only ( WARNING! If you do not do this, your code will not work)

preferably double not single speech marks

Tags

matching pair tags ( WARNING! If you do not do this, your code will not work)

correct lone tag endings ( WARNING! If you do not do this, your code will not work)

use parameter values

forward slashes ( WARNING! If you do not do this, your code will not work)

no spaces before tag names ( WARNING! If you do not do this, your code will not work)

tags in lower case

HTML ignores spaces and lines

Specific Tag Mistakes

Tables

correct table order ( WARNING! If you do not do this, your code will not work)

correct numbers of rows and columns ( WARNING! If you do not do this, your code will not work)

format tags (like <i>) inside cells (<td>) only ( WARNING! If you do not do this, your code will not work)

Inside cells, use pixels with height and width ( WARNING! If you do not do this, your code will not work)

Pictures

<img> tag needs an alt text

Headings

put headings in order <h1>, <h2>, <h3>...

Heading 1

Heading 2

Heading 3

Heading 1

Heading 3

Heading 2

Other Code Mistakes

HTML Character Codes

character codes ( WARNING! If you do not do this, your code will not work)