My ‘need to know’ of HTML5 and CSS3

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page

HTML5 and CSS3 – all I know in one dose

A friend of mine has been working here and there in HTML and CSS and recently I’ve been trying to get him up-to-speed with the changes in the newest versions of each. The other night I was working with him on some web stuff and he asked me to point him to some websites that would be a good tutorial for HTML5.

I did a couple quick searches and found a number of websites that went into detail about a few difference or tried to go over too much and ended up being rather general. So I decided to write up this blog and go over as much as I know about both HTML5 and CSS3 and have a number of links to sites that I learned from or are just generally good points of reference.

Let’s get started, shall we?

HTML5

What’s changed and how to properly use these changes

In my first real look into HTML5, I came across the new html tags that were introduced in this version of HTML. Something to keep in mind as we run through these new tags is that a lot of them have the same properties and can should be used exactly as you would a <div>.

Here’s a quick look at a number of these tags, ones I’ve been working hard to incorporate are:

<header>

This tag is meant to replace the standard <div id=”header”> in almost every website I’ve ever peeked at the source code and every website I’ve ever coded. It encompassed similar items such as logo, navigation and/or a persistant quick-links at the very top of a page.

</header>

<footer>

Similar idea to the <header> tag, <footer> allows common elements that would populate a <div> with an id of “footer” to be little more readable and symantically correct while reducing code.

</footer>

<section>

I’ve run into a couple of ways to use this tag and although one may not be more right than the other, I’ve chosen to use this tag as a way to group broad areas of my websites together. The best way to explain this is the Newspaper analogy.

</section>

<aside>

Commonly used to seperate out a sidebar repeated throughout a website.

</aside>

<nav>

New method of declaring your site’s navigation to browsers, search engine bots and other coders. One thing that I would like to gripe about with this new tag is that it has the right idea, but then falls short of what I would consider a useful tag.

	<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>

Now I’m sure that not every developer uses unordered lists for their navigation, but I cannot think of one site that I’ve viewed the code of that didn’t. So why not use the <nav> tag like the new <menu> tag?

</nav>

<menu>

Speaking of which… The menu tag is a nice way of declaring that you are setting up a list of menu items.

	<menu>
<li>home</li>
<li>about</li>
<li>contact</li>
</menu>

See how this tag nicely replaces the <ul> at the very same time it defines what you’re looking at? Why not use the same idea for the <nav> tag? But I’m sure the W3C in all it’s wisdom has a reason that is beyond a lowly coder like me.

</menu>

<article>

This is another nice block element that completely describes what it is used for. You’re displaying latest tweets on you website… put it in an <article> tag. Recently posted news articles… put it in an <article> tag. Blogs posts…

…   sorry just double checking that I put this in an <article> tag.

</article>

<canvas>

I have played around with this tag a little bit. It’s a super powerful way to do all kinds of effects that you would swear had to be Flash or Silverlight but are not. The tag itself only really defines the area that the drawing and/or effects occur. There is a whole lot more that needs to take place to get the amazing effects that can be done here.

</canvas>

<hgroup>

Nice block element to wrap around multiple <h{n}> tags. I have used this a lot when using all CSS to create a logo for a website. The hgroup can easily determine the size of the logo and can allow for easy absolute placement of the <h{n}> tags inside.

</hgroup>

<time datetime=”2011-03-25″>

Used to tell the browser and search bots that the content inside is a date or time. This tag takes a ‘datetime’ attribute of the date/time in a more browser-friendly format.

</time>

There of course are a ton more new tags, features and functionality in the new HTML5 but I cannot go into everything here in this one blog post. Not if I ever want it to end, that is. Below is a list of good HTML5 links that I have used to learn what I have and hope that they are helpful to you.

I also hope that this post has been helpful as well.

w3cschools.com/html5
diveintohtml5.org/
webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets
developer.mozilla.org/en/canvas_tutorial

More to Come…

My next post will go into the amazingly cool new features found in CSS3.

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page