Lesson 4

Valid HTML

Following the rules of HTML to create ‘valid’ content

When Sir Tim Berners-Lee created the language of HTML he set rules for how a page should be laid out. A page needs a certain structure of code before the content can be considered 'valid', or as adhering to the rules of HTML. See *Web Standards for more information.

HTML is the language we use for telling the browser what things are. If you preview your app in the browser (by clicking "Preview" in the top right) you will notice that the title in the tab at the top is "Made in Thimble". To give the app its own name we need to update the information in the "head".

All html pages are made up of two sections: the 'head' for information about the page, and the'body' for content the user sees.

The indentation is purely there to show us as coders what’s where. The browser ignores "white space". It does look neater, doesn’t it? It’s up to you, but here at Decoded we like to keep our code nice’n’tidy.

1.html, body and head

You'll see that Thimble has automatically created the correct structure for valid code. This includes a !DOCTYPE, head and body elements.

Why do we need !DOCTYPE

Doctype tells the browser what version of HTML we’re going to be using. Since HTML is now an evolving standard (which means there will never be an HTML6), it means that this tag is slightly less important. However, for older browsers in particular, we need to make sure it is the first line of our HTML page.

2.comments

Let’s add in a comment at the very top of the page to label who created this page. (Using your name of course).

Why do we add comments?

Another best practice is to add comments in your code. These are ignored by the browser, so allow you to leave notes for yourself, or other developers working with your code. See *Comments for more details.

*Comments

Comments are essential for any web project. One reason why you should always try to comment your work is in case another developer picks up the project and wants to continue with it. In the open source community, where hundreds or thousands of people will be coding on a project, comments allow people to express how they decided to structure the code. Even if you’re the only one who will ever be coding on your project, often if you write some code and then come back to it a year later you’ll have forgotten why you wrote what you wrote! Comments are really useful to jog your memory!

*Web Standards

HTML is often described as quite a ‘forgiving’ language to code in. If you miss some tags out, like the head or the body for example, your website will probably still display. However, there are web standards that every developer should try and stick to. By keeping to these standards you can be sure that your web page will look the same on every device and browser.

Go to the next lesson

index.html

the web page

New Window
Next Lesson