HTML Mistakes - Belfast Telegraph · 2015-09-01 · Common Mistakes spelling 1. Always check you have spelled everything precisely 2. HTML uses American spelling, like center and

Gareth McAleese ([email protected]) Ian Simons ([email protected])

page 1 of 16

www.go-berserk.com

www.facebook.com/GoBerserkBooks

Go Berserk… HTML Mistakes

HTML Mistakes

www.go-berserk.com

mailto:[email protected]


http://www.go-berserk.com/


page 2 of 16

www.go-berserk.com


Contents

Go Berserk… HTML Mistakes .................................................................................................................. 1

Contents .............................................................................................................................................. 2

Overview ............................................................................................................................................. 3

Common Mistakes .............................................................................................................................. 3

Spelling ................................................................................................................................................ 4

Speech Marks ...................................................................................................................................... 5

Tags ..................................................................................................................................................... 6

Tables .................................................................................................................................................. 9

Pictures ............................................................................................................................................. 14

Headings............................................................................................................................................ 14

HTML Character Codes ..................................................................................................................... 15





page 3 of 16

www.go-berserk.com


Overview

HTML is a very precise language. One wrong speech mark or letter and it doesn’t work. This

document gives you the most common mistakes to avoid frustration. There are more details and

lessons in the Go Berserk making websites with HTML and CSS book, and the website www.go-

berserk.com.

Common Mistakes

spelling

1. Always check you have spelled everything precisely

2. HTML uses American spelling, like center and color

speech marks

3. Always put speech marks round the value of a parameter. For example in bgcolor=”red”

“red” is the value, and needs speech marks round it.

4. HTML only likes straight speech marks (“”) not curly ones (“..”). To get straight speech marks,

always type the speech marks in Notepad or TextEdit. Don’t copy them from elsewhere

5. You can use double speech marks (“) or single ones (‘), HTML doesn’t mind.

tags

6. Always make sure every tag that needs a pair has a pair (like <h1></h1>)

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

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

So, all these are OK:

<ul><li>first</li><li>second</li></ul>

or

<ul> <li>first</li><li>second</li> </ul>

or

<ul>

<li>first</li><li>second</li>

</ul>





page 4 of 16

www.go-berserk.com


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


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





page 5 of 16

www.go-berserk.com


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


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.





page 6 of 16

www.go-berserk.com


Tags

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

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)





page 7 of 16

www.go-berserk.com


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 /.





page 8 of 16

www.go-berserk.com


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

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.





page 9 of 16

www.go-berserk.com


Tables

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:

<table>

<tr>

<td>

</td>

</tr>

</table>

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.





page 10 of 16

www.go-berserk.com


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>

A1 A2

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>





page 11 of 16

www.go-berserk.com


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


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.





page 12 of 16

www.go-berserk.com


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.





page 13 of 16

www.go-berserk.com






page 14 of 16

www.go-berserk.com


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





page 15 of 16

www.go-berserk.com


HTML Character Codes

character codes


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

You can find a full list on www.go-berserk.com.






page 16 of 16

www.go-berserk.com


Thank you for using this resource!

For more details and even more resources, please visit www.go-berserk.com

You may be interested in the following:

Go Berserk making websites with HTML and CSS

Our paperback book created to teach children as young as 8 how to make their own

websites using real HTML and CSS code. It has a Vikings theme and is designed for Windows.

Go Berserk on a Mac making websites with HTML and CSS

This is the same book designed for Mac users and has an Amelia Earhart theme. It is

available in paperback and ebook formats.

You can see more and order at www.go-berserk.com





Documents

HTML Mistakes - Belfast Telegraph · 2015-09-01 · Common Mistakes spelling 1. Always check you have spelled everything precisely 2. HTML uses American spelling, like center and