10 Best HTML5 Code Snippets to Simplify Your Tasks

1

The introduction of HTML5 introduces elements and attributes which reflect typical usage on most modern websites, as well as a renewed emphasis on the importance of DOM scripting within Web behavior. It is the most recent version of HTML and XHTML which defines the HTML Standard of a single language and can be written in HTML and XML.

HTML5 has been designed so that old browsers can safely ignore new HTML5 constructs with the intent that different compliant browsers will produce the same result in the case of incorrect syntax. HTML5 has been designed so that old browsers can safely ignore new HTML5 constructs with the intent that different compliant browsers will produce the same result in the case of incorrect syntax.

In this article, we have compiled 10 HTML5 Code Snippets which will help you enable HTML5 markup on your site and web related projects quick and hassle free.

1. HTML5 Ready CSS Reset

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

 
Source  

2. HTML5 Video with Flash Fallback

<video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

 
Source  

3. HTML5 Starter Page

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		<script scr ="script/script.js"></script>

	</head>

	<body>

	<header>

	<nav>

	</nav>
	</header>

	<footer>
	</footer>

	</body>
	</html>

 
Source  

4. Creating a Google Static Map

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
	<title>Geo Location</title>

	<style type="text/css" media="screen">
		html{ height: 100%; }
		body{ height: 100%; margin: 0; padding: 0; }
		#map{ width: 100%; height: 100%; }
	</style>

		<!-- jQuery Min -->
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

		<!-- Google Maps -->
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<script charset="utf-8" type="text/javascript">
		mapWidth = screen.width;
		mapHeight = screen.height;

		$(document).ready(function(){
			var geo = navigator.geolocation;
			if( geo ){
				//Used for Static Maps
				geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}

			function createStaticMarker( markerColor, markerLabel, lat, lng ){
				return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
			}

			function createStaticMap( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var zoom = 20;
				var sensor = true;

				var img = $("<img>");
					img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
								"center=" +
								lat + "," +
								lng +
								"&zoom=" + zoom +
								"&size=" + mapWidth + "x" + mapHeight +
								createStaticMarker( "blue", "1", lat, lng ) +
								"&sensor=" + sensor } );
					return img;
			}

			function showLocation( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var latlng = new google.maps.LatLng( lat, lng );

				$("#map").html( createStaticMap( position ) )

			}

			function mapError( e ){
				var error;
				switch( e.code ){
					case 1:
						error = "Permission Denied";
					break;
					case 2:
						error = "Network or Satellites Down";
					break;
					case 3:
						error = "GeoLocation timed out";
					break;
					case 0:
						error = "Other Error";
					break;
				}
				$("#map").html( error );
			}

		});
		</script>

	</head>
	<body>
		<div id="map">

		</div>
	</body>
</html>

 
Source  

5. Plain HTML5 Starter Template

1.	<!DOCTYPE html>
2.	<html>
3.		<head>
4.			<meta charset="utf-8">
5.			<title>Untitled</title>
6.			<!--[if lt IE 9]>
7.			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
8.			<![endif]-->
9.		</head>
10.		<body>
11.
12.		</body>
13.	</html>

 
Source  

6. HTML5 Page Structure

<!DOCTYPE HTML>

<html>

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Website</title>
</head>

<body>

        <header>
                <nav>
                        <ul>
                                <li>Your menu</li>
                        </ul>
                </nav>
        </header>

        <section>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

        </section>

        <aside>
                <h2>About section</h2>
                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </aside>

        <footer>
                <p>Copyright 2009 Your name</p>
        </footer>

</body>

</html>

 
Source  

7. Context Menu with HTML5

<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>

 
Source  

8. HTML5 Datalist

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

 
Source  

9. Get Directions from (Google Maps)

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

 
Source  

10. HTML5 Email Regexp Validate

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

 
Source  

Share

Tags:

— Gavin

A Web addicted Geek stuck inside Tron.

You may also like...

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz