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  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 spellingincorrect spelling
alignaline
valignvaline


US spelling (WARNING! If you do not do this, your code will not work  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 spellingUK spelling
bgcolorbgcolour
centercentre
colorcolour
metermetre


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  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  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  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:

attributeused in tagsincorrect examplecorrect exampledescription
disabledbutton, input, option, optgroup, select, textarea<button disabled ><button disabled="disabled" >disables controls
checkedinput<input type="checkbox" checked ><input type="checkbox" checked="checked" >puts a check in a checkbox
noshadehr<hr noshade /><hr noshade="noshade" />prevents shading in a line
nowraptd, th<td nowrap ><td nowrap="nowrap">stops text being wrapped round onto a new line in a table cell or header
readonlyinput, textarea<textarea readonly ><textarea readonly="readonly" >prevents people writing in boxes
selectedinput<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  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  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  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  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.
  <table>
  <tr>
    <td>A1</td><td bgcolor="red" rowspan="2">A2</td>
  </tr>
  <tr>
    <td>B1</td>
  </tr>
  <tr>
    <td>C1</td>
  </tr>
</table>
A1A2
B1
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  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  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.
 
Dog
Dog



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  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:
SignHTML CodeDescription
 &nbsp;blank space
&&amp;Ampersand
&ldquo;Opening Double Quotes
&rdquo;Closing Double Quotes
&lsquo;Opening Single Quote Mark
&rsquo;Closing Single Quote Mark
&ndash;en-dash
&mdash;em-dash
>&gt;greater than
<&lt;less than

A full list is here.


Go Berserk Book

Buy Now 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.


Go Berserk CSS Book

Buy Now 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 HTML App

Make websites with HTML5 live1.go-berserk.com app

first chapter FREE

buy full access in the app for £15.00

Go Berserk Javascript Book

£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 making a website

Make Websites on a Mac

Go Berserk making a complete webpage, a new e-book available on the iBookstore
for £5.49 US$9.99 €7.99