Html 5

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

Brought to you by

http://freehtml5templates.com/

Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License

HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close empty elements with a slash? Go for it. Rather not? Thendon'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:
Old ways: or

Meta charset tag is much simpler: New way:
Old way:

Divs are now used for styling rather than structure; HTML5 includes several new structural elements that help define parts ofthe 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 includethem. 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 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 in a page, witheach having its own and 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 useddivs, 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

 Very Basic Document header, footer, section, aside, nav,article {display: block;} Home About Products Contact Us Very Basic Document A tag line might go here First Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Second Article Title Praesent libero. Sed cursus ante dapibus diam. Connect With Us Twitter Facebook All rights reserved.
Licensed under the Creative CommonsAttribution-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 stillassign 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? represents a group of introductory or navigational aids. (Things you'd usually wrap in a H1, H2,...