Go Back   TechArena Community > Software > Tips & Tweaks
Become a Member!
Forgot your username/password?
Register Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



Tips to learn HTML5 quickly

Tips & Tweaks


Reply
 
Thread Tools Search this Thread
  #1  
Old 19-07-2012
Member
 
Join Date: May 2009
Posts: 221
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.

Reply With Quote
  #2  
Old 19-07-2012
Member
 
Join Date: Nov 2011
Posts: 659
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.
Reply With Quote
Reply

  TechArena Community > Software > Tips & Tweaks
Tags: , ,



Thread Tools Search this Thread
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 8 27-11-2013 01:16 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
How to use <canvas> tag in HTML5 Aia Zav Software Development 7 26-02-2011 12:52 PM
New thing about HTML5 Atalaya Windows Software 5 02-12-2010 11:04 PM
Want to know about html5 Charites Windows Software 3 22-11-2010 01:29 PM


All times are GMT +5.5. The time now is 09:43 AM.