Skip to main content

Sample HTML5 Structure







HTML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it’s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.


Can develop apps for Android, BB, Windows, IPhone.


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section { display: block; }
#container { width:900px; margin:auto; background-color:white; }
header { background-color:#666; }
nav li { display:inline; padding-right:1em; }
nav a { color:white; text-decoration:none; }
nav a:hover { text-decoration:overline; }
h1, h2 { margin:0px; font-size:1.5em; }
h2 { font-size:1em; }
footer { background-color:#999; text-align:center; }
</style>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
</head>
<body>
<div id="container">
<header>
<h1>Sample HTML5 Structure</h1>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<section>
<hgroup> <h1>Main Section</h1> <h2>This is a sample HTML5 Page</h2> </hgroup>
<article> <p>This is the content for the first article</p> </article> <article> <p>This is the content for the second article</p>
</article>
<p>This is the content for the second article</p> </article>
</section>
<footer>
<p>This is the Footer</p> </footer> </div> </body>
</html>




As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc. The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.

The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.



Can Fix The Footer:

EX:-

#footer{

position:fixed;

left:0px;

bottom:0px;

height:30px;

width:100%;

background:#999;

}




Check Out:-

http://html5tutorial.info/html5-canvas-rect.php

http://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css




Thanks,

Sujay

Comments

Post a Comment

Popular posts from this blog

Firebase with android: An Overview of Products and Usage

Introduction: In the evolving landscape of mobile application development, understanding user behaviour, managing user identity, and delivering personalised communication are critical components of a successful digital product. Google provides a suite of powerful tools through Firebase and Google Analytics that help developers build, improve, and grow their applications efficiently. This article explores Google Analytics , Firebase Authentication , Firebase Cloud Messaging (push notifications), and other core Firebase products , along with their practical uses. Google Analytics Google Analytics for Firebase is a free app measurement solution that provides insights on app usage and user engagement. Unlike traditional Google Analytics, this version is tightly integrated with Firebase services, making it highly useful for mobile and cross-platform apps. Key Features: Event tracking : Automatically or manually track user actions like screen views, button taps, purchases, etc. User segm...
Post a Comment
Read more

Beyond Scanning: Meet the All-in-One AI Document Assistant by Digitify Vision Technology

In an era where efficiency is the ultimate currency, information is scattered everywhere—on physical paper, within QR codes, and inside lengthy digital documents. The challenge isn't just capturing this data; it’s making it work for you. At Digitify Vision Technology , we believe your smartphone should be more than just a camera—it should be a high-performance engine for your daily workflow. Today, we are proud to unveil our most powerful update yet: a total evolution in AI-driven document management. 💡 Key Features of the New Update We’ve bridged the gap between physical information and digital action by integrating advanced vision and audio intelligence into a single, seamless experience. 🔍 Precision Scanning for Everything Our advanced vision engine is now more versatile than ever. Intelligent Document Scanning: Capture crisp, professional-grade scans of physical papers, contracts, or handwritten notes. QR Code Extraction: Instantly scan any QR code to extract text, read URL...
Post a Comment
Read more
  Mastering Per-App Language Preferences: From Android 10 to Android 13+ One of the most requested features by users is the ability to use an app in a language different from the system language. While Android 13 (API 33) introduced "Per-App Language" settings at the system level, implementing this backward-compatibly for older devices like Android 10 (API 29) used to be a challenge involving manual configuration wrapping. Today, thanks to AppCompat 1.6.0+ , we have a unified, standard way to handle this. Here is the modern guide to implementing seamless language switching. The Architecture: How it Works On Android 13 and above, the system handles the storage and application of your app's locale. On older versions, the AppCompat library manages this behavior by storing your preference in an internal XML file and injecting the resources during the activity lifecycle. Step 1: The Locale Helper Utility Instead of scattering logic across your app, use a clean LocaleHelper o...
Post a Comment
Read more