Lesson 15: HTML5 — The New Kid on the Block
In this lesson, you will understand more about HTML5 basics.
HTML5: The last version
Going forward, HTML won't have a number version attached. Right now, we're still differentiating the old with the new by using the "5", but soon it won't be necessary. HTML will be what is known as a "living standard" — updated as it grows, piece by piece.
Already, the version doesn't matter too much. No browser supports everything in HTML5 yet but all of them support some of it. You always need to check with different browsers to see if your HTML code is coming out the way you want.
Tags mean what they say
The biggest change in HTML5 is that we now have a bunch of tags that mean what they say. So <header> is the header text of a page, <footer> is the footer text, <article> is…yes, you guessed it, used for an article — which could be any piece of writing that is meant to be self-contained like a blog entry, a magazine article, or anything else that is a complete piece of writing. Audio, video… they all pretty much mean exactly what they are labelled.
These are called semantic (i.e. meaning) tags — and generally, you're going to try to use the tag that applies to the type of content you put inside them. Use the right tag for the right thing.
So, what new tools do I need in HTML5?
As in HTML4.0 and XHTML, a browser and text editor are all you really need.
There are some cool little tools that you can use in addition to Notepad that may make life a bit easier:
- HTML5Reset: Take your old website designs and re-write as HTML5.
- Liveweave: Test your HTML5 code in different browsers and play around with it.
Shiv
In old browsers HTML5 doesn't display correctly. This is where the HTML5Shiv comes in. It allows most of the old browsers to recognize the HTML5 tags and style them using CSS instead of HTML5. Therefore, consider include the shiv in every page so that anyone using an older browser can still see your website the way you intended.
HTML5Shiv
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Title</title>
</head>
<body>
<p>text text</p>
</body>
</html>
This little piece of Javascript ensures that if someone is using Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, that everything still looks and works ok.
Ok, let's continue
Using your text editor like Notepad, create a new file that looks like this:
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script
src="html5shiv.js">
</script>
<![endif]-->
<title>My first HTML5 page!</title>
</head>
<body>
<p>This is mynew HTML5 page.</p>
</body>
</html>
Save the file as .htm or .html and change Save as type to All, so you'll end up with page1.htm or page1.html.
Open your browser and type CTRL+O, browse to the file you just saved and choose it. Your browser should now be showing you your new HTML5 page. Pretty much the same as always. But just wait...
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||