HTML5 is a new semantic HTML markup. Although its still new and more tidy up work in progress, many web developer already started using HTML5 in their web design and development. Starting a standard needs on making a website.
Today i’m going to show you how to create a simple responsive html5 template. Some rules for HTML5 were established:
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
I’m using 2 developer tools for this tutorial but any html/php/css/ editor will be sufficient.
Step 1 – create a blank HTML5 template
First we will create a blank canvas (index.html) for the starting HTML5 template.
[sc_amazon title=”” search=”html”]
[php]
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
[/php]
Step 2 – adding the new HTML5 markup
HTML5 introduce a new html markup such as
[sourcecode language=”plain”]article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section[/sourcecode]
Here we are going to make sure every block were properly align, the main objective were to make the html markup for HEADER, NAVIGATION, CONTENT, SIDEBAR and FOOTER.
[php]
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<!– start html block –>
<header></header>
<nav></nav>
<section class="content"></section>
<aside class="sidebar"></aside>
<footer></footer>
<!– end html block –>
</div>
</body>
</html>
[/php]
You might notice the additional #wrapper. this is essential for global css adjustment control when using responsive media query later on.
Step 3 – adding code into html5 markup
Now we will add html code into each HTML5 markup block
a) Add <header> inner html code
[php]
<header>
<hgroup><h1 class="site-title"><a href="#">Simple HTML5 Template</a></h1></hgroup>
</header>
[/php]
b) Add <nav> inner html code
[php]
<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Parent Page</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two with child</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a></li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
[/php]
c) Add <section class=’content’> inner html code
Here i will use <article> html5 markup for all the repeated posts
[php]
<section class="content">
<!– post 1 –>
<article class="post">
<h1 class="post-title"><a href=#">This is a title for post</a></h1>
<!– adding post meta –>
<div class="entry post-meta">
<span class="post-author">Richard KS</span>
<span class="post-date">20th March 2013</span>
<span class="post-category">Tutorials</span>
<span class="post-tag">HTML5, CSS3 and Responsive</span>
<span class="post-comment">10 Comments</span>
</div>
<!– adding post content –>
<div class="entry post-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
</div>
</article>
<!– end post 1 –>
</section>
[/php]
d) Add <aside class=’sidebar’> inner html code
[php]
<aside class="sidebar">
<ul class="widget-sidebar">
<!– some sample list –>
<li class="widget widget_categories">
<h3 class="widget-title">Categories</h3>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Parent Category</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a>
<ul class="children">
<li><a href="#">Grandchild One</a></li>
<li><a href="#">Grandchild Two</a></li>
<li><a href="#">Grandchild Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Category 3</a></li>
</ul>
</li>
<!– some sample text block –>
<li class="widget widget_text">
<h3 class="widget-title">Text</h3>
<div class="textwidget">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</li>
</ul>
</aside>
[/php]
e) Add <footer> inner html code
[php]
<footer>
<div class="footer-left">Copyright@ 2013 HTML5.com</div>
<div class="footer-right">Privacy Policy – About Us</div>
</footer>
[/php]
Without css stylesheet added, here’s how the HTML5 markup will look like
Step 4 – adding the css for the html5
Create a new empty stylesheet css (style.css)
add this code to your index.html after <title> </title>
[php]<link href="style.css" rel="stylesheet" type="text/css">[/php]
1. Download normalize css and copy paste the entire css to the new stylesheet
2. add the below followup also to the new stylesheet, right after the normalize css code.
[css]
body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for <header> */
header {
padding: 1em 0;
margin: 0px;
float: left;
width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for <nav> */
nav {
display: block;
margin: 0 0 2em;
padding: 0px;
float: left;
width: 100%;
background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
z-index: 9999;
margin: 0px;
float: left;
width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav ul li a {
display: block;
padding: 1em;
font-size: 1.125em;
color: #ccc;
text-decoration: none;
margin: 0px;
background-color: #000;
border-right: 1px solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width: auto;
float: none;
}
nav ul li:hover {
background: #5f6975;
color: #FFF;
}
nav ul ul li a:hover {
background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for <section class=’content’> */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for <aside class=’sidebar’> */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul {
width:100%;
margin: 0px;
padding: 0px;
float: left;
list-style: none;
}
aside.sidebar ul li {
width:100%;
margin: 0px 0px 2em;
padding: 0px;
float: left;
list-style: none;
}
aside.sidebar ul li ul li {
margin: 0px 0px 0.2em;
padding: 0px;
}
aside.sidebar ul li ul li ul li {
margin: 0px;
padding: 0px 0px 0px 1em;
width: 90%;
font-size: 0.9em;
}
aside.sidebar ul li h3.widget-title {
width:100%;
margin: 0px;
padding: 0px;
float: left;
font-size: 1.45em;
}
/* css for <footer> */
footer {
width: 98%;
float:left;
padding: 1%;
background-color: white;
margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
[/css]
Step 5 – adding the @media query css3 for mobile friendly
at the bottom of the style.css, add this css code
[css]
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } /*lets add some background color so we know which dimension we’re in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } /*lets add some background color so we know which dimension we’re in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
[/css]
Step 6 – adding jquery, modernizr and html5shiv into <head>
Download Modernizr and upload it to the same directory as your new html file.
add below code before end of </head>
[php]
<!–[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="modernizr-latest.js" type="text/javascript"></script>
[/php]
With css stylesheet and javascript added, here’s how the HTML5 markup will look like
You are almost done!
[sc_amazon title=”” search=”html”]
Now try re-size your browser to 768px or 468px wide. The template will now be responsive and re-size according to your browser size. If you can, test them live in ipad or iphone.
Preview the HTML5 Template here
That’s all, hope you find this tutorial useful and share it.
