HTML5

# Tag Description

1 <article> For a standalone article on a page. Articles can be nested within other articles; for example, a blog post would be contained in <article> tags and each comment would be contained within a nested <article> tag. 2 <aside> For content contained in an aside. Often used for navigation elements or for a list of articles or categories (e.g., in a blog). 3 <audio> For embedding audio files. 4 <canvas For creating graphics and graphic applications. > 5 <comma For command buttons similar to what you might see in the Microsoft nd> Office 2010 ribbon. <command> must be nested in <menu>. 6 <datalis For a dropdown list providing built-in functionality similar to a t> JavaScript autocomplete boxes. 7 <details For expandable (usually initially hidden) content to provide more > information about an element. 8 <embed For backwards compatibility with the non-standard (but well > supported)<embed> tag in HTML 4. 9 <figcapt For captions on images. (In HTML4, there was no way to ion> semantically associate a caption with an image. 1 <figure For wrapping embedded content (e.g, an image) with a 0 > <figcaption>. 1 <footer For the footer of a page or a section. 1 > 1 <header For the header of a page or a section. 2 > 1 <hgroup For grouping <h1><h6> tags on a page. For example, the title 3 > and subtitle of a page could be an <h1> and <h2> grouped in an <hgroup> tag.

1 <keygen For a generated key in a form 4 > 1 <mark> For showing marked (or highlighted) text. Unlike <strong> or <em>, 5 <mark> doesnt give the text any special meaning. The best example is marking a word or phrase that a user has searched on within the search results. 1 <meter For a measurement within a set range. 6 > 1 <nav> 7 For holding a group of navigation links.

1 <output For holding output (e.g., produced by a script). 8 > 1 <progre For a progress indicator (e.g., for a loading). 9 ss> 2 <rp> 0 Used within <ruby> tags to tell browsers that cannot render the East Asia characters properly what extra characters (usually parentheses) to display. Used within <ruby> tags to show how to pronounce East Asia characters.

2 <rt> 1

2 <ruby> For ruby annotations. 2 2 <section For creating a <section> on the page. This helps the browser (user 3 > agent) determine the page outline. 2 <source For indicating media sources within <video> and <audio>. 4 > 2 <summa For the header of a <detail> element. The <summary> would show 5 ry> by default. 2 <time> For holding a machine-readable date and/or time while displaying a 6 friendly date and/or time.

2 <video> For embedding video files. 7 2 <wbr> 8 An opportunity to insert a line break within a word. (e.g, super<wbr>califragilistic<wbr>expialidocious)

12 CSS3 Features
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Border Radius. Border Images Box Shadow Multi-Column Layout Multiple Backgrounds @font-face Attribute Selectors :nth-child() and :nth-of-type() Opacity RGBA Colors Wrapping Up CSS3 Gradient Color

#1 Border Radius
1 #my_id { 2 height: 100px; 3 width: 100px; 4 border: 1px solid #FFF; 5 /* For Mozilla: */ 6 -moz-border-radius: 15px; 7 /* For WebKit: */ 8 -webkit-border-radius: 15px; 9}

#2 Border Images
1 #my_id { 2 /* url, top image, right image, bottom image, left image */ 3 border-image: url(border.png) 30 30 30 30 round round; 4}

#3 Box Shadow
1 #my_id { 2 background: #FFF; 3 border: 1px solid #000; 4 /* For Mozilla: */ 5 -moz-box-shadow: 5px #999; 6 /* For WebKit: */ 7 -webkit-box-shadow: 5px #999; 8}

#4 Multi-Column Layout
01 #my_id { 02 text-size: 12px; 03 /* For Mozilla: */ 04 -moz-column-gap: 1em; 05 -moz-column-rule: 1px solid #000; 06 -moz-column-count: 3; 07 /* For WebKit: */ 08 -webkit-column-gap: 1em; 09 -webkitcolumn-rule: 1px solid #000; 10 -webkit-column-count: 3; 11 } *Note: column-space-distribution is not implemented yet, this feature is to describe how to distribute leftover space.

#5 Multiple Backgrounds
1 #my_id { 2 background: 3 url(topbg.jpg) top left no-repeat, 4 url(middlebg.jpg)center left no-repeat, 5 url(bottombg.jpg) bottom left no-repeat; 6}

#6 @font-face

1 @font-face { 2 font-family: my-font; 3 src: url(my-font.tff) format(truetype); 4} 1 #my_id { 2 font-family: my-font, sans-serif; 3}

#7 Opacity
1 #my_id { 2 background: #F00; 3 opacity: 0.5; 4}

#8 Attribute Selectors
Select elements with title prefix of t: 1 p[title^=t] { 2 /* Attributes to give them. */ 3} Select elements with title suffix of t: 1 p[title$=t] { 2 /* Attributes to give them. */ 3} Select elements with title contain at least one instance of t: 1 p[title*=t] { 2 /* Attributes to give them. */ 3}

#9 :nth-child() and :nth-of-type()

1 /* First, Fourth, Seventh, etc.. 2 /* Any type of element */ 3 p:nth-child(3n+1) { 4 background: #F00; 5} 1 /* First, Fourth, Seventh, etc.. 2 /* Only li elements */ 3 p li:nth-of-type(3n+1) { 4 background: #F00; 5}

#10 RGBA Colors

1 #my_id { 2 background: rgba(255, 212, 45, 0.5); 3}

#11 Wrapping Up
It will still take a while before CSS3 is complete, even longer till every browser supports it (IE). But, we can start using them in are designs for browsers that do support them and just not have the extra features for the older browsers. All in all, just get excited, CSS3 will move the web development world in a good direction.

#12 CSS3 Gradient Color

.gradient-bg { /* fallback/image non-cover color */ background-color: #1a82f7; /* fallback image */ background-image: url(images/fallback-gradient.png); /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10+ */ background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #2F2727, #1a82f7); }

Browser Engines:
1. Mozilla (Firefox, Flock, etc) 2. WebKit (Safari, Chrome, etc) 3. Opera 4. Trident (IE)

HTML5 Structure
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="styles/screen.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <header> </header> <aside> <nav> <ul> <li><a href="#">Home</a></li> </ul> </nav> </aside> <article class="content"> </article> <footer> </footer> </div><!-- END .wrapper -->

</body> </html>