Learn HTML5: 10+1 Must Read Lessons

alt="Learn HTML5: 10+1 Must Read Lessons" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-500x186_c.jpg" />

Note: This post is published in 2010 and it is one of our most popular web design posts. To make this article remain useful and to href="http://www.webhostingsecretrevealed.net/blog/blogging-tips/how-to-recycle-your-blog-content/">prolong the life of this post, I will try my best to keep this post filled with useful and update information. Post last update: June 24th, 2014. 

What’s up with the hype of HTML5?

HTML5 is currently being developed as the next major revision of HTML and it is still far away from W3C recommended release date (year 2022 or later). However with the release of Apple iPad, the topic is got extremely heated and almost every web designer are talking/reading/writing/blogging/twitting about it.

Moreover, many early adapters (web developers and geeks) started creating some cool stuffs wtih the cleaner HTML5/CSS3 codes. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorials to get you started. It’s been a long week searching and reading on these tutorials (hey, I’m new to this too!) – I hope you make good use of them. Also, if you are one of the authors of these tutorials – I couldn’t thank you guys enough! It’s been a great learning journey reading each of these; thank you very, very much.

1. Udemy’s HTML5 Crash Course

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1107-12.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Need a complete beginner lessons in HTML5? Udemy has the best in it. Taught by Robin Nixon, author of href="http://ecx.images-amazon.com/images/I/411zmvViM4L._SS500_.jpg" target="_blank">Learning PHP, MySQL, and JavaScript, the course covers pretty much everything a newbie need to know in HTML5, including basic HTML coding, HTML5 canvas for drawing, geolocation, local storage, as well as HTML5 audio and video.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank"> Check out Udemy’s HTML5 Beginners Crash Course

2. HTML5 Getting Started Guide

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-1.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Concise beginner guide in HTML5 – newbies should start reading from here.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/" target="_blank">Read HTML5 Getting Started

3. Preview of HTML5

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-2.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This was an ‘overview’ on HTML5 published back in late 2007. Nevertheless, it is still a good learning source for those who are unfamiliar with the codes. Personally I like the ‘big picture’ this article offers.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.alistapart.com/articles/previewofhtml5" target="_blank">Read HTML5 Preview

4. What Does It All Mean (Dive into HTML5)

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-3.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

‘Dive Into HTML5’ is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://diveintohtml5.org/semantics.html" target="_blank">Read What Does It (HTML5 elemenets) All Mean

5. HTML5 Demos and Examples

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-4.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

It’s always easier to learn something new via examples. This site provides up to 20 examples of HTML5 experimentations and demos (with source code!).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://html5demos.com/" target="_blank">HTML5 Demos

6. HTML5 Differences From HTML4

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-5.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Detail comparison guide of HTML4 and HTML5 by the W3C (there is no better source than this!).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://dev.w3.org/html5/html4-differences/" target="_blank">Read HTML5 differences from HTML4

7. HTML5 and CSS3: The Techniques You’ll Soon Be Using

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-6.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This is a great tutorial that combines the application of HTML5 and CSS3 – must read for beginner/advance level of web developer and designer.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank">Read HTML5 & CSS3: The Techniques You’ll Soon Be Using

8. HTML5 localStorage()

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-7.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

One of the best things you can do with HTML5 is to establish a client side database (on user browser) with localStorage. To start using this awesome HTML5 function, the HTML5 localStorage() tutorial series (4 detail articles) published at PaperKilledRock.com comes very handy.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/" target="_blank">Read HTML5 localStorage()

9. HTML5 Canvas Cheat Sheet

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-8.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

The information provided is pretty much just a condensed copy of WHATWG specifications. However the .pdf file is definitely a must have on your notice board (especially when you are dealing with a HTML5 project that involves loads of canvas elements).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" target="_blank">Get HTML5 Canvas Cheat Sheet

10. Designing A Blog With HTML5

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-9.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This is a tutorial that every blog theme developer will need to read. (You should also read the author’s blog href="http://www.brucelawson.co.uk/2010/ie-and-html5-testing/">Bruce Lawson for more related updates.)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://html5doctor.com/designing-a-blog-with-html5/" target="_blank">Read Designing a blog with HTML5

11. HTML5 Cheat Sheet

class="border aligncenter wp-image-10012 size-full" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet.jpg" alt="html5 cheat sheet" width="750" height="375" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet-300x150.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

What can I say? Everyone loves a cheat sheet or two. ;)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://websitesetup.org/html5-cheat-sheet/" target="_blank">Get HTML5 Cheat Sheet

Can’t get enough of HTML 5?

So do we! Here’s more on the topic, go check them out.

class="nostyle special icon-list">

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/30-cool-examples-of-html5-websites/">30 Very Cool Examples of HTML 5 Websites

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-design/getting-started-with-html5-css3/">Getting Started with HTML 5

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/10-must-know-html5-tips-tricks-with-sample-codes/">Master HTML 5: 10 Instant Tips and Tricks with Sample Code

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/top-30-html5-tutorials/">Top 30 Must Read HTML 5 Tutorials in 2012

Page 29 – Web Hosting Secret Revealed

Top Lessons you Can Learn from Google’s New Hummingbird Algorithm Changes

alt="Top Lessons you Can Learn from Google’s New Hummingbird Algorithm Changes" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/hummingbird-500x338_c.jpg" />

If you blink these days, Google makes change in their algorithm that can impact your website.

They seem to like catchy little animal-based code names: Panda, Penguin and now Hummingbird.

In real life, a hummingbird might be a fast-moving, beautiful creature that likes to sip from nectar, but in the world of SEO, it can seem more like a pesky insect. Hummingbird is the largest algorithm update in three years, which by nature would make webite owners very nervous as many saw their search engine traffic tank after the rollout of Panda in early 2011. Gianluca Fiorelli expressed the feeling of SEOs everywhere in “Hummingbird Unleashed” on href="http://moz.com/blog/hummingbird-unleashed" target="_blank">The Moz Blog.

Sometimes I think that us SEOs could be wonderful characters for a Woody Allen movie: We are stressed, nervous, paranoid, we have a tendency for sudden changes of mood…okay, maybe I am exaggerating a little bit, but that’s how we tend to (over)react whenever Google announces something.

Relax, We’re Going to Show You the Benefits of Hummingbird

What the Heck Is Hummingbird?

class="aligncenter size-full wp-image-7153" alt="hummingbird" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/hummingbird1.jpg" width="750" height="422" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/hummingbird1.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/hummingbird1-300x168.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

Change is scary, especially when it can impact your website’s traffic and your livelihood. Although Google tends to be very secretive about the science behind their algorithm, there is a method to the madness and it’s fairly easy to figure out.

First, this latest update seems to focus on targeting searches that match the way humans think and interact.

The changes are meant to integrate with voice controls. During a presentation by the company discussing what Hummingbird can do, one executive pulled out a smart phone and through voice search asked for photos of the Eiffel Tower. Once the photos were found, she then asked via voice how tall the Eiffel Tower was and Google answered. This type of interactive information gathering is something that users are looking for and will help people who are truly interested in your niche topic find it easily.

Will It Impact Your Site?

WHSR does not recommend black hat SEO tactics. If your site uses black hat, then this update, along with others over the last few years, will likely impact you. However, if you’ve been following our suggestions for href="http://www.webhostingsecretrevealed.net/blog/blogging-tips/how-to-write-great-content-per-week-consistently/">writing excellent content and basic, principled SEO tactics, then Hummingbird may help instead of hurt.

Avital Web writes in the href="http://www.sacbee.com/2013/10/25/5851612/google-hummingbird-update-affects.html" target="_blank">Sacramento Bee:

Properly indexed sites are unlikely to have noticed a big change with Hummingbird. Search engine optimization is still beneficial for site users who use consistently high-quality, original content.

Many SEO experts believe Hummingbird is going to turn out to be a positive change, unlike some of the previous algorithm updates, which hurt at first. Instead, those who focus on being an authority on their topic and building excellent content will likely thrive in the new environment.

Eric Enge wrote on href="http://www.copyblogger.com/google-hummingbird/" target="_blank">CopyBlogger:

We used to speak about content being king, and that in some sense is still true, but it is becoming more complex than that now. You now need to think about content that truly addresses specific wants and needs. Does your content communicate relevance to a specific want or need?

Changes to Keep in Mind Going Forward

What does this all mean for your website. Some things are likely to remain the same no matter what changes Google or any other search engine implements.

• Write content that informs readers and covers topics not found elsewhere.
• Provide well-written, top-notch material.
• Interact on social media.
• Keep a mailing list and keep in touch with site visitors.
• Update content frequently.

id="attachment_7109" style="width: 760px" class="wp-caption aligncenter">href="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/amit-singhal.jpg">class="size-full wp-image-7109" alt="amit singhal" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/amit-singhal.jpg" width="750" height="500" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/amit-singhal.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/10/amit-singhal-300x200.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />class="wp-caption-text">photo credit: href="http://www.flickr.com/photos/kyeung808/4119647287/">thekenyeung via href="http://photopin.com">photopin href="http://creativecommons.org/licenses/by-nc-nd/2.0/">/>

Headlines that Suck and What You Can Learn from Them

alt="Headlines that Suck and What You Can Learn from Them" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/catchy-headlines-500x748_b.jpg" />

The href="http://www.poynter.org/archived/20596/welcome-to-eyetrack-iii/" target="_blank">Poynter Institute, Eyetools Inc. and the Estlow Center for Journalism and New Media used eye tracking equipment to study the way people read webpages and came up with some interesting information to help website owners and bloggers everywhere. The study, called href="http://www.poynter.org/uncategorized/24963/eyetrack-iii-what-news-websites-look-like-through-readers-eyes/" target="_blank">Eyetrack III, studied 46 people for an hour as they read online. They found that a headline that is dominant will draw the eye and even more so if they are located in the upper left corner of the page.

In addition, a headline that has specific wording, such as some of the examples Jerry Low provides in his article titled href="http://www.webhostingsecretrevealed.net/blog/inbound-marketing/headlines-writing-guides/" target="_blank">Write Headlines Like Brian Clark, Neil Patel, and Jon Morrow: 35 Headline Samples From The A-List Bloggers, will grab a reader’s attention.

One of the best ways to learn what you should do when writing a headline is by looking at headline fails. By studying what doesn’t work, you’ll learn what not to do when writing your own headlines.

What Makes a Headline Suck?

There are some very specific things that make headlines suck. Sometimes, you just don’t realize something sucks until you read it and realize how bad it is, though.

Too Short

You’ve probably heard the advice to “K.I.S.S.” (Keep It Simple, Sweetie), but even good things can be taken too far. Although a headline shouldn’t be three lines long, it also shouldn’t be so short that the reader only has an extremely broad sense of the topic. You want the reader to know exactly what your article is about when she starts to read it.

Let’s use this article as an example. My headline is “Headlines that Suck and What You Can Learn from Them”. Hopefully you know you’re going to learn about what not to do in a headline and get some instruction in writing better ones.

What if I’d used a different headline that wasn’t as clear? What if I went with:

“That Sucks!”

While that might grab your attention for a second, you would have no idea what my article was about. I could be writing about anything

Too Long

On the opposite end of the spectrum is the headline that is far too long. Like a crazy run-on sentence, it keeps going and going and going.

href="http://gothamist.com/2013/05/18/is_this_the_longest_ny_post_headlin.php" target="_blank">Gothamist points to a New York Post headline as possibly one of the longest ever. On May 18th, 2013, Josh Saul’s column went up with the following headline:

Gospel singer suing McDonald’s after she allegedly bit into piece of glass while eating chicken sandwich, which she claims ruined her voice

Wow! That wouldn’t even make a good sentence, much less a headline. This headline could be fixed by focusing on the key points:

Gospel Singer Suing McDonald’s for “Ruining her Voice”

Here is another href="http://www.freerepublic.com/focus/f-chat/2543487/posts" target="_blank">headline that sucks because it is far too long:

Woman in sumo wrestler suit assaulted her ex-girlfriend in gay pub after she waved at man dressed as a Snickers bar

Okay, I kind of understand why the reporter wanted to use all that in an attempt to grab the reader’s interest, but it was just too much. Instead, better to write something shorter like this:

Woman Assaults Ex-Girlfriend; Snickers Bar Involved

id="attachment_11940" style="width: 260px" class="wp-caption alignright">class="wp-image-11940" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/stupid-headline-300x290.jpg" alt="stupid headline" width="250" height="241" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/stupid-headline-300x290.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/stupid-headline.jpg 349w" sizes="(max-width: 250px) 100vw, 250px" />class="wp-caption-text">href="https://www.flickr.com/photos/36016146@N04/7861291298/">Ludie Cochrane via href="http://compfight.com">Compfight