HTML5 Quick Learning Guide

Just what you need to know to quickly
move from HTML / XHTML to HTML5

 HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close
empty elements with a slash? Go for it. Rather not? Then don't. Want to use
lower case? Upper case? Take your pick. In other words, you really don't have
to change the way you handle these things, so don't worry, ok?
HTML5 doctype is much simpler:

New way:
<!doctype html>
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler:
New way:
<meta charset="UTF-8">
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />

Divs are now used for styling rather than structure; HTML5 includes several
new structural elements that help define parts of the document. Let's take a
look at the main new structural elements that you'll probably use right away.
(Note that included in the head is an HTML5 shiv that allows us to style elements in IE,
and a basic CSS style is also included so we can help browsers that aren't caught up yet to
render the new block-level elements as block-level elements. For now, it's easiest just to
automatically include them. Understanding why can come later.)
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
Main Structural Elements You'll Use Most Often in HTML5

<header>
<nav>
<section>
<article>
<aside>
<footer>

Although these sound like “positions” in a document, and very often will be
used in that way, they really are about grouping and not positioning. You might
have 3 <sections> in a page, with each <section> having its own <header> and
<footer> for instance. (Note that these elements – like classes – can be used
more than once on a page).
But to keep things simple, for this document's purpose, let's just think of a
very basic document that contains a top header, a menu for navigation, a
content section that contains a couple of articles, a sidebar, and a footer.
In HTML4 or XHTML, you probably would have used divs, classes and ids to
group each of those areas. You can and should still use divs, classes and ids for
styling reasons, but they may no longer be as necessary as before for
structural purposes. Some documents may be able to get by without them
completely, while most will probably still need them for styling. But again, for
the purposes of learning the quick facts to create a simple HTML5 document,
let's keep this really basic.
Here's a simple way to code a very basic document that contains a top header,
a menu for navigation, a content section that contains a couple of articles, a
sidebar, and a footer in HTML5.
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Very Basic Document</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>header, footer, section, aside, nav, article {display: block;}</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">Very Basic Document</a></h1>
<h2>A tag line might go here</h2>
</header>
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p>
</article>
</section>
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body>
</html>
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
As you can see, the structure is fairly simple, and you can style these new
structural elements in the CSS. However, because you may have some of these
structural elements within different groupings on a page (such as several
sections having different headers and footers), you may want to style each
differently. In that case, you can still assign ids and classes just as you would
in HTML4 or XHTML.
The point of the structural elements is to designate structure after all;
presentation is dealt with in the CSS in whatever manner works best for you,
using ids and classes.

So what are the actual definitions of these new structural elements?

<header> represents a group of introductory or navigational aids. (Things
you'd usually wrap in a H1, H2, Hx, etc)

<nav> represents a section of the document intended for navigation. (Like a
menu)

<section> represents a generic document or application section. It can be
used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the
document structure. (Just a logical grouping such as a content section)

<article> represents an independent piece of content of a document, such as
a blog entry or newspaper article. (Independent is the key word here. If the
piece of content could make sense plucked out of this document and placed
somewhere else, it's probably an article)

<aside> represents a piece of content that is only slightly related to the rest
of the page. (Usually a sidebar, but could be another type of content that
isn't directly related to the main content)

<footer> represents a footer for a section and can contain information about
the author, copyright information, et cetera. (You know, like... a footer)
Of course, HTML5 comes with other interesting elements such as the video and
audio elements, plus new and changed elements and attributes, but all of
those belong in a separate cheat sheet. This one is to get you up and running
fast, so there you have it. Just the basics that will let you quickly move from
HTML4 or XHTML to HTML5 right now!


Share on Google Plus

About Akins Mathew

 Hello! I’m a Programmer and  CEO/Founder of iReporter News Network Int'l [iNNi], a Creative Website Designer/Developer, Mobile App Designer, Business Enthusiast, Writer, Blogger and Musician. Currently obsessed with Mobile App Development.

"A logical person, Psychologically intelligent, and physically thrilling".

Connect with me on Facebook | Twitter | Reverbnation

STAGE NAME: Dr Magic
    Blogger Comment
    Facebook Comment

1 comments:

  1. It's actually very difficult in this busy life to listen news on TV, so I simply use world wide web for that purpose, and obtain the newest
    information.

    Have a look at my page free music downloads (twitter.com)

    ReplyDelete

Enter here your comment!

Note: Only a member of this blog may post a comment.

-->