Open an existing web page. There is a chance that the first few lines will look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Delete the preceding code snippet and replace it with the following code snippet:
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8>
Save the document and you should now have your first HTML5 page as far as the W3C validator is concerned (http://validator.w3.org/).
Don't worry, that's not the end of the chapter! That crude exercise is merely meant to demonstrate HTML5's flexibility. It's an evolution of the markup you already write, not a revolution. We can use it to supercharge the markup that we already know how to write.
So, what did we actually do there? First of all, we stated the new HTML5 Doctype declaration:
<!DOCTYPE html>
If you're a fan of lowercase, then <!doctype html> is just as good. It makes no difference.
Tip
HTML5 Doctype—why so short?
The HTML5 <!DOCTYPE html> Doctype is so short that this was determined to be the shortest method of telling a browser to render the page in "standard mode". This most efficient syntax mindset is prevalent throughout much of HTML5.
After the Doctype declaration, we opened the HTML tag, specified the language, and then opened the <head> section:
<html lang="en"> <head>
Note
Sprechen sie Deutsche?
According to the W3C specifications (http://dev.w3.org/html5/spec/Overview.html#attr-lang), the lang attribute specifies the primary language for the element's contents and for any of the element's attributes that contain text. If you're not writing pages in English, you'd best specify the correct language code. For example, for Japanese the HTML tag would be <html lang="ja">. For a full list of languages take a look at http://www.iana.org/assignments/language-subtag-registry.
Finally, we specified the character encoding. As it's a void element it doesn't require a closing tag:
<meta charset=utf-8>
Unless you have a good reason to specify otherwise, it's almost always UTF-8.
I remember, in school, every so often our super-mean (but actually very good) math teacher would be away. The class would breathe a collective sigh of relieve as, rather than "Mr Mean" (names have been changed to protect the innocent), the replacement was usually an easy-going and amiable man who sat quietly, leaving us to get on without shouting or constant needling. He didn't insist on silence whilst we worked, he didn't much care how elegant our workings were on the page – all that mattered was the answers. If HTML5 were a math teacher, it would be that easy-going supply teacher. I'll qualify this bizarre analogy…
If you pay attention to how you write code, you'll typically use lowercase for the most part, wrap attribute values in quotation marks, and declare a "type" for scripts and stylesheets. For example, you might link to a stylesheet like this:
<link href="CSS/main.css" rel="stylesheet" type="text/css" />
HTML5 doesn't require such detail, it's just as happy to see this:
<link href=CSS/main.css rel=stylesheet >
I know, I know. It makes me feel weird, too. There's no end tag/slash, there are no quotation marks around the attribute values, and there is no type declaration. However, easy going HTML5 doesn't care. The second example is just as valid as the first.
This more lax syntax applies across the whole document, not just linked CSS and JavaScript elements. For example, specify a div like this if you like:
<div id=wrapper>
That's perfectly valid HTML5. The same goes for inserting an image:
<img SRC=frontCarousel.png aLt=frontCarousel>
That's also valid HTML5. No end tag/slash, no quotes, and a mix of capitalization and lower case characters. You can even omit things such as the opening <head> tag and the page still validates. What would XHTML 1.0 say about this!
Although we are aiming to embrace a mobile first mindset for our responsive web pages and designs, I'll admit I can't fully let go of writing what I consider the best practice markup (note, in my case that was adhering to the XHTML 1.0 markup standards which required XML syntax). It's true that we can lose some minute amounts of data from our pages by embracing these coding economies but in all honesty, if necessary, I'll make up the shortfall by leaving an image out of my design instead!
For me, the extra characters (end slashes and quotes around attribute values) are worth it for increased code legibility. When writing HTML5 documents therefore I tend to fall somewhere between the old style of writing markup (which is still valid code as far as HTML5 is concerned, although it may generate warnings in validators/conformance checkers) and the economies afforded by HTML5. To exemplify, for the CSS link above, I'd go with the following:
<link href="CSS/main.css" rel="stylesheet"/>
I've kept the closing tag and the quotation marks but omitted the type attribute. The point to make here is that you can find a level you're happy with yourself. HTML5 won't be shouting at you, flagging up your markup in front of the class and standing you in a corner for not validating.
One more really handy economy in HTML5 is that we can now wrap multiple elements in an <a> tag. (Woohoo! About time, right?) Previously, if you wanted your markup to validate, it was necessary to wrap each element in its own <a> tag. For example, see the following code snippet:
<h2><a href="EB9781849693189_2.html">The home page</a></h2> <p><a href="EB9781849693189_2.html">This paragraph also links to the home page</a></p> <a href="EB9781849693189_2.html"><img src="home-image.png" alt="home-slice" /></a>
However, we can ditch all the individual <a> tags and instead wrap the group as demonstrated in the following code snippet:
<a href="EB9781849693189_2.html"> <h2>The home page</h2> <p>This paragraph also links to the home page</p> <img src="home-image.png" alt="home-slice" /> </a>
The only limitations to keep in mind are that, understandably, you can't wrap one <a> tag within another <a> tag and you can't wrap a form in an <a> tag either.
Besides things such as the language attributes in script links, there are some further parts of HTML you may be used to using that are now considered "obsolete" in HTML5. It's important to be aware that there are two camps of obsolete features in HTML5—conforming and non-conforming. Conforming features will still work but will generate warnings in validators. Realistically, avoid them if you can but they aren't going to make the sky fall down if you do use them. Non-conforming features may still render in certain browsers but if you use them, you are considered very, very naughty and you might not get a treat at the weekend!
An example of an obsolete but conforming feature would be using a border attribute on an image. This was historically used to stop images showing a blue border about them if they were nested inside a link. For example, see the following:
<img src="frontCarousel.png" alt="frontCarousel" border="0" />
Instead, you are advised to use CSS instead for the same effect.
In terms of obsolete and non-conforming features, there is quite a raft. I'll confess that many I have never used (some I've never even seen!). It's possible you may experience a similar reaction. However, if you're curious, you can find the full list of obsolete and non-conforming features at http://dev.w3.org/html5/spec/Overview.html#non-conforming-features. Notable obsolete and non-conforming features are strike, center, font, acronym, frame, and frameset.