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.
precise spelling ()
Always check you have spelled
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|
US spelling ()
HTML uses American
spelling, like "center"
, not "centre" and "colour".
Here is a table of US spellings in HTML, and their UK equivalents.
|US spelling||UK spelling|
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 ()
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.
matching pair tags ()
Always make sure every pair tag (which needs a partner) has a partner (eg <h1>..</h1>).
correct lone tag endings ()
Make sure every lone tag (which does not need a partner) has no pair tag, and ends in />
</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 ()
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 ()
Make sure there are no spaces, new lines, or any other characters between the opening bracket and the tag name
< 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
correct table order ()
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:
correct numbers of rows and columns ()
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
<td>A1</td><td bgcolor="red" rowspan="2">A2</td>
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:
format tags (like <i>) inside cells (<td>) only ()
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>
You can see the text "Hello" is not italic like this: Hello
Inside cells, use pixels with height and width ()
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):
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.
<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.
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:
Don't put heading tags out of order (it will look strange and may not work in some browsers).
For example, this is bad:
Other Code Mistakes
HTML Character Codes
character codes ()
If you want to put spaces, or some common symbols on the page you have to use HTML codes:
| || ||blank space
|“||“||Opening Double Quotes
|”||”||Closing Double Quotes
|‘||‘||Opening Single Quote Mark
|’||’||Closing Single Quote Mark