Plan for today:
1. Structure of an HTML document
An HTML document consists of 2 main parts: the head and the body:
- the HEAD contains information about the web page (not displayed by the browser)
- the BODY contains the web page content (this is what your browser displays)
Here are a few more detailed resources:
In HTML5, the <html>, <head> and <body> tags are optional. If you don't include them, the html, head and body HTML elements still exist - they are implied, so you can style them with CSS or manipulate them with JavaScript.
Thus, the source code of the smallest valid HTML document would look like this:
<!DOCTYPE html><title></title>
(Note the space: the title cannot be empty)
However, my strong recommendation is to include three tags of these elements. Code is written to be read by humans; that includes others who will read your code, and you - for you will be reading (and editing) it over and over again while developing your web site. Separating the head (with information about your content) from the actual content makes coding much easier! In other words, keep the meta data separate from the data!
2. Debugging and validating your code
Here's a good set of guidelines on how to debug your HTML.
When using the W3C HTML validator do not be scared by many errors: usually fixing the first one takes care of most of the rest (a missed quotation mark can cause a lot of errors to "trickle down" the source code: adding the missed quote could fix them all!)
Overall, pay attention to detail: you are writing "for a computer" - and computers only follow instructions. Miss a character, and the precise instruction will fall apart. So when you see a mess, look at your code and try to imagine how a computer would read that code - i.e., character by character. Where, do you think, it could have seen a character that confused it?
Also, pay attention to syntax highlighting in your editor: you will immediately see when something is off.
Try to spot the errors in these examples (the first one has no errors, the rest have ONE character missed or mistyped):