Tips to learn HTML5 quickly
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.:biggrin:
Re: Tips to learn HTML5 quickly
Below is the list of new elements that have been added in HTML5:
- <article> Represent an article
- <aside> Represent content aside from the page content
- <audio> Represent sound content
- <bdi> It is used for bi-directional text formatting
- <canvas> It is used for defining graphics
- <command> Represent a command
- <data> It is used for adding machine-readable data
- <datalist> Represent an "autocomplete" dropdown list
- <details> Represent details of an element
- <embed> Represent external application
- <eventsource> Represent a target for events sent by a server
- <fieldset> Represent a fieldset
- <figcaption> Represent caption for the figure element
- <figure> Represent group of media content along with their caption
- <footer> Represent a footer for a section or page
- <hgroup> Represent a header for a section or page
- <keygen> It is used for creating a key pair
- <mark> Represent marked text
- <meter> Represent measurement within a predefined range
- <nav> Represent navigation links
- <output> Represent some types of output
- <progress> Represent progress of a task
- <ruby> Represent a ruby annotation
- <rp> It is used browsers that does not support ruby annotations
- <rt> Represent ruby text component of a ruby annotation.
- <select> Represent a selectable list
- <source> Represent media resources
- <summary> Represent a summary/caption for the <details> element
- <time> Represent a date/time
- <track> Represent a text track for media lie video and audio
- <video> Represent a video
- <wbr> Represent a line break for very long words and strings of text without space.
