If anyone is looking forward to learn HTML5 then the below tips will help them learn and understand it quickly. These are some things that one should know in the start.
HTML5 doctype is simple:
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
New way:
<!doctype html>
Meta charset tag is simple:
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
New way:
<meta charset="UTF-8">
There are a number of new structural elements in HTML5 for defining documents. Below is an example of Main Structural Elements that you will be using mostly.
<header>
<nav>
<section>
<article>
<aside>
<footer>
One can have 3 sections in a page and each section can have their own header and footer. You might be familiar with divs, classes and ids in HTML4 or XHTML, you can use them in HTML5 for styling purpose. Let’s start with a basic code in HTML5 having top header, One menu for navigation, one content section with some articles, one sidebar and a footer.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A basic code in HTML5</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>header, footer, section, aside, nav, article {display: block;}</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">About us </a></li>
<li><a href="#"> What’s new </a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">A basic code in HTML5</a></h1>
<h2>Tag line </h2>
</header>
<section>
<article>
<h3><a href="#">Article 1</a></h3>
<img src="C:\Documents and Settings\abc\Desktop\abc.jpg" alt="ABC">
<p>Tips to learn HTML5 quickly</p>
</article>
<article>
<h3><a href="#">Article 2</a></h3>
<img src=" C:\Documents and Settings\abc\Desktop\123.jpg " alt="123">
<p> Tips to learn HTML5 quickly</p>
</article>
</section>
<aside>
<h4>Follow Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>Copyright@ abc </p>
</footer>
</body>
</html>
Definition:
- <header> It represents group of navigational aids. (You can use H1, H2, Hx, etc along with it for the styling purpose)
- <nav> It represents a section for the document which is created for navigation.
- <section> It represents generic document ( You can use h1, h2, h3, h4, h5, and h6 elements along with it for the styling purpose of
- document)
- <article>It represents independent piece of a content in a document for eg forum article.
- <aside> It represents a piece of content related to main document or the rest of pages.
- <footer> It represents a footer for a section you can add information about the author or copyright information.
There are other elements for video and audio and more, here I have just shared the basic elements that will help you in understanding HTML5 quickly if you are aware of HTML4 or XHTML.
Bookmarks