We at XHTML Champs have an in depth knowledge about HTML5 and our team with a vast experience in this area know better how to use each feature for making your website a unique one. - See more at: http://www.xhtmlchamps.com/psd-to-html5.html

1. HTML tools and SNIPPETS you
can’t do without
PRESENTED BY XHTMLCHAMPS

2. HTML tools and SNIPPETS you can’t do
without.
HTML5
Html5 is the all new package of mark up languages introduced by the W3C
(World Wide Web consortium) for the purpose of presenting data on the
internet.Html4.0 or Html 1.0 has been used for more than a decade now,
the quest for better markup language began to meet the onslaught of a
whole new breed of web applications.HTML5 has the following highlights-
HTML TOOLS & SNIPPETS

3. • Latest semantic markup elements like date pickers and range sliders come with
HTML5
• HTML5 deliberately overrides the use of plug-ins. The earlier version makes use of
additional plug-ins such as flash/JS Kludges to run video, audio, form validation
and animated graphics. HTML5 automatically supports inclusion of such files into
the webpage.
• HTML5 is backward compatible, the new mark up features and API s introduced
can automatically be integrated into the content.
• This is better suited to writing dynamic web applications than the earlier HTML
versions.
HTML TOOLS & SNIPPETS

4. The following are some popular tools and
snippets used in HTML5 for creation of
better innovative web applications-
Some effective HTML5 tools for web designers-
1. Sprite Box-Compressing images enhances the loading time and also the increases
the speed of your image transactions. This WYSIWYG tool helps you design images
into “sprites” or compressed ones.
2. Video Voting and popular Bar- This tool allows you to gather feedback on your
videos. All that needs to be done is a click on the video and use the spacebar to
submit a video.
HTML TOOLS & SNIPPETS

5. 1. Apps for creation of mockups and wireframes-This is an html app which is used to
create UI Concepts and prototypes, built on fairly open standards so as to provide
the best experience on the browser.
2. Speakker-This is a cross-browser audio maker tool. This comes in two variations
with a wide variety of options for customization. All this is in a few lines of Java
script and a quantum CSS!
3. Text editor-WYSIHTML5 is a rich text editor tool which uses an advanced security
concept and attempts to generate a fully complaint HTML mark up content with
easy to maintain tags and inline styles.
4. Font testing tool-This bookmark allows you to view any web page in a new font
without having to change anything in HTML/CSS codes.
5. Create- This is a web editing interface which is designed to provide a modern, fully
browser based HTML5 environment to manage content. This tool adapts to any
kind of content management backend.
HTML TOOLS & SNIPPETS

6. Popular Snippets used in HTML5
1. URL and email input type- This allows you to write a more semantically correct
code and is mobile friendly. Likewise with the email attribute as well.
2. The basic HTML5 page template-This code snippet has the much required doctype
tag along with additional header scripts. It makes a reference to an external page
styles.css for the style sheet designs; this can further be updated to anything.
3. Form validation- Prior to HTML5 when forms were used on websites, Java script
was used to create font side validation. With this snippet you can define a regular
expression pattern to validate the data.
HTML TOOLS & SNIPPETS

7. 4. CSS Browser resets-Each web browser defines its own standard rules for styling
documents .Web designers would prefer to remove the preset values so that
browsers render each website in the same way, this snippet helps you perform just
that.
5. Context menus- This snippet allows you to add elements to the contextual menu
that appears upon right-clicking somewhere on the web-page.
6. Font Normalization- To overcome the differences in font between the operating
system and browser, this snippet allows you to size the fonts in such a way that
size and line height is regularized across platforms.
7. Web-kit font smoothening- This is basically an anti-aliasing for web-kit browsers
currently available only in Mac OSX. The purpose is to make the text render better
making it more readable avoiding all the text thinning hack seen earlier.
HTML TOOLS & SNIPPETS

8. 8. Force scroll-bar-In cases where the pages are smaller than the browser-view port;
also when you load a page on the same site which does not have content and uses
a scroll bar, this snippet comes to your rescue. A scroll bar is forced no matter the
height of content by this snippet thus resolving this tiny but annoying issue.
9. Video player with flash fallback-One of the greatest benefits of HTML5 is its ability
to run video files without the help of flash player. Certain older browsers are not
HTML5 compatible and hence the fallback option of flash player is enabled by this
snippet.
10. IE7 Image re-size- IE7 by default scales down images which makes it look
unappealing. This snippet enables a better resizing algorithm which is available in
IE7 itself which produces much results with images that almost look as though
edited with image editing software.
HTML TOOLS & SNIPPETS

9. 11. Print styles- Being Print Ready is extremely important of content available on
websites. His snippet first uses a CSS media declaration, allows you to include it in
the main style sheet thus avoiding having to place another link in the head of the
document. This has a positive effect on the load time of the website.
12. G-Zip Compression- This .htaccess snippet allows us to drastically reduce file sizes.
13. Meta-tags for responsive layouts-the Meta viewport tag is the only one which is
being used for responsive web layouts. This enables functionality in smart phones
which render websites in full-view and allow users to zoom in without glitches.
14. Conditional body tag- This snippet allows target of IE Browsers specifically without
having to add an extra http request/Style sheet. Basically depending on the
browser used a class is added to the body tag .If in case the user is not using IE, a
classless tag is used which allows you to target specific browsers in the CSS
without use of hacks etc.
HTML TOOLS & SNIPPETS

10. 15. Hidden elements and auto completion- the data list element using HTML5 allows
you to draw up a list of data to auto complete a given field. Useful indeed! Hidden
elements also allow you to hide a specific element as it is done using CSS.
16. Faster page load hack- This is used to accelerate the performance of the website.
In the case of use of a particular conditional comment, it goes ahead and blocks
further download until the CSS sheets are completely downloaded and run. This
increases your page load time. To resolve this entry of an empty conditional
comment is loaded into the code before any CSS usage.
17. Optimized Google analytics- This is a very popular tool to track a website s
behavior and site visits. This is a modified version of Google s snippet.
18. Formatting of quoted code- This enables text wrap when it reaches the walls of
the container. In this case the snippet also helps preserve the line breaks and the
white space cross browser.
HTML TOOLS & SNIPPETS

11. 19. Label Alignment- This snippet brings about consistency across browsers in terms of
alignment of labels with their relevant inputs.
20. Clickable Inputs- By default most browsers don’t apply the pointer cursor to some
clickable inputs listed in the webpage. This snippet resolves this issue by making
them clickable.
21. Screen reader Access- By use of this snippet, the usability of the website by
allowing it to link outlines for both screen readers tabbing through links and
mouse users.
22. J-Query loading fallback-The simple objective of this snippet is to merely check if J-
query is loaded from Google if not the same is loaded locally from this version.
This is an effective fall back option.
23. Device Orientation- This consists of two CSS media queries which may be used for
website development. With the advent of smart phones, tablets and mobiles this
snippet facilitates use of different styles for each.
HTML TOOLS & SNIPPETS

12. 24. Expiry date for cache file-types- Usually when our files are cached on the users
machines; we may require mentioning the duration of their stay there depending
our changes to it. This snippet provides the time frame for some basic file types;
these however can be customized for our own site.
HTML5 is the rules the roost in the world of internet technology today. It is here to
stay and is the most effective way to put content out there to the user. The listed
tools and snippets for the HTML5 code are all out to construct the best website
for your business.
HTML TOOLS & SNIPPETS