HTML5 introduction
The easiest thing you can change to start using HTML5 fundamentals is a doctype. What we have here is an old template from maybe 2009. year. There is many things to remove here but before we do that take a look at the doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website title</title>
<meta name="author" content="Author Name">
<meta name="description" content="Website Templates. Free CSS Web Template.">
<meta name="keywords" content="Free web templates, keyword2, keyword3">
<style type="text/css">
h1 { margin-top: 0;}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
They are a little bit confusing, we have DOCTYPE html PUBLIC, and a long string after that, and you are wondering what does this means? So first thing I can tell you is that no one memorise this and don’t feel bad because you copied doctype from page to page. Only purpose of doctype is to trigger standards mode or it is required if you want to pass validation. Because main purpose of doctype is to trigger standards mode, people thought of what is the shortest doctype we can create to accomplish this task, and they came up with this:
<!DOCTYPE html>
Lot of people think it is good for html5 and it is not going to work in older web browsers like IE6, and that is of course incorrect. Even if some old browsers can’t support html5 this is going to work even in IE6. From now on you can start using this short type doctype declaration!
HTML tags to remove
Now that we upgrade our doctype let’s see what else we can remove from this template and let’s start from top. First there is a html tag and this is not necessary and you can remove xmlns entirely, and if you want you can specify lang=”en” what is sometimes a good practice so it will look like this:
<html lang="en">
Next we come up to our head section, we have our title and it looks good, and the we come to this meta tag which is redundant:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
We don’t need content=”text/html and also http-equiv=”Content-Type” is redundant so we are left with:
<meta charset="utf-8" />
Once again, this is a little redundant, we have content= charset= ! We are going to remove it entirely. And what xhtml recommended, self closing tags are not necessary, so no bother, saving a couple of character is not going to change anything:
<meta charset="utf-8">
Secondly, this one comes down to preferences, use or not to use quotes around your attributes, and it is not necessary except in few situations where you have space or some other symbol. So if you want you can get rid of quotations entirely, and you can do it for style or script quotations, but the only thing why I encourage you not to do so is that is very helpful to leave quotations alone because of the syntax highlighting in your text editor.
HTML5 Grand finale
What we have here now is a much cleaner html5 template and notice that we do not have these long strings that have to be typed or pasted:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website title</title>
<meta name="author" content="Author Name">
<meta name="description" content="Website Templates. Free CSS Web Template.">
<meta name="keywords" content="Free web templates, keyword2, keyword3">
<style>
h1 { margin-top: 0;}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
Extreme – shortest possible html
You probably didn’t know something, technically all tags are required, by this idea has been drilled into us with xhtml, that when you have <p> tag you have to close it </p> and if you dont close it you are going to do something wrong and it is going to brake. The truth is that web browser is smarter that you think they are, and there is specific declaration that says if there is <p> item it has to be closed after. So it is perfectly ok to leave <p> or some other tag unclosed. But again for some people it feels better to close it, so you must decide for yourself.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website title</title> </head> <body> <p>Hello! </body> </html>
Let’s reduce this even further. Technically we don’t need closing tag for html and body. I do not suggest to do this for all your projects, but if you are working on a demo or something where it is not required you can get away with it and nothing going to happen. Now the head tag does not to be closed as well and the browser is smart enough to know that meta and title tags are positioned in head tag and same is for body and html tags, so we ended up with this:
<!DOCTYPE html> <meta charset="utf-8"> <title>Website title</title> <p>Hello!
Save this and view it in the browser. If you open this file with google chrome, and if you right click and go to view page source it will look exactly as we type it, but if you do right click and go to inspect elements, hooray, generated tree displays everything as it should be, and this is going to work in all modern browsers!
For most real projects you want to stick with template that we built in the beginning, but you can use this when you are running a quick demo or you want to try something out, so it is important for you and me to know that we are not smarter than a browser :).
Follow this link to continue on reading HTML5 fundamentals 2nd part.
Leave a Reply