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

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 object. This handles the distinction between the system LocaleManager (...
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
  Optimising Android Launch: Mastering App Startup & The Modern Splash Screen The first few seconds of an app’s life determine a user's first impression. A slow start or a flickering white screen can lead to immediate uninstalls. In this guide, we’ll look at how to streamline your initialisation using the App Startup Library and ensure a seamless visual transition with the Android 12 Splash Screen API (with full backward compatibility for API 29). Part 1: The App Startup Library Traditionally, apps initialised multiple components using separate content providers. This adds overhead and slows down launch time. The Jetpack App Startup library allows all components to share a single content provider, significantly improving performance. Why use it? Performance: Shared content provider reduces overhead. Order: Explicitly set the initialisation sequence. Simplicity: Both library creators and app developers use a unified interface. Part 2: The Modern Splash Screen API Starting ...
Post a Comment
Read more