Open table.html and save it as head.html.  One of your prices in the table should be in £ and one in € and they will probably not display correctly in all browsers as you discovered.

At the moment the top of your HTML document (head.html) should look like this:

        <title>HTML tables</title>	    

First change the title to The HTML head element.


Add a new line before the html tag and add this text as the new first line in the code:

<!DOCTYPE html>

This is not technically HTML.  It tells the browser than what follows is HTML.  This is because there have been many versions of HTML (and XHTML) and the browser needs to be told which version this page is.  This DOCTYPE says it is HTML v5.  You don't need to know what that means just put it at the top of every Web page you make.

Character set

Text in different countries may use different characters.  The set of characters will be coded inside the computer using binary.  One character set might use the binary number 00100100 for $ but another might use the same binary number to represent a different character.  The browser needs to know which you are using or it will look at the binary and show the wrong text characters.  This is why those currency characters were probably messed up.

This line should go before the title line in your page (but after the head tag).  It should be indented at the same level as the title element:

<meta charset="UTF-8">

Save and view.  The £ and € should now display correctly.  If it happens the opposite way around your file may have been saved in the wrong format (not UTF-8).  In Notepad++ use the Encoding menu to check and change it to UTF-8 if needed.  If you ever get weird characters on a page check your charset and the editor save format.  They need to be the same.


Although this page does not have any styles you should know from the introductory CSS tutorial that you need a line in the HTML to point to an external style sheet.  Add this line just under your title line:

<link rel="stylesheet" type="text/css" href="default.css">

The link element connects the named style sheet to this HTML page.  A link element can link other things so the attributes inside this one tell the browser that this link is to a file which contains text which is CSS.  The href attribute works the same as in a hyperlink (an a element).  It points to the file.  At the moment the file does not exist so the browser will look for it then give up.  Very soon you will create the CSS file because you have finished learning basic HTML apart from a little practise.