Html5 Quick Learning Quide

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 !" #nited $tates License
HTML5 syntax is compatible with both HTML and !HTML". #ant to close
empty elements with a slash$ %o for it. &ather not$ Then don't. #ant to use
lower case$ (pper case$ Ta)e your pic). *n other words+ you really don't ha,e
to change the way you handle these things+ so don't worry+ o)$
HTML5 doct%&e is muc' sim&ler(
Ne) )a%(
-.doctype html/
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//E!"
""##$://www.w3.%&'/T(/"#)l4/s#&*+#.d#d",
%&
<!DOCTYPE "#)l PUBLIC "-//W3C//DTD -HTML .0 .#&*+#//E!"
""##$://www.w3.%&'/T(//"#)l/DTD//"#)l-s#&*+#.d#d",
Meta c'arset tag is muc' sim&ler(
Ne) )a%(
-meta charset01(T2341/
Old way:
<)0#a "##$-012*34"C%5#05#-Ty$0" +%5#05#4"#0/#/"#)l6 +"a&s0#4UT7-
8" /,
5i,s are now used for styling rather than structure6 HTML5 includes se,eral
new structural elements that help define parts of the document. Let's ta)e a
loo) at the main new structural elements that you'll probably use right away.
7Note 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 arent cau!ht up yet to
render the new bloc"#level elements as bloc"#level elements$ %or now, its easiest &ust to
automatically include them$ 'nderstandin! why can come later$8
Main Structural Elements ou!ll "se Most #ften in HTML5
-header/
-na,/
-section/
-article/
-aside/
-footer/
9lthough these sound li)e :positions; in a document+ and ,ery often will be
used in that way+ they really are about grouping and not positioning. <ou might
ha,e = -sections/ in a page+ with each -section/ ha,ing its own -header/ and
-footer/ for instance. 7>ote that these elements ? li)e classes ? can be used
more than once on a page8.
(ut to "eep thin!s simple, )or this documents purpose, lets &ust thin" o) a
very basic document that contains a top header, a menu )or navi!ation, a
content section that contains a couple o) articles, a sidebar, and a )ooter$
*n HTML or !HTML+ you probably would ha,e used di,s+ classes and ids to
group each of those areas. <ou can and should still use di,s+ classes and ids for
styling reasons+ but they may no longer be as necessary as before for
structural purposes. @ome 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 Auic) facts to create a simple HTML5 document+
let's )eep this really basic.
Here's a simple way to code a ,ery basic document that contains a top header+
a menu for na,igation+ a content section that contains a couple of articles+ a
sidebar+ and a footer in HTML5.
-.doctype html/
-html/
-head/
-meta charset01utf341/
-title/Bery Basic 5ocument-/title/
-.33Cif *DE/-script src01http://html5shi,.googlecode.com/s,n/trun)/html5.Fs1/-/script/-.CendifE33/
-style/header+ footer+ section+ aside+ na,+ article Gdisplay: bloc)6H-/style/
-/head/
-body/
-na,/
-ul/
-li/-a href01I1/Home-/a/-/li/
-li/-a href01I1/9bout-/a/-/li/
-li/-a href01I1/Jroducts-/a/-/li/
-li/-a href01I1/Kontact (s-/a/-/li/
-/ul/
-/na,/
-header/
-h"/-a href01I1/Bery Basic 5ocument-/a/-/h"/
-hL/9 tag line might go here-/hL/
-/header/
-section/
-article/
-h=/-a href01I1/2irst 9rticle Title-/a/-/h=/
-img src01images/flower.Fpg1 alt01flower1/
-p/Lorem ipsum dolor sit amet+ consectetur adipiscing elit. *nteger nec odio. -/p/
-/article/
-article/
-h=/-a href01I1/@econd 9rticle Title-/a/-/h=/
-img src01images/tree.Fpg1 alt01tree1/
-p/Jraesent libero. @ed cursus ante dapibus diam.-/p/
-/article/
-/section/
-aside/
-h/Konnect #ith (s-/h/
-ul/
-li/-a href01I1/Twitter-/a/-/li/
-li/-a href01I1/2aceboo)-/a/-/li/
-/ul/
-/aside/
-footer/
-p/9ll rights reser,ed.-/p/
-/footer/
-/body/
-/html/
9s you can see+ the structure is fairly simple+ and you can style these new
structural elements in the K@@. Howe,er+ because you may ha,e some of these
structural elements within different groupings on a page 7such as se,eral
sections ha,ing different headers and footers8+ you may want to style each
differently. *n that case+ you can still assign ids and classes Fust as you would
in HTML or !HTML.
The point of the structural elements is to designate structure after all6
presentation is dealt with in the K@@ in whate,er manner wor)s best for you+
using ids and classes.
@o what are the actual definitions of these new structural elements$
-'eader/ represents a group of introductory or na,igational aids. 7Thin!s
youd usually wrap in a H*, H+, H,, etc8
-nav/ represents a section of the document intended for na,igation. 7Li"e a
menu8
-section/ represents a generic document or application section. *t can be
used together with the h"+ hL+ h=+ h+ h5+ and hM elements to indicate the
document structure. 7-ust a lo!ical !roupin! such as a content section8
-article/ represents an independent piece of content of a document+ such as
a blog entry or newspaper article. 7Independent is the "ey word here$ I) the
piece o) content could ma"e sense pluc"ed out o) this document and placed
somewhere else, its probably an article8
-aside/ represents a piece of content that is only slightly related to the rest
of the page. 7'sually a sidebar, but could be another type o) content that
isnt directly related to the main content8
-*ooter/ represents a footer for a section and can contain information about
the author+ copyright information+ et cetera. 7.ou "now, li"e$$$ a )ooter8
Nf course+ HTML5 comes with other interesting elements such as the ,ideo 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 ha,e it. Oust the basics that will let you Auic)ly mo,e from
HTML or !HTML to HTML5 right now.
*f you want to del,e into the finer points+ * recommend starting with the #=K
draft+ entitled HTML5 differences from HTML located at
http://de,.w=.org/html5/html3differences/
This document created by http://freehtml5templates.com/
#e'd lo,e to ha,e you follow us at http://twitter.com/html5templates and
please boo)mar) and share our site within your social networ)s 7twitter+
faceboo)+ stumbleupon+ delicious+ etc8.
2eel free to share this document with others+ )eeping in mind that
this document is licensed under the Creative Commons
Attribution-Noncommercial-No Derivative Works !" #nited
$tates License 7http://creati,ecommons.org/licenses/by3nc3
nd/=.P/us/8.
@hare it6 don't sell it. @hare it6 don't change it.
Jretty simple+ yes$ :8

Html5 Quick Learning Quide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html5 Quick Learning Quide

Uploaded by

Copyright:

Available Formats

HTML5 Quick Learning Guide

Just what you need to know to quickly

You might also like