html5 - Page 1 - Code Snippets Collection

21 pages : 1 2 3 4 5 6 7 8 9 10 11 Next › Last»

markrall/HTML 5 ( JavaScript)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset=utf-8> 
    <title>XHTML 1.0 Strict / HTML 5 Hybrid Base Template</title> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" />
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    <!--[if IE]>
        <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
        
    <![endif]-->
</head> 
<body> 
    <div class="container_wrapper">
        <div class="container section"> 
            <div class="header"> 
                <h1 id="logo">LOGO</div> 
                <h2 id="tagline">Concise, punchy slogan goes here!</h2> 
                <div class="nav"> 
                	<ul> 
                    	<li><a href="">Home</a></li> 
                        <li><a href="">Link 1</a></li> 
                        <li><a href="">Link 2</a></li> 
                        <li><a href="">Link 3</a></li> 
                    </ul> 
                </div><!-- END .naav --> 
            </div> 
            <div class="section" id="content"> 

            </div><!-- END #content --> 
        </section><!-- END #document --> 
        <div class="footer"> 
            <div class="section"> 
                <p>Copyright &amp;copy; 2010. All rights reserved.</p>
            </div> 
        </div>
    </div><!--END .container-wrapper -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</body> 
</html>

jasonkuhrt/HTML5 ( CSS)

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

bcmoney/HTML5 basic skeleton ( HTML)

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>HTML5 - basic skeleton</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<!--[if lt IE 9]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style type="text/css">
		header, section, footer, aside, nav, article, figure, audio, video, canvas  { display:block; }
	</style>

</head>
<body>
      <div id="wrapper">
         <header>
			Header
         </header>
         <nav>
			Nav
         </nav>
         <section id="content">
            <article>
				Article
            </article>
         </section>
		 <aside>
			Sidebar
		 </aside>
         <footer>
			Footer
         </footer>
      </div>	
</body>
</html>

Basic HTML5 skeleton template, including jQuery, for getting up and running quickly with HTML5

vagrantradio/Base HTML5 Template ( HTML)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="A description about your site" />
	<meta name="keywords" content="keywords, separated, by, comma" />
	<title>Untitled Document</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" href="css/style.css" media="screen" />
	<link rel="stylesheet" href="css/print.css" media="print" />
	<link rel="stylesheet" href="css/mobile.css" media="handheld" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>
	<section id="header">
		<header>
			<h1><a href="#">Site Title</a></h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
	</section>
	
	<section id="main">
		<article>
			<hgroup>
				<a href="#">
					<h1>Heading Title</h1>
					<h2>Heading Title 2</h2>
				</a>
			</hgroup>
			<p>Article Filler</p>
		</article>
		<aside>
			Sidebar Filler
		</aside>
	</section>
	
	<section id="footer">
		<footer>
			&amp;copy; Copyright Year by Author. All Rights Reserved.
		</footer>
	</section>
	
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'XX-XXXXXXX-XX']);
		_gaq.push(['_trackPageview']);
	
		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</body>
</html>

HTML5 starting point template. Used in conjunction with HTML5 CSS reset at the above link.

sethmbruce/HTML 5 Basic Build ( HTML)

<!DOCTYPE html>
<html class="no-js">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>title here</title>
  <link rel="stylesheet" href="css/main.css">

  <script src="modernizr-1.5.js"></script>

</head>

<body>

  <div id="wrapper">
   


  <div class="branding">
  </div>
  


  <div class="nav-main">[…]</div>
  <div class="content">
  <div class="content-main">[…]</div>
  <div class="content-sub">[…]</div>

  <div class="footer">[…]</div>


  
  </div>

</body>
</html>

HTML 5 Basic skeleton Build

blantonious/HTML5 Root element ( HTML)

<html lang="en">

You can keep your old version but in HTML5 you can shorten it.

resting/HTML5 structure ( HTML)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OPTIK</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

</body>
</html>

http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3

mrjohnsly/HTML5 CSS Reset ( CSS)

/* 
html5doctor.com Reset Stylesheet
v1.2 
2009-07-15
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, 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, dialog, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video, source {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

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

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

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

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

mark {
	background-color:#ff9;
	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 #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

All credit to Richard Clarke, code taken from HTML 5 Doctor. Posted here for quick access from TextMate.

Sephr/Get HTML5 origin ( Regular Expression)

/^([\w-]+:\/*\[?[\w\.:-]+\]?(?::\d+)?).*/

Use this to extract an HTML5 origin from a URI. $1 is the origin.

The square brackets are there to support IPv6 addresses.

Example:

var html5OriginRegex = /^([\w-]+:\/*\[?[\w\.:-]+\]?(?::\d+)?).*/;
"http://www.google.com:42/foo/bar/baz.html".replace(html5OriginRegex, "$1")
== "http://www.google.com:42"

rtcrm/HTML5 enabling script ( JavaScript)

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, here’s a mini script that enables all the new elements.

Usage & Download

The html5.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them — so it can’t sit in the footer of the page, i.e. below the elements in question).

It’s conditional within the code, so Firefox et al won’t run the code — but it doesn’t hurt to wrap it in an IE conditional call to reduce the http pulls for other browsers:

<!--[if IE]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

paul66/Html5 ready reset ( CSS)

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer &amp; 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 */

Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.

ichnoweb/HTML5 Video Test ( JavaScript)

function understands_video() {
	return !!document.createElement('video').canPlayType; // boolean
}
if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
	videoControls.style.display = 'none';
}

mrjohnsly/HTML5 Skeleton ( HTML)

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

loric/HTML5 Basic ( HTML)

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

Code Snippets Collection