From catswhocode.com
When building a website, you often start with a base template that you customize to fit your needs. Instead of writing all your HTML5 code from scratch, you can save time by using one of those very useful online HTML5 generators. Using them is definitely easy: You fill a basic form to set up desired options, you click on a button and a basic HTML5 template is available for you to use.
With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. One of the best tools to keep an eye on HTML5 tags and property is definitely those up to date cheat sheets, created by InMotion Hosting.
HTML5 is a new technology. You can already use it but right now, but you have to remember that several specifications have not been implemented in some browsers.
After coding a page in HTML5, the fastest and most efficient way to make sure that your code is semantically correct is indeed by validating it. The good old W3C validator can validate your HTML5 pages and show you if you made any mistake. A great tool for quality check!
HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list of my favorites “best practices” with the hope that it will be as useful to you as it is to me.
Use a generator
When building a website, you often start with a base template that you customize to fit your needs. Instead of writing all your HTML5 code from scratch, you can save time by using one of those very useful online HTML5 generators. Using them is definitely easy: You fill a basic form to set up desired options, you click on a button and a basic HTML5 template is available for you to use.
There are quite a lot of HTML5 generators, but my favorites are definitely SwitchToHTML5 and Shikiryu generator, which have more options.
And if you prefer a ready to use template, the HTML5 Boilerplate is a must have.
Use a cheat sheet
With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. One of the best tools to keep an eye on HTML5 tags and property is definitely those up to date cheat sheets, created by InMotion Hosting.
The cheat sheets are broken up into three easy to print images: Tags, Event Handler Content Attributes and Browser Support.
All three cheat sheets can be downloaded here.
All three cheat sheets can be downloaded here.
Be careful with compatibility issues
HTML5 is a new technology. You can already use it but right now, but you have to remember that several specifications have not been implemented in some browsers.
Can I Use.com is definitely a website to have in your bookmarks if you’re coding HTML5 websites. It is the most complete tool to quickly know if an element is supported by a specific browser. CanIUse.com also contains compatibility charts for CSS3, SVG and JavaScript.
Know how to enable HTML5 on older versions of IE
Internet Explorer have always been a pain for web developers and designers. I’m pretty sure that most of you remember when in 2006 or 2007 we had to take lots of time to get things working (almost) correctly on IE6… Although IE’s newer versions are a lot better than what IE used to be, the IE developer nightmare is not over yet. In fact, IE 8 and below do not understand HTML5 at all.
The good news is that a small script allow you to enable HTML5 on IE 8 and older. Using this script is pretty simple, just paste the following code in the
<head> section of your HTML5 document:<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Another very useful tool to consider is Modernizr, a complete JavaScript library that helps you build HTML5 website that works perfectly in all browsers.
Using Modernizr is pretty easy. Just go to this page to specify which HTML5/CSS3 properties you plan to use, then download the generated script. Include it in the
<head> section of your document, and you’re done. Modernizr will detect which features can be used in the client browser and will add classes to the <html> tag. If a feature is supported by the browser, that feature is added by name as a class to the tag. If the feature is not supported, the class is added and prepended with “no-”.Use elements correctly
Before HTML5, we used to code websites using lots of
<div> elements. The biggest problem with this technique is definitely that source code can quickly become hard to read. This is why HTML5 introduced new tags to be used instead of the good old <div>.
Those new tags includes header, footer, article, section, aside, nav and more. A basic, but semantically correct HTML5 document should look like the following:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> ... </header> <div role="main"> ... </div> <footer> ... </footer> </body> </html>
Validate your code
After coding a page in HTML5, the fastest and most efficient way to make sure that your code is semantically correct is indeed by validating it. The good old W3C validator can validate your HTML5 pages and show you if you made any mistake. A great tool for quality check!
No comments:
Post a Comment