Tips to learn HTML5 quickly

Fernandoa · #1 19-07-2012

Sponsored Links

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>

<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.

Kh@LnaYak · #2 19-07-2012

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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads for: "Tips to learn HTML5 quickly"
Thread	Thread Starter	Forum	Replies	Last Post
Is it worth to go for HTML5 right now	klinsmann	Software Development	7	3 Weeks Ago 02:18 PM
HTML5 for Beginners	Andrew	Guides & Tutorials	2	10-10-2012 03:02 PM
Tips and Tricks for Pet Society game to quickly get Paw Points and money	The-Tiago	Video Games	4	03-03-2011 09:43 AM
HTML5 WebSocket	Bruno007	Software Development	2	14-12-2010 05:49 AM
Want to know about html5	Charites	Windows Software	3	22-11-2010 01:29 PM

Tips to learn HTML5 quickly

Tips & Tweaks