Revision: 65127
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 27, 2013 10:36 by Rar
Initial Code
<!DOCTYPE html>
<!--
HTML5 is the latest evolution
of standards that defines HTML.
-->
<!-- The best way to specify language in HTML5. -->
<html lang="en">
<head>
<!-- This is easier to type, and remember than http-equiv. -->
<meta charset="utf-8">
<!--
If you want to add more METAs,
just know not to go overboard
with them.
They're not relied on a lot
nowadays.
I do suggest still using a
few of them though, like
"charset."
-->
<!--
Stylesheets prohibit progressive
rendering until they're all
downloaded.
Keep them inside the HEAD to
eliminate this problem.
NEVER apply CSS in-line internally,
always externally.
Drop the 'type' attribute in HTML5
for optimization.
-->
<link rel="stylesheet" href="style\">
<link rel="icon" href="image\">
<!-- Appears on the tab in the browser. -->
<title></title>
<!--
As you may or may not have already
realized, HTML5 isn't supported in
older versions of internet explorer.
To compensate for this, you should
use html5shiv to add support to
HTML5.
The code used to do this, will only
work inside the HEAD, however.
And for performance sake, this should
go after the CSS.
-->
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<!--
Use class instead of id
whenever possible.
Id have more "weight"
than class when it comes
to applying styles.
This can prevent some CSS
classes applied on elements
inside the container from
working properly.
-->
<body><div class="container">
<!--
Despite the addition of new
elements that justifably
captures a lot of DIV's territory,
you can still use them.
The best practice is to use
DIVs when there is no other
more semantically appropiate
element that suits your
purpoe.
-->
<header>
<hgroup>
<h1>Title</h1>
<h2>Slogan</h2>
</hgroup>
</header>
<!--
In CSS, don't do:
nav ul {
}
Instead, you should do:
#navigation {
}
But you can still do:
header {
}
if you need only one.
Reduce those HTTP Request!
-->
<nav><ul class="navigation">
<!--
All text inside a HTML element
should be lowercase to make it
easier to read.
-->
<li class="active"><a href="home.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul></nav>
<div class="main">
<!--
Why would I use ARTICLE
when it should be SECTION
instead?
From the specs, doing that
isn't the true, intended
purpose of that element.
-->
<article>
<!--
Utilize :first-child, :last-child and
:nth-child to get non-classed elements
for CSS.
-->
<hgroup>
<h1>Title</h1>
<h3>Author</h3>
</hgroup>
<!--
Don't do this:
<p>Message
<p>Message
You should close those tags.
-->
<p>Message</p>
<p>Message</p>
<p>Message</p>
<footer>Date</footer>
</article>
</div>
<footer>Copyright</footer>
<!--
Scripts prevents progressive rendering, parallel
downloads for all content below.
Move them to the bottom for faster page loading.
JQuery is a fast, small, and feature-rich
JavaScript library. "Write less, do more."
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--
You'll need a fallback for when the website
you're retrieving JQuery from, fails.
There are other ways to do this than the
one I'm coding here (protocol-less URLS).
-->
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>
<!--
Finally, always comment your code.
You'll be suprised at how much
faster you'll from it.
-->
</div></body>
</html>
Initial URL
Initial Description
Extremely helpful to anyone who is looking to improve performance and follow best practices in HTML/CSS
Initial Title
HTML5 Basic Template (w/ Comments)
Initial Tags
css, javascript, template, html, CSS3, html5
Initial Language
HTML